Skip to content

Commit

Permalink
feat(organzations): improve UI & UX
Browse files Browse the repository at this point in the history
  • Loading branch information
@feliciofilipe
feliciofilipe committed Aug 26, 2023
1 parent 32de1b2 commit 82e581a
Show file tree
Hide file tree
Showing 7 changed files with 111 additions and 143 deletions.
6 changes: 5 additions & 1 deletion lib/atomic/organizations.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -317,7 +317,11 @@ defmodule Atomic.Organizations do
"""
def delete_membership(%Membership{} = membership) do
Repo.delete(membership)
cesium = from(o in Organization, where: o.name == "CeSIUM") |> Repo.one()

if !(membership.organization_id == cesium.id and membership.role == :follower) do
Repo.delete(membership)
end
end

@doc """
Expand Down
3 changes: 2 additions & 1 deletion lib/atomic/organizations/organization.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,12 @@ defmodule Atomic.Organizations.Organization do
alias Atomic.Organizations.{Board, Card, Department, Membership, News, Partner}
alias Atomic.Uploaders

@required_fields ~w(name description)a
@required_fields ~w(name long_name description)a
@optional_fields ~w(card_image logo)a

schema "organizations" do
field :name, :string
field :long_name, :string
field :description, :string
field :card_image, Uploaders.Card.Type
field :logo, Uploaders.Logo.Type
Expand Down
58 changes: 28 additions & 30 deletions lib/atomic_web/live/organization_live/index.html.heex
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
<div class="min-h-full bg-white">
<div class="pt-5 pr-6 pb-5 pl-4 border-gray-200 sm:pl-6 lg:pl-8 xl:pt-6 xl:pl-6">
<div class="pt-5 pr-6 pb-5 pl-4 border-zinc-200 sm:pl-6 lg:pl-8 xl:pt-6 xl:pl-6">
<div class="flex justify-between items-center h-10">
<h1 class="text-xl font-bold leading-7 text-zinc-900 sm:truncate sm:text-4xl"><%= gettext("Organizations") %></h1>
<%= if not @empty and @has_permissions do %>
<div class="flex flex-col sm:flex-row xl:flex-col">
<%= live_patch("+ New Organization", to: Routes.organization_index_path(@socket, :new), class: "border-2 rounded-md bg-white text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-orange-500 shadow-sm hover:bg-orange-500 hover:text-white") %>
<%= live_patch("+ New Organization",
to: Routes.organization_index_path(@socket, :new),
class: "rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
) %>
</div>
<% end %>
</div>
Expand All @@ -14,39 +17,34 @@
<.empty_state id="empty_state" url={Routes.organization_index_path(@socket, :new)} placeholder="organization" />
</div>
<% else %>
<ul role="list" class="relative z-0 border border-gray-200 rounded">
<div class="grid grid-cols-4 gap-4">
<%= for organization <- @organizations do %>
<%= live_redirect to: Routes.organization_show_path(@socket, :show, organization) do %>
<li id={"organization-#{organization.id}"} class="relative pr-6 border-b border-gray-200 hover:bg-gray-50">
<div class="flex justify-between items-center">
<div class="py-4 pr-3 pl-4 text-sm whitespace-nowrap sm:pl-6">
<div class="flex items-center">
<div>
<%= if is_nil(Uploaders.Logo.url({organization.logo, organization}, :original)) do %>
<div class="relative flex-shrink-0 rounded-2xl min-w-24 min-h-24 sm:min-w-32 sm:min-h-32">
<span class="inline-flex justify-center items-center w-24 h-24 rounded-2xl sm:w-32 sm:h-32 bg-gray-400">
<span class="text-4xl font-medium leading-none text-white select-none sm:text-5xl">
<%= Atomic.Accounts.extract_initials(organization.name) %>
</span>
</span>
</div>
<% else %>
<div class="relative flex-shrink-0 w-24 h-24 rounded-2xl sm:w-32 sm:h-32">
<img src={Uploaders.Logo.url({organization.logo, organization}, :original)} class="object-center absolute rounded-2xl w-[98px] h-[98px] sm:w-[130px] sm:h-[130px]" />
</div>
<% end %>
</div>
<div class="ml-4">
<div class="font-medium text-lg text-gray-900">
<%= organization.name %>
</div>
</div>
</div>
<div class="flex items-center space-x-4 px-4 py-4 border border-zinc-200 hover:bg-zinc-50 hover:cursor-pointer rounded-lg">
<%= if is_nil(Uploaders.Logo.url({organization.logo, organization}, :original)) do %>
<div class="relative flex-shrink-0 rounded-2xl min-w-20 min-h-20">
<span class="inline-flex justify-center items-center w-20 h-20 rounded-2xl bg-zinc-400">
<span class="text-4xl font-medium leading-none text-white select-none sm:text-5xl">
<%= Atomic.Accounts.extract_initials(organization.name) %>
</span>
</span>
</div>
<% else %>
<div class="relative flex-shrink-0 w-20 h-20 rounded-2xl">
<img src={Uploaders.Logo.url({organization.logo, organization}, :original)} class="object-center absolute rounded-2xl w-20 h-20" />
</div>
<% end %>
<div class="ml-4">
<h4 class="font-medium text-lg text-zinc-900">
<%= organization.name %>
</h4>
<p class="text-xs text-zinc-900">
<%= organization.long_name %>
</p>
</div>
</li>
</div>
<% end %>
<% end %>
</ul>
</div>
<% end %>
</div>
7 changes: 4 additions & 3 deletions lib/atomic_web/live/organization_live/show.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ defmodule AtomicWeb.OrganizationLive.Show do
alias Atomic.Organizations
alias Atomic.Uploaders.Logo

import AtomicWeb.Components.Calendar

@impl true
def mount(_params, _session, socket) do
{:ok, socket}
Expand Down Expand Up @@ -88,7 +86,10 @@ defmodule AtomicWeb.OrganizationLive.Show do
{:noreply,
socket
|> put_flash(:success, "Stopped following " <> socket.assigns.organization.name)
|> push_redirect(to: Routes.organization_index_path(socket, :index))}
|> assign(:following, false)
|> push_patch(
to: Routes.organization_show_path(socket, :show, socket.assigns.organization.id)
)}

{:error, %Ecto.Changeset{} = changeset} ->
{:noreply, assign(socket, :changeset, changeset)}
Expand Down
171 changes: 64 additions & 107 deletions lib/atomic_web/live/organization_live/show.html.heex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@
<div class="bg-white">
<div class="flex justify-between px-4 py-4 sm:px-6">
<div class="w-full gap-x-4 lg:flex lg:flex-col">
<div class="flex flex-col items-center lg:flex-row lg:space-x-4">
<div class="m-2">
<div class="flex flex-col items-center lg:flex-row space-x-2 lg:space-x-8">
<div>
<%= if @organization.logo do %>
<img src={Logo.url({@organization.logo, @organization}, :original)} class="mb-2 w-64 h-32 block lg:mb-8" />
<img src={Logo.url({@organization.logo, @organization}, :original)} class="mb-2 w-32 h-32 block" />
<% else %>
<img src={Routes.static_path(@socket, "/images/atomic.png")} class="mb-2 w-64 h-64 block lg:mb-8" />
<img src={Routes.static_path(@socket, "/images/atomic.png")} class="mb-2 w-32 h-32 block" />
<% end %>
</div>
<div class="flex-1 space-x-2">
Expand All @@ -31,117 +31,74 @@
<% end %>
<% end %>
<div class="flex flex-col lg:flex-row items-center lg:items-start lg:justify-start justify-center lg:space-x-2">
<div class="flex flex-col items-center lg:items-start lg:justify-start justify-center">
<h1 class="text-2xl font-bold text-zinc-900 sm:text-3xl">
<div x-data="{ open: false }" class="flex flex-col items-center lg:items-start lg:justify-start justify-center space-y-2">
<h2 class="font-medium text-zinc-900 text-2xl">
<%= @organization.name %>
</h1>
<div class="flex flex-row items-center space-x-1">
<span class="text-xl text-zinc-900 font-bold inline-flex items-center"><%= @followers_count %></span>
<span class="ml-2 text-xl text-zinc-900 w-full inline-flex items-center">Followers</span>
</h2>
<p class="text-xs text-gray-900">
<%= @organization.long_name %>
</p>
<div class="flex flex-row items-center space-x-2 text-sm">
<span class="text-zinc-900 font-bold inline-flex items-center"><%= @followers_count %></span>
<span class="text-zinc-900 w-full inline-flex items-center">Followers</span>
</div>
<%= if not @following do %>
<button phx-click="follow" type="button" class="w-32 text-center rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-medium text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
Follow
</button>
<% else %>
<%= if @organization.name == "CeSIUM" do %>
<div class="lg:my-0 w-32 rounded-md bg-indigo-400 text-lg py-2 text-center text-sm font-medium text-white shadow-sm inline">Following</div>
<% else %>
<div class="relative">
<div class="inline-flex rounded-md shadow-sm">
<div class="inline-flex rounded-md shadow-sm">
<div class="inline-flex items-center gap-x-1.5 rounded-l-md bg-indigo-400 px-3 py-2.5 text-white shadow-sm">
<p class="text-sm font-medium">Following</p>
</div>
<button
type="button"
@click="open = true"
class="inline-flex items-center rounded-l-none rounded-r-md bg-indigo-400 px-2 py-2.5 hover:bg-indigo-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-50"
aria-haspopup="listbox"
aria-expanded="true"
aria-labelledby="listbox-label"
>
<span class="sr-only">Change published status</span>
<svg class="h-5 w-5 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<ul
x-show="open"
phx-click="unfollow"
@click="open = false"
class="absolute left-0 z-10 -mr-1 mt-2 w-72 origin-top-left divide-y divide-zinc-200 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:left-auto sm:left-0"
tabindex="-1"
role="listbox"
aria-labelledby="listbox-label"
aria-activedescendant="listbox-option-0"
>
<li class="text-gray-900 cursor-default select-none p-4 text-sm hover:cursor-pointer hover:bg-zinc-50">
<div class="flex flex-col">
<div class="flex justify-between">
<p class="font-normal">Unfollow</p>
</div>
</div>
</li>
</ul>
</div>
<% end %>
<% end %>
</div>
<%= if not @following do %>
<button phx-click="follow" class="my-2 lg:my-0 w-32 border-2 rounded-md bg-orange-500 text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-white shadow-sm inline hover:bg-white hover:text-orange-500">Follow</button>
<% else %>
<button phx-click="unfollow" class="my-2 lg:my-0 w-32 border-2 rounded-md bg-white text-lg border-orange-500 py-2 px-3.5 text-sm font-medium text-orange-500 shadow-sm inline hover:bg-orange-500 hover:text-white">Unfollow</button>
<% end %>
</div>
</div>
</div>
<span class="break-normal"><%= @organization.description %></span>
</div>
</div>
<div class="flex flex-col-reverse border-b border-zinc-200 xl:flex-row">
<div class="flex w-full items-center justify-between">
<nav class="-mb-px flex flex-1 space-x-6 overflow-x-auto xl:space-x-8" aria-label="Tabs">
<div x-on:click="option = 'activities'" x-bind:class="option == 'activities' ? 'border-zinc-800' : 'border-transparent'" class="cursor-pointer text-zinc-500 hover:text-zinc-700 whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium">
<%= gettext("Latests Activities") %>
</div>

<div x-on:click="option = 'departments'" x-bind:class="option == 'departments' ? 'border-zinc-800' : 'border-transparent'" class="cursor-pointer text-zinc-500 hover:text-zinc-700 whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium">
<%= gettext("Current Departments") %>
</div>
</nav>
<span class="mt-8 break-normal"><%= @organization.description %></span>
</div>
</div>
</div>
</div>

<div x-bind:class="option == 'activities' ? 'block' : 'hidden'" class="h-full lg:justify-center py-2">
<div class="h-max lg:w-full">
<div class="w-full flex flex-row items-center">
<h2 class="text-2xl font-bold"><%= gettext("Activities") %></h2>
<Heroicons.Solid.academic_cap class="ml-2 h-5 w-5 text-zinc-400 inline" />
<%= live_patch("See all", to: Routes.activity_index_path(@socket, :index, @organization), class: "text-sm font-semibold text-gray-300 ml-4") %>
</div>
</div>
<div class="w-full flex flex-col lg:flex-row items-center justify-center mt-2 lg:w-full">
<ul class="mr-8">
<%= for session <- Enum.take(@sessions, 5) do %>
<li class="w-96 mb-2 items-center justify-between border-b-2 border-gray-200 gap-x-6 py-2">
<div class="">
<div class="flex flex-col ml-2">
<h3 class="text-lg font-semibold text-gray-700">
<Heroicons.Solid.calendar class="h-5 w-5 text-zinc-400 inline" />
<%= session.activity.title %>
</h3>
<span class="text-md font-semibold text-gray-700">
<%= display_date(session.inserted_at) %> <%= display_time(session.inserted_at) %>
</span>
<span class="text-md font-semibold text-gray-500">
<%= session.activity.description %>
</span>
</div>
</div>
</li>
<% end %>
</ul>
<div>
<.calendar id="calendar" current_path={Routes.calendar_show_path(@socket, :show)} sessions={@sessions} params={@params} mode={@mode} time_zone={@time_zone} current_organization={@organization} />
</div>
</div>
</div>

<div x-bind:class="option == 'departments' ? 'block' : 'hidden'">
<ul role="list" class="mt-5 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
<%= for department <- @departments do %>
<li class="col-span-1 flex flex-col border-2 border-gray-200 rounded-lg bg-white text-center shadow hover:bg-gray-50">
<%= live_patch to: Routes.department_show_path(@socket, :show, @organization, department), class: "" do %>
<div class="flex flex-1 flex-col w-full p-4">
<span class="w-full flex items-center justify-center">
<span class="flex justify-center items-center mr-1.5 w-16 h-16 bg-zinc-500 rounded-xl">
<span class="text-lg font-medium w-full text-white">
<%= Atomic.Accounts.extract_initials(department.name) %>
</span>
</span>
</span>
<h3 class="mt-6 text-md font-bold text-gray-900"><%= department.name %></h3>
<span class="text-md font-semibold text-gray-500">
<%= department.description %>
</span>
</div>
<div>
<div class="-mt-px flex divide-x divide-gray-200">
<div class="-ml-px flex w-0 flex-1 z-1">
<%= live_patch("Edit",
to: Routes.department_index_path(@socket, :edit, @organization, department),
class: "relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-gray-900 hover:bg-gray-300"
) %>
</div>
<div class="-ml-px flex w-0 flex-1">
<%= link("Delete",
to: "#",
phx_click: "delete",
class: "relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-gray-900 hover:bg-gray-300",
phx_value_id: department.id,
data: [confirm: "Are you sure?"]
) %>
</div>
</div>
</div>
<% end %>
</li>
<% end %>
</ul>
</div>
</div>
1 change: 1 addition & 0 deletions priv/repo/migrations/2022000000000_create_organizations.exs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ defmodule Atomic.Repo.Migrations.CreateOrganizations do
create table(:organizations, primary_key: false) do
add :id, :binary_id, primary_key: true
add :name, :string, null: false
add :long_name, :string, null: false
add :description, :text, null: false
add :location, :map
add :logo, :string
Expand Down
Loading

0 comments on commit 82e581a

Please sign in to comment.