feat(organizations): improve UI & UX (#387)

Co-authored-by: Mário Rodrigues <93675410+MarioRodrigues10@users.noreply.github.com>

lib/atomic/organizations.ex

@@ -34,6 +34,25 @@ defmodule Atomic.Organizations do
     |> Flop.validate_and_run(flop, for: Organization)
   end
 
+  @doc """
+  Returns the list of organizations members.
+
+  ## Examples
+
+      iex> list_organizations()
+      [%Membership{}, ...]
+
+  """
+  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 """
   Returns the list of organizations followed by an user.
 
@@ -365,7 +384,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 """

lib/atomic/organizations/organization.ex

@@ -7,7 +7,7 @@ defmodule Atomic.Organizations.Organization do
   alias Atomic.Organizations.{Announcement, Board, Card, Department, Membership, 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
 
   @derive {
@@ -23,6 +23,7 @@ defmodule Atomic.Organizations.Organization do
 
   schema "organizations" do
     field :name, :string
+    field :long_name, :string
     field :description, :string
     field :card_image, Uploaders.Card.Type
     field :logo, Uploaders.Logo.Type

lib/atomic_web/live/board_live/index.html.heex

@@ -2,24 +2,24 @@
   <ul id="sortable-list" phx-hook="InitSorting" class="flex flex-col mx-auto max-w-7xl px-6 lg:px-8">
     <div class="flex items-center border-b-2 border-zinc-200 justify-between">
       <div class="min-w-0 flex flex-row items-center justsiy-center">
-        <Heroicons.Solid.arrow_sm_left class="cursor-pointer mb-2 mr-2 w-8 h-8 text-zinc-400" phx-click="previous-year" phx-value-organization_id={@current_organization.id} />
+        <Heroicons.Solid.arrow_sm_left class="cursor-pointer mb-2 mr-2 w-8 h-8 text-zinc-400" phx-click="previous-year" phx-value-organization_id={@organization.id} />
         <h2 class="text-xl font-bold leading-7 text-zinc-900 mb-2 sm:truncate sm:text-4xl">
           <%= gettext("Board") %> <%= @year %>
         </h2>
-        <Heroicons.Solid.arrow_sm_right class="cursor-pointer mb-2 ml-2 w-8 h-8 text-zinc-400" phx-click="next-year" phx-value-organization_id={@current_organization.id} />
+        <Heroicons.Solid.arrow_sm_right class="cursor-pointer mb-2 ml-2 w-8 h-8 text-zinc-400" phx-click="next-year" phx-value-organization_id={@organization.id} />
       </div>
       <%= if not @empty? and @has_permissions? do %>
         <div class="hidden lg:border-orange-500 mb-2 lg:block">
           <%= live_patch("+ New Board Member",
-            to: Routes.board_new_path(@socket, :new, @current_organization),
+            to: Routes.board_new_path(@socket, :new, @organization),
             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"
           ) %>
         </div>
       <% end %>
     </div>
     <%= if @empty? and @has_permissions? do %>
       <div class="mt-32">
-        <.empty_state id="empty_state" url={Routes.board_new_path(@socket, :new, @current_organization)} placeholder="board member" />
+        <.empty_state id="empty_state" url={Routes.board_new_path(@socket, :new, @organization)} placeholder="board member" />
       </div>
     <% else %>
       <%= for board_department <- @board_departments do %>

lib/atomic_web/live/organization_live/index.ex

@@ -27,7 +27,7 @@ defmodule AtomicWeb.OrganizationLive.Index do
   end
 
   defp list_organizations(params) do
-    case Organizations.list_organizations(Map.put(params, "page_size", 4)) do
+    case Organizations.list_organizations(Map.put(params, "page_size", 18)) do
       {:ok, {organizations, meta}} ->
         %{organizations: organizations, meta: meta}
 

lib/atomic_web/live/organization_live/index.html.heex

@@ -14,40 +14,38 @@
       <.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-zinc-200 rounded overflow-auto border-b-0">
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 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-zinc-200 hover:bg-zinc-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-zinc-400">
-                          <span class="text-4xl font-medium leading-none text-white select-none sm:text-5xl">
-                            <%= 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-zinc-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">
+                    <%= 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="hidden md:block xl:hidden text-xs text-zinc-900">
+                <%= maybe_slice_string(organization.long_name, 35) %>
+              </p>
+              <p class="sm:block md:hidden xl:block text-xs text-zinc-900">
+                <%= maybe_slice_string(organization.long_name, 85) %>
+              </p>
             </div>
-          </li>
+          </div>
         <% end %>
       <% end %>
-    </ul>
+    </div>
     <.pagination items={@organizations} meta={@meta} params={@params} class="mt-2 flex w-full items-center justify-between" />
   <% end %>
 </div>

lib/atomic_web/live/organization_live/show.ex

@@ -5,19 +5,22 @@ defmodule AtomicWeb.OrganizationLive.Show do
   alias Atomic.Activities
   alias Atomic.Departments
   alias Atomic.Organizations
+  alias Atomic.Uploaders.Logo
 
   @impl true
   def mount(_params, _session, socket) do
     {:ok, socket}
   end
 
   @impl true
-  def handle_params(%{"organization_id" => organization_id}, _, socket) do
+  def handle_params(%{"organization_id" => organization_id} = _params, _, socket) do
     organization = Organizations.get_organization!(organization_id)
 
     {:noreply,
      socket
      |> assign(:page_title, organization.name)
+     |> assign(:organization, organization)
+     |> assign(:people, Organizations.list_organizations_members(organization))
      |> assign(:current_page, :organizations)
      |> assign(:organization, organization)
      |> assign(:departments, Departments.list_departments_by_organization_id(organization_id))