From 8d57cd64789af107c6532ac237047650efa94544 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= <mjsrodrigues4@gmail.com>
Date: Mon, 7 Aug 2023 23:41:03 +0100
Subject: [PATCH] Change organization with live component

---
 lib/atomic_web/components/organizations.ex    | 68 +++++++++++++++++++
 lib/atomic_web/router.ex                      |  2 +-
 .../templates/layout/live.html.heex           | 34 ++--------
 3 files changed, 73 insertions(+), 31 deletions(-)
 create mode 100644 lib/atomic_web/components/organizations.ex

diff --git a/lib/atomic_web/components/organizations.ex b/lib/atomic_web/components/organizations.ex
new file mode 100644
index 000000000..bb9a95e2b
--- /dev/null
+++ b/lib/atomic_web/components/organizations.ex
@@ -0,0 +1,68 @@
+defmodule AtomicWeb.Components.Organizations do
+  @moduledoc """
+  This component is used to render the list of organizations in the sidebar.
+  """
+  use Phoenix.LiveComponent
+
+  alias Atomic.Accounts
+  alias Atomic.Organizations
+  alias Atomic.Uploaders.Logo
+
+  def render(
+        %{
+          current_user: current_user,
+          current_organization: current_organization
+        } = assigns
+      ) do
+    ~H"""
+    <div class="organizations">
+      <%= for organization <- Accounts.get_user_organizations(current_user) do %>
+        <%= if organization.id != current_organization.id do %>
+          <div role="none">
+            <a phx-target={@myself} phx-click="default_organization" phx-value-organization_id={organization.id} class="w-full text-zinc-700 block px-4 py-2 text-sm hover:bg-zinc-200 focus:bg-zinc-300" role="menuitem" tabindex="-1" id="options-menu-item-0">
+              <span class="flex w-full items-center justify-between">
+                <span class="flex min-w-0 items-center justify-between space-x-3">
+                  <%= if organization.logo do %>
+                    <img src={Logo.url({organization.logo, organization}, :original)} class="w-10 h-10 rounded-lg" />
+                  <% else %>
+                    <span class="inline-flex justify-center items-center mr-1.5 w-10 h-10 bg-zinc-500 rounded-lg">
+                      <span class="text-lg font-medium leading-none text-white">
+                        <%= Atomic.Accounts.extract_initials(organization.name) %>
+                      </span>
+                    </span>
+                  <% end %>
+                  <span class="flex min-w-0 flex-1 flex-col">
+                    <span class="truncate text-md font-medium text-zinc-900"></span>
+                    <span class="truncate text-sm text-zinc-600">
+                      <%= organization.name %>
+                    </span>
+                    <span class="truncate text-xs text-zinc-500">
+                      <%= AtomicWeb.ViewUtils.capitalize_first_letter(Atomic.Organizations.get_role(current_user.id, organization.id)) %>
+                    </span>
+                  </span>
+                </span>
+              </span>
+            </a>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+    """
+  end
+
+  def handle_event("default_organization", %{"organization_id" => organization_id}, socket) do
+    organization = Organizations.get_organization!(organization_id)
+    user = socket.assigns.current_user
+
+    case Accounts.update_user(user, %{default_organization_id: organization.id}) do
+      {:ok, _} ->
+        {:noreply,
+         socket
+         |> assign(:current_organization, organization)
+         |> redirect(to: "/")}
+
+      {:error, _} ->
+        {:noreply, socket}
+    end
+  end
+end
diff --git a/lib/atomic_web/router.ex b/lib/atomic_web/router.ex
index 31be90739..9a0985e41 100644
--- a/lib/atomic_web/router.ex
+++ b/lib/atomic_web/router.ex
@@ -33,6 +33,7 @@ defmodule AtomicWeb.Router do
     pipe_through :browser
 
     live_session :general, on_mount: [{AtomicWeb.Hooks, :general_user_state}] do
+      live "/", HomeLive.Index, :index
       live "/organizations", OrganizationLive.Index, :index
       live "/organizations/:organization_id", OrganizationLive.Show, :show
 
@@ -47,7 +48,6 @@ defmodule AtomicWeb.Router do
     pipe_through [:browser, :require_authenticated_user]
 
     live_session :logged_in, on_mount: [{AtomicWeb.Hooks, :authenticated_user_state}] do
-      live "/", HomeLive.Index, :index
       live "/scanner", ScannerLive.Index, :index
       live "/calendar", CalendarLive.Show, :show
 
diff --git a/lib/atomic_web/templates/layout/live.html.heex b/lib/atomic_web/templates/layout/live.html.heex
index 1a17c5701..6197c615a 100644
--- a/lib/atomic_web/templates/layout/live.html.heex
+++ b/lib/atomic_web/templates/layout/live.html.heex
@@ -47,6 +47,9 @@
             </button>
           </div>
           <div
+            @click="open = !open"
+            @keydown.escape.stop="open = false"
+            @keydown.enter.prevent="open = !open"
             x-transition:enter="transition ease-out duration-100"
             x-transition:enter-start="transform opacity-0 scale-95"
             x-transition:enter-end="transform opacity-100 scale-100"
@@ -60,36 +63,7 @@
             aria-labelledby="options-menu-button"
             tabindex="-1"
           >
-            <%= for organization <- Atomic.Accounts.get_user_organizations(@current_user) do %>
-              <%= if organization.id != @current_organization.id do %>
-                <div role="none">
-                  <a class="text-zinc-700 block px-4 py-2 text-sm hover:bg-zinc-200 focus:bg-zinc-300" role="menuitem" tabindex="-1" id="options-menu-item-0">
-                    <span class="flex w-full items-center justify-between">
-                      <span class="flex min-w-0 items-center justify-between space-x-3">
-                        <%= if organization.logo do %>
-                          <img src={Atomic.Uploaders.Logo.url({organization.logo, organization}, :original)} class="w-10 h-10 rounded-lg" />
-                        <% else %>
-                          <span class="inline-flex justify-center items-center mr-1.5 w-10 h-10 bg-zinc-500 rounded-lg">
-                            <span class="text-lg font-medium leading-none text-white">
-                              <%= Atomic.Accounts.extract_initials(organization.name) %>
-                            </span>
-                          </span>
-                        <% end %>
-                        <span class="flex min-w-0 flex-1 flex-col">
-                          <span class="truncate text-md font-medium text-zinc-900"></span>
-                          <span class="truncate text-sm text-zinc-600">
-                            <%= organization.name %>
-                          </span>
-                          <span class="truncate text-xs text-zinc-500">
-                            <%= AtomicWeb.ViewUtils.capitalize_first_letter(Atomic.Organizations.get_role(@current_user.id, organization.id)) %>
-                          </span>
-                        </span>
-                      </span>
-                    </span>
-                  </a>
-                </div>
-              <% end %>
-            <% end %>
+            <.live_component module={AtomicWeb.Components.Organizations} id="organizations" current_organization={@current_organization} current_user={@current_user} />
           </div>
         </div>