feat(organizations): improve UI & UX

cesium · Aug 26, 2023 · 57a9cd5 · 57a9cd5
1 parent 32de1b2
commit 57a9cd5
Show file tree

Hide file tree

Showing 10 changed files with 361 additions and 156 deletions.
diff --git a/lib/atomic/organizations.ex b/lib/atomic/organizations.ex
@@ -23,6 +23,16 @@ defmodule Atomic.Organizations do
     |> Repo.all()
   end
 
+  def list_organizations_members(%Organization{} = organization) do
+    from(m in Membership,
+      where: m.organization_id == ^organization.id and m.role != :follower,
+      join: u in User,
+      on: u.id == m.user_id,
+      select: u
+    )
+    |> Repo.all()
+  end
+
   @doc """
   Gets a single organization.
 
@@ -317,7 +327,12 @@ defmodule Atomic.Organizations do
 
   """
   def delete_membership(%Membership{} = membership) do
-    Repo.delete(membership)
+    organization =
+      from(o in Organization, where: o.id == ^membership.organization_id) |> Repo.one()
+
+    if !(organization.name == "CeSIUM" and membership.role == :follower) do
+      Repo.delete(membership)
+    end
   end
 
   @doc """

diff --git a/lib/atomic/organizations/organization.ex b/lib/atomic/organizations/organization.ex
@@ -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

diff --git a/lib/atomic_web/live/organization_live/index.html.heex b/lib/atomic_web/live/organization_live/index.html.heex
@@ -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>
@@ -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>
diff --git a/lib/atomic_web/live/organization_live/show.ex b/lib/atomic_web/live/organization_live/show.ex
@@ -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}
@@ -39,6 +37,7 @@ defmodule AtomicWeb.OrganizationLive.Show do
      |> assign(:mode, "month")
      |> assign(:params, params)
      |> assign(:organization, organization)
+     |> assign(:people, Organizations.list_organizations_members(organization))
      |> assign(:followers_count, followers_count)
      |> assign(:sessions, list_sessions(id))
      |> assign(:departments, list_departments(id))
@@ -88,7 +87,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)}