From 9a2fcb14a72643d23acb34e750dc3cb07273cd94 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Mon, 18 Mar 2024 11:35:55 +0000
Subject: [PATCH 1/6] feat: improve board page

---
 assets/js/sorting.js                          |  4 +
 .../live/board_live/form_component.ex         | 81 ++++++++++------
 .../live/board_live/form_component.html.heex  | 10 +-
 lib/atomic_web/live/board_live/index.ex       | 21 ++++
 .../live/board_live/index.html.heex           | 97 ++++++++++++++-----
 lib/atomic_web/live/board_live/new.ex         |  6 +-
 lib/atomic_web/live/board_live/new.html.heex  |  4 +-
 7 files changed, 161 insertions(+), 62 deletions(-)

diff --git a/assets/js/sorting.js b/assets/js/sorting.js
index 4cd391e0f..e469bd147 100644
--- a/assets/js/sorting.js
+++ b/assets/js/sorting.js
@@ -2,6 +2,7 @@ import Sortable from "../vendor/sortable.js"
 
 export const InitSorting = {
   mounted() {
+    var placeholder = document.createElement('div');
     new Sortable(this.el, {
       animation: 150,
       ghostClass: "bg-slate-100",
@@ -11,6 +12,9 @@ export const InitSorting = {
         const elements = Array.from(this.el.children)
         const ids = elements.map(elm => elm.id)
         this.pushEvent("update-sorting", {ids: ids})
+      },
+      setData: (dataTransfer, _) => {
+        dataTransfer.setDragImage(placeholder, 0, 0);
       }
     })
   }
diff --git a/lib/atomic_web/live/board_live/form_component.ex b/lib/atomic_web/live/board_live/form_component.ex
index 967aae4ee..8a69fc8d8 100644
--- a/lib/atomic_web/live/board_live/form_component.ex
+++ b/lib/atomic_web/live/board_live/form_component.ex
@@ -1,7 +1,8 @@
 defmodule AtomicWeb.BoardLive.FormComponent do
   use AtomicWeb, :live_component
 
-  alias Atomic.Organizations
+  # alias Atomic.Organizations
+  alias Atomic.Board
 
   @impl true
   def mount(socket) do
@@ -9,55 +10,71 @@ defmodule AtomicWeb.BoardLive.FormComponent do
   end
 
   @impl true
-  def update(%{user_organization: user_organization} = assigns, socket) do
-    changeset = Organizations.change_user_organization(user_organization)
+  def update(%{organization_id: _org} = assigns, socket) do
+    # changeset = Organizations.change_user_organization(user_organization)~
 
     {:ok,
      socket
-     |> assign(assigns)
-     |> assign(:changeset, changeset)}
+     |> assign(assigns)}
   end
 
   @impl true
-  def handle_event("validate", %{"user_organization" => user_organization_params}, socket) do
+  def handle_event("validate", %{"board" => board_params}, socket) do
     changeset =
       socket.assigns.user_organization
-      |> Organizations.change_user_organization(user_organization_params)
+      # |> Organizations.change_user_organization(user_organization_params)
+      |> Board.change_board(board_params)
       |> Map.put(:action, :validate)
 
     {:noreply, assign(socket, :changeset, changeset)}
   end
 
-  def handle_event("save", %{"user_organization" => user_organization_params}, socket) do
-    save_user_organization(socket, socket.assigns.action, user_organization_params)
+  def handle_event("save", board_params, socket) do
+    # save_user_organization(socket, socket.assigns.action, user_organization_params)
+    create_board(socket, board_params)
   end
 
-  defp save_user_organization(socket, :edit, user_organization_params) do
-    case Organizations.update_user_organization(
-           socket.assigns.user_organization,
-           user_organization_params
-         ) do
-      {:ok, _organization} ->
-        {:noreply,
-         socket
-         |> put_flash(:info, "Board updated successfully")
-         |> push_navigate(to: socket.assigns.return_to)}
+  # defp save_user_organization(socket, :edit, user_organization_params) do
+  #   case Organizations.update_user_organization(
+  #          socket.assigns.user_organization,
+  #          user_organization_params
+  #        ) do
+  #     {:ok, _organization} ->
+  #       {:noreply,
+  #        socket
+  #        |> put_flash(:info, "Board updated successfully")
+  #        |> push_navigate(to: socket.assigns.return_to)}
 
-      {:error, %Ecto.Changeset{} = changeset} ->
-        {:noreply, assign(socket, :changeset, changeset)}
-    end
-  end
+  #     {:error, %Ecto.Changeset{} = changeset} ->
+  #       {:noreply, assign(socket, :changeset, changeset)}
+  #   end
+  # end
+
+  # defp save_user_organization(socket, :new, user_organization_params) do
+  #   attrs =
+  #     Map.put(
+  #       user_organization_params,
+  #       "organization_id",
+  #       socket.assigns.organization_id
+  #     )
+
+  #   case Organizations.create_user_organization(attrs) do
+  #     {:ok, _organization} ->
+  #       {:noreply,
+  #        socket
+  #        |> put_flash(:info, "Board created successfully")
+  #        |> push_navigate(to: socket.assigns.return_to)}
+
+  #     {:error, %Ecto.Changeset{} = changeset} ->
+  #       {:noreply, assign(socket, changeset: changeset)}
+  #   end
+  # end
 
-  defp save_user_organization(socket, :new, user_organization_params) do
-    attrs =
-      Map.put(
-        user_organization_params,
-        "organization_id",
-        socket.assigns.user_organization.organization_id
-      )
+  defp create_board(socket, board_params) do
+    board_params = Map.put(board_params, "organization_id", socket.assigns.organization_id)
 
-    case Organizations.create_user_organization(attrs) do
-      {:ok, _organization} ->
+    case Board.create_board(board_params) do
+      {:ok, _board} ->
         {:noreply,
          socket
          |> put_flash(:info, "Board created successfully")
diff --git a/lib/atomic_web/live/board_live/form_component.html.heex b/lib/atomic_web/live/board_live/form_component.html.heex
index 9537729f4..2bcd516d1 100644
--- a/lib/atomic_web/live/board_live/form_component.html.heex
+++ b/lib/atomic_web/live/board_live/form_component.html.heex
@@ -1,11 +1,11 @@
 <div>
   <h2><%= @title %></h2>
 
-  <.form :let={f} for={@changeset} id="board-form" phx-target={@myself} phx-submit="save">
-    <%= label(f, :user_id) %>
-    <%= select(f, :user_id, @users) %>
-    <%= label(f, :title) %>
-    <%= text_input(f, :title) %>
+  <.form :let={f} id="board-form" phx-target={@myself} phx-submit="save">
+    <%!-- <%= label(f, :user_id) %> --%>
+    <%!-- <%= select(f, :user_id, @users) %> --%>
+    <%!-- <%= label(f, :title) %> --%>
+    <%!-- <%= text_input(f, :title) %> --%>
     <%= label(f, :year) %>
     <%= text_input(f, :year, pattern: "\\d{4}/\\d{4}") %>
     <%= submit("Save", phx_disable_with: "Saving...") %>
diff --git a/lib/atomic_web/live/board_live/index.ex b/lib/atomic_web/live/board_live/index.ex
index 3e2a2c6b8..8dccb4c3c 100644
--- a/lib/atomic_web/live/board_live/index.ex
+++ b/lib/atomic_web/live/board_live/index.ex
@@ -2,8 +2,10 @@ defmodule AtomicWeb.BoardLive.Index do
   use AtomicWeb, :live_view
 
   import AtomicWeb.Components.Empty
+  import AtomicWeb.Components.Avatar
   import AtomicWeb.Components.Board
   import AtomicWeb.Components.Button
+  import AtomicWeb.Components.Icon
 
   alias Atomic.Accounts
   alias Atomic.Board
@@ -18,6 +20,7 @@ defmodule AtomicWeb.BoardLive.Index do
   @impl true
   def handle_params(%{"organization_id" => organization_id}, _, socket) do
     current_year = Year.current_year()
+    boards = Board.list_boards_by_organization_id(organization_id)
     board = Board.get_organization_board_by_year(current_year, organization_id)
 
     board_departments =
@@ -38,6 +41,7 @@ defmodule AtomicWeb.BoardLive.Index do
      |> assign(:has_permissions?, has_permissions?(socket, organization_id))
      |> assign(:organization, organization)
      |> assign(:role, role)
+     |> assign(:boards, boards)
      |> assign(:year, current_year)}
   end
 
@@ -77,6 +81,23 @@ defmodule AtomicWeb.BoardLive.Index do
      |> assign(:year, year)}
   end
 
+  @impl true
+  def handle_event("update_year", %{"year" => year}, socket) do
+    board = Board.get_organization_board_by_year(year, socket.assigns.organization.id)
+
+    board_departments =
+      case board do
+        nil -> []
+        _ -> Board.get_board_departments_by_board_id(board.id)
+      end
+
+    {:noreply,
+     socket
+     |> assign(:board_departments, board_departments)
+     |> assign(:empty?, Enum.empty?(board_departments))
+     |> assign(:year, year)}
+  end
+
   @impl true
   def handle_event("update-sorting", %{"ids" => ids}, socket) do
     ids = Enum.filter(ids, fn id -> String.length(id) > 0 end)
diff --git a/lib/atomic_web/live/board_live/index.html.heex b/lib/atomic_web/live/board_live/index.html.heex
index 84226c333..f55414098 100644
--- a/lib/atomic_web/live/board_live/index.html.heex
+++ b/lib/atomic_web/live/board_live/index.html.heex
@@ -1,38 +1,91 @@
-<div class="bg-white py-8">
-  <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">
-        <.icon name={:arrow_small_left} solid 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">
+<.page title="Board">
+  <div class="flex items-center justify-between border-b-2 border-zinc-200">
+    <%!-- <div class="justsiy-center flex min-w-0 flex-row items-center">
+        <.icon name={:arrow_small_left} solid class="mr-2 mb-2 h-8 w-8 cursor-pointer text-zinc-400" phx-click="previous-year" phx-value-organization_id={@organization.id} />
+        <h2 class="mb-2 text-xl font-bold leading-7 text-zinc-900 sm:truncate sm:text-4xl">
           <%= gettext("Board") %> <%= @year %>
         </h2>
-        <.icon name={:arrow_small_right} solid class="cursor-pointer mb-2 ml-2 w-8 h-8 text-zinc-400" phx-click="next-year" phx-value-organization_id={@organization.id} />
+        <.icon name={:arrow_small_right} solid class="mb-2 ml-2 h-8 w-8 cursor-pointer text-zinc-400" phx-click="next-year" phx-value-organization_id={@organization.id} />
+      </div> --%>
+    <%= if not @empty? and @has_permissions? do %>
+      <div class="mb-2 hidden lg:block lg:border-orange-500">
+        <.button navigate={Routes.board_new_path(@socket, :new, @organization)}>
+          + <%= gettext("New Board Member") %>
+        </.button>
       </div>
-      <%= if not @empty? and @has_permissions? do %>
-        <div class="hidden lg:border-orange-500 mb-2 lg:block">
-          <.button navigate={Routes.board_new_path(@socket, :new, @organization)}>
-            + <%= gettext("New Board Member") %>
+    <% end %>
+  </div>
+  <%= if @empty? and @has_permissions? do %>
+    <div class="mt-32">
+      <.empty_state url={Routes.board_new_path(@socket, :new, @organization)} placeholder="board member" />
+    </div>
+  <% else %>
+    <%= if @has_permissions? do %>
+      <div class="max-w-64 container mx-6 mt-8 flex h-10 flex-row justify-between divide-x overflow-hidden rounded-lg border border-zinc-200 lg:mx-8">
+        <form phx-change="update_year" class="w-full">
+          <select class="w-full border-none" name="year">
+            <%= for board <- @boards do %>
+              <option value={board.year} selected={board.year == @year}><%= board.year %></option>
+            <% end %>
+          </select>
+        </form>
+        <span class="flex items-center">
+          <.button navigate={Routes.board_new_path(@socket, :new, @organization)} color={:light} class="border-none">
+            <.icon name={:plus} solid class="h-5 w-5 text-zinc-400" />
           </.button>
+        </span>
+      </div>
+      <div class="border-zinc-30 container mx-6 mt-4 w-auto divide-y rounded-lg overflow-hidden border lg:mx-8">
+        <div class="flex flex-row bg-zinc-50 p-3">
+          <span><%= length(@board_departments) %> departments in your organization</span>
         </div>
-      <% end %>
-    </div>
-    <%= if @empty? and @has_permissions? do %>
-      <div class="mt-32">
-        <.empty_state url={Routes.board_new_path(@socket, :new, @organization)} placeholder="board member" />
+        <ul id="sortable-list" phx-hook="InitSorting" class="flex max-w-7xl flex-col divide-y">
+          <%= for board_department <- @board_departments do %>
+            <li id={"board-department-#{board_department.id}"} class="flex max-w-full flex-row gap-x-5 p-2 text-center lg:mx-0 lg:max-w-none">
+              <div class="flex w-full justify-between">
+                <div class="flex flex-row items-center space-x-4">
+                  <%= if @role in [:owner, :admin] do %>
+                    <span class="handle cursor-row-resize">
+                      <.icon name={:bars_3} solid class="h-5 w-5 text-zinc-400" />
+                    </span>
+                  <% end %>
+                  <h1 class="w-fit text-lg tracking-tight text-zinc-900 sm:text-md"><%= board_department.name %></h1>
+                </div>
+                <div class="relative">
+                  <div class="container justify-center">
+                    <div class="flex flex-wrap justify-items-end">
+                      <%= for user_organization <- Board.get_board_department_users(board_department.id, preloads: [:user]) do %>
+                        <.avatar class="mx-auto" color={:light_gray} name={user_organization.user.name} size={:xs} src={Uploaders.ProfilePicture.url({user_organization.user.profile_picture, user_organization.user}, :original)} />
+                      <% end %>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <span class="text-nowrap">
+                <%= length(Board.get_board_department_users(board_department.id, preloads: [:user])) %> members
+              </span>
+              <.button navigate={Routes.board_new_path(@socket, :new, @organization)} color={:light}>
+                <span class="h-4 w-4 select-none">
+                  <.icon name={:pencil} />
+                </span>
+              </.button>
+            </li>
+          <% end %>
+        </ul>
       </div>
     <% else %>
       <%= for board_department <- @board_departments do %>
-        <li id={"board-department-#{board_department.id}"} class="mt-5 max-w-full gap-x-8 text-center lg:mx-0 lg:max-w-none" draggable="true">
+        <li id={"board-department-#{board_department.id}"} class="mt-5 max-w-full gap-x-8 text-center lg:mx-0 lg:max-w-none">
           <div class="flex flex-row items-center space-x-8">
             <%= if @role in [:owner, :admin] do %>
               <span class="handle cursor-row-resize">
-                <.icon name={:bars_3} solid class="w-5 h-5 text-zinc-400" />
+                <.icon name={:bars_3} solid class="h-5 w-5 text-zinc-400" />
               </span>
             <% end %>
             <h1 class="w-fit text-xl font-bold tracking-tight text-zinc-900 sm:text-xl"><%= board_department.name %></h1>
           </div>
-          <div class="relative mb-10 lg:gap-x-24 ">
-            <div class="justify-center container mx-auto pt-5">
+          <div class="relative mb-10 lg:gap-x-24">
+            <div class="container mx-auto justify-center pt-5">
               <div class="flex flex-wrap justify-center">
                 <%= for user_organization <- Board.get_board_department_users(board_department.id, preloads: [:user]) do %>
                   <.member_bubble user_organization={user_organization} />
@@ -43,5 +96,5 @@
         </li>
       <% end %>
     <% end %>
-  </ul>
-</div>
+  <% end %>
+</.page>
diff --git a/lib/atomic_web/live/board_live/new.ex b/lib/atomic_web/live/board_live/new.ex
index bda0bf760..43664b4ba 100644
--- a/lib/atomic_web/live/board_live/new.ex
+++ b/lib/atomic_web/live/board_live/new.ex
@@ -11,12 +11,14 @@ defmodule AtomicWeb.BoardLive.New do
   end
 
   @impl true
-  def handle_params(%{"organization_id" => _organization_id}, _, socket) do
+  def handle_params(%{"organization_id" => organization_id}, _, socket) do
     {:noreply,
      socket
      |> assign(:current_page, :board)
      |> assign(:page_title, gettext("New Board"))
      |> assign(:user_organization, %UserOrganization{})
-     |> assign(:users, Enum.map(Accounts.list_users(), fn u -> [key: u.email, value: u.id] end))}
+     |> assign(:organization_id, organization_id)}
+
+    #  |> assign(:users, Enum.map(Accounts.list_users(), fn u -> [key: u.email, value: u.id] end))}
   end
 end
diff --git a/lib/atomic_web/live/board_live/new.html.heex b/lib/atomic_web/live/board_live/new.html.heex
index 36b75b43c..98b7eb334 100644
--- a/lib/atomic_web/live/board_live/new.html.heex
+++ b/lib/atomic_web/live/board_live/new.html.heex
@@ -1 +1,3 @@
-<.live_component module={AtomicWeb.BoardLive.FormComponent} organization_id={@current_organization.id} users={@users} id={:new} title={@page_title} action={@live_action} user_organization={@user_organization} return_to={Routes.board_index_path(@socket, :index, @current_organization.id)} />
+<.page title={@page_title}>
+  <.live_component module={AtomicWeb.BoardLive.FormComponent} organization_id={@organization_id} id={:new} title={@page_title} action={@live_action} return_to={Routes.board_index_path(@socket, :index, @current_organization.id)} />
+</.page>

From 1e8da833d2f68697f08fca0094de291232eccc22 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Fri, 22 Mar 2024 14:10:45 +0000
Subject: [PATCH 2/6] feat: action confirm modal

---
 lib/atomic_web/components/modal.ex            |   4 +-
 .../live/board_live/form_component.ex         | 264 +++++++++++++++---
 .../live/board_live/form_component.html.heex  |  13 -
 lib/atomic_web/live/board_live/index.ex       |  40 ++-
 .../live/board_live/index.html.heex           | 122 ++++----
 lib/atomic_web/router.ex                      |   9 +-
 6 files changed, 325 insertions(+), 127 deletions(-)
 delete mode 100644 lib/atomic_web/live/board_live/form_component.html.heex

diff --git a/lib/atomic_web/components/modal.ex b/lib/atomic_web/components/modal.ex
index 1ccc2d21e..1d0dcdc6f 100644
--- a/lib/atomic_web/components/modal.ex
+++ b/lib/atomic_web/components/modal.ex
@@ -36,7 +36,7 @@ defmodule AtomicWeb.Components.Modal do
     ~H"""
     <div id={@id} phx-mounted={@show && show_modal(@id)} phx-remove={hide_modal(@id)} phx-cancel={JS.exec(@on_cancel, "phx-remove")} class="relative z-50 hidden" data-modal>
       <div id={"#{@id}-bg"} class="bg-zinc-50/90 fixed inset-0 transition-opacity" aria-hidden="true" />
-      <div class="fixed inset-0 overflow-y-auto" aria-labelledby={"#{@id}-title"} aria-describedby={"#{@id}-description"} role="dialog" aria-modal="true" tabindex="0">
+      <div class="fixed inset-0 overflow-hidden" aria-labelledby={"#{@id}-title"} aria-describedby={"#{@id}-description"} role="dialog" aria-modal="true" tabindex="0">
         <div class="flex min-h-full items-center justify-center">
           <div class="w-full max-w-3xl p-4 sm:p-6 lg:py-8">
             <.focus_wrap id={"#{@id}-container"} phx-click-away={JS.exec("phx-cancel", to: "##{@id}")} class="shadow-zinc-700/10 ring-zinc-700/10 relative hidden rounded-2xl bg-white p-14 shadow-lg ring-1 transition">
@@ -65,7 +65,6 @@ defmodule AtomicWeb.Components.Modal do
     )
     |> show("##{id}-container")
     |> JS.add_class("overflow-hidden", to: "body")
-    |> JS.focus_first(to: "##{id}-content")
   end
 
   def hide_modal(js \\ %JS{}, id) do
@@ -77,6 +76,5 @@ defmodule AtomicWeb.Components.Modal do
     |> hide("##{id}-container")
     |> JS.hide(to: "##{id}", transition: {"block", "block", "hidden"})
     |> JS.remove_class("overflow-hidden", to: "body")
-    |> JS.pop_focus()
   end
 end
diff --git a/lib/atomic_web/live/board_live/form_component.ex b/lib/atomic_web/live/board_live/form_component.ex
index 8a69fc8d8..e1583aa76 100644
--- a/lib/atomic_web/live/board_live/form_component.ex
+++ b/lib/atomic_web/live/board_live/form_component.ex
@@ -1,21 +1,68 @@
 defmodule AtomicWeb.BoardLive.FormComponent do
   use AtomicWeb, :live_component
 
-  # alias Atomic.Organizations
+  import AtomicWeb.Components.Dropdown
+
   alias Atomic.Board
+  alias Atomic.Accounts
+  alias AtomicWeb.Components.MultiSelect
+  alias Phoenix.LiveView.JS
 
   @impl true
   def mount(socket) do
     {:ok, socket}
   end
 
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div>
+      <%= forms(assigns) %>
+      <!-- Action Confirm Modal -->
+      <.modal :if={@action_modal} id="action-confirm-modal" show on_cancel={JS.push("clear-action", target: @myself)}>
+        <div class="flex flex-col">
+          <h1 class="flex-1 select-none truncate text-lg font-semibold text-gray-900">
+            <%= display_action_goal_confirm_title(@action_modal) %>
+          </h1>
+          <p class="mt-4">
+            <%= display_action_goal_confirm_description(@action_modal, @board) %>
+          </p>
+          <div class="mt-8 flex flex-row">
+            <.button phx-click="clear-action" class="mr-2" phx-target={@myself} size={:lg} icon={:x_circle} color={:white} full_width>Cancel</.button>
+            <.button
+              phx-click="confirm"
+              class="ml-2"
+              phx-target={@myself}
+              size={:lg}
+              icon={:check_circle}
+              color={
+                if @action_modal in [:delete_collaborator, :deny_request] do
+                  :danger
+                else
+                  :success
+                end
+              }
+              full_width
+            >
+              Confirm
+            </.button>
+          </div>
+        </div>
+      </.modal>
+    </div>
+    """
+  end
+
   @impl true
   def update(%{organization_id: _org} = assigns, socket) do
     # changeset = Organizations.change_user_organization(user_organization)~
+    users = Enum.map(Accounts.list_users(), fn u -> [key: u.email, value: u.id] end)
 
     {:ok,
      socket
-     |> assign(assigns)}
+     |> assign(assigns)
+     |> assign(:action_modal, nil)
+     |> assign(users: users)}
   end
 
   @impl true
@@ -29,48 +76,46 @@ defmodule AtomicWeb.BoardLive.FormComponent do
     {:noreply, assign(socket, :changeset, changeset)}
   end
 
+  @impl true
+  def handle_event("clear-action", _, socket) do
+    {:noreply,
+     socket
+     |> assign(:action_modal, nil)}
+  end
+
+  @impl true
   def handle_event("save", board_params, socket) do
     # save_user_organization(socket, socket.assigns.action, user_organization_params)
-    create_board(socket, board_params)
-  end
-
-  # defp save_user_organization(socket, :edit, user_organization_params) do
-  #   case Organizations.update_user_organization(
-  #          socket.assigns.user_organization,
-  #          user_organization_params
-  #        ) do
-  #     {:ok, _organization} ->
-  #       {:noreply,
-  #        socket
-  #        |> put_flash(:info, "Board updated successfully")
-  #        |> push_navigate(to: socket.assigns.return_to)}
-
-  #     {:error, %Ecto.Changeset{} = changeset} ->
-  #       {:noreply, assign(socket, :changeset, changeset)}
-  #   end
-  # end
-
-  # defp save_user_organization(socket, :new, user_organization_params) do
-  #   attrs =
-  #     Map.put(
-  #       user_organization_params,
-  #       "organization_id",
-  #       socket.assigns.organization_id
-  #     )
-
-  #   case Organizations.create_user_organization(attrs) do
-  #     {:ok, _organization} ->
-  #       {:noreply,
-  #        socket
-  #        |> put_flash(:info, "Board created successfully")
-  #        |> push_navigate(to: socket.assigns.return_to)}
-
-  #     {:error, %Ecto.Changeset{} = changeset} ->
-  #       {:noreply, assign(socket, changeset: changeset)}
-  #   end
-  # end
-
-  defp create_board(socket, board_params) do
+    if socket.assigns.action == :new_board do
+      save_board(socket, :new, board_params)
+    else
+      save_board(socket, :edit, board_params)
+    end
+  end
+
+  @impl true
+  def handle_event("delete", _, socket) do
+    {:noreply,
+     socket
+     |> assign(:action_modal, :delete_board)}
+  end
+
+  @impl true
+  def handle_event("confirm", _, socket) do
+    case socket.assigns.action_modal do
+      # :confirm_request -> accept_collaborator_request(socket)
+      # :deny_request -> deny_collaborator_request(socket)
+      :delete_board -> save_board(socket, :delete, socket.assigns.board)
+    end
+  end
+
+  @impl true
+  def delete_board(board_params, socket) do
+    # save_user_organization(socket, socket.assigns.action, user_organization_params)
+    save_board(socket, :delete, board_params)
+  end
+
+  defp save_board(socket, :new, board_params) do
     board_params = Map.put(board_params, "organization_id", socket.assigns.organization_id)
 
     case Board.create_board(board_params) do
@@ -84,4 +129,139 @@ defmodule AtomicWeb.BoardLive.FormComponent do
         {:noreply, assign(socket, changeset: changeset)}
     end
   end
+
+  defp save_board(socket, :edit, board_params) do
+    board_params = Map.put(board_params, "organization_id", socket.assigns.organization_id)
+    board = Board.get_board!(socket.assigns.board.id)
+
+    case Board.update_board(board, board_params) do
+      {:ok, _board} ->
+        {:noreply,
+         socket
+         |> put_flash(:info, "Board created successfully")
+         |> push_navigate(to: socket.assigns.return_to)}
+
+      {:error, %Ecto.Changeset{} = changeset} ->
+        {:noreply, assign(socket, changeset: changeset)}
+    end
+  end
+
+  defp save_board(socket, :delete, board_params) do
+    board_params = Map.put(board_params, "organization_id", socket.assigns.organization_id)
+    board = Board.get_board!(socket.assigns.board.id)
+
+    case Board.delete_board(board) do
+      {:ok, _board} ->
+        {:noreply,
+         socket
+         |> put_flash(:error, "Board deleted successfully")
+         |> push_navigate(to: socket.assigns.return_to)}
+
+      {:error, %Ecto.Changeset{} = changeset} ->
+        {:noreply, assign(socket, changeset: changeset)}
+    end
+  end
+
+  defp forms(%{action: action} = assigns) when action in [:new_board, :edit_board] do
+    ~H"""
+    <h1 class="flex-1 select-none truncate text-lg font-semibold text-gray-900"><%= @title %></h1>
+
+    <.form :let={f} id="board-form" phx-target={@myself} phx-submit="save">
+      <%!-- <%= label(f, :user_id) %> --%>
+      <%!-- <%= select(f, :user_id, @users) %> --%>
+      <%!-- <%= label(f, :title) %> --%>
+      <%!-- <%= text_input(f, :title) %> --%>
+      <div class="flex flex-col gap-y-1">
+        <div>
+          <%= label(f, :name, class: "text-sm font-semibold") %>
+          <p class="text-xs text-gray-500">The name of the board</p>
+        </div>
+        <%= text_input(f, :year, class: "rounded-lg border-zinc-200 focus:ring-primary-500 focus:border-primary-500") %>
+        <%= error_tag(f, :year) %>
+      </div>
+
+      <div class="mt-4 flex w-full justify-end space-x-4">
+        <%= if @action in [:edit_board, :edit_department] do %>
+          <.button size={:md} color={:danger} icon={:trash} phx-click="delete" phx-target={@myself}>Delete board</.button>
+        <% end %>
+        <.button size={:md} color={:white} icon={:check}>Save Changes</.button>
+      </div>
+    </.form>
+    """
+  end
+
+  defp forms(%{action: action} = assigns) when action in [:new_department, :edit_department] do
+    ~H"""
+    <h1 class="flex-1 select-none truncate text-lg font-semibold text-gray-900">
+      <%= if action == :new_department do %>
+        New Department
+      <% else %>
+        Edit Department
+      <% end %>
+    </h1>
+
+    <.form :let={f} id="board-form" phx-target={@myself} phx-submit="save">
+      <%!-- <%= label(f, :user_id) %> --%>
+      <%!-- <%= select(f, :user_id, @users) %> --%>
+      <%!-- <%= label(f, :title) %> --%>
+      <%!-- <%= text_input(f, :title) %> --%>
+      <div class="flex flex-col gap-y-1">
+        <div>
+          <%= label(f, :name, class: "text-sm font-semibold") %>
+          <p class="text-xs text-gray-500">The name of the department</p>
+        </div>
+        <%= text_input(f, :year, class: "rounded-lg border-zinc-200 focus:ring-primary-500 focus:border-primary-500") %>
+        <%= error_tag(f, :year) %>
+      </div>
+
+      <div class="flex flex-col gap-y-1">
+        <div>
+          <%= label(f, :users, class: "text-sm font-semibold") %>
+          <p class="text-xs text-gray-500">The name of the department</p>
+        </div>
+        <%= select(f, :user_id, @users, class: "rounded-lg border-zinc-200 focus:ring-primary-500 focus:border-primary-500") %>
+        <%!-- <.live_component module={MultiSelect} id="users" items={@users} selected_items={[]} target={@myself} /> --%>
+        <%= error_tag(f, :users) %>
+      </div>
+
+      <div class="mt-4 flex w-full justify-end space-x-4">
+        <%= if @action in [:edit_board, :edit_department] do %>
+          <.button size={:md} color={:danger} icon={:trash} phx-click="delete" phx-target={@myself}>Delete department</.button>
+        <% end %>
+        <.button size={:md} color={:white} icon={:check}>Save Changes</.button>
+      </div>
+    </.form>
+    """
+  end
+
+  defp display_action_goal_confirm_title(action) do
+    case action do
+      :confirm_request ->
+        gettext("Are you sure you want to accept this request?")
+
+      :deny_request ->
+        gettext("Are you sure you want to deny this request?")
+
+      :delete_board ->
+        gettext("Are you sure you want to remove this person from the department?")
+    end
+  end
+
+  defp display_action_goal_confirm_description(action, board) do
+    IO.inspect(board)
+
+    case action do
+      :confirm_request ->
+        gettext("If you change your mind you can always remove this person later.")
+
+      :deny_request ->
+        gettext("If you deny this request, this person will not get access to the department.")
+
+      :delete_board ->
+        gettext(
+          "If you remove this person, they will no longer have access to %{department_name}.",
+          department_name: board.year
+        )
+    end
+  end
 end
diff --git a/lib/atomic_web/live/board_live/form_component.html.heex b/lib/atomic_web/live/board_live/form_component.html.heex
deleted file mode 100644
index 2bcd516d1..000000000
--- a/lib/atomic_web/live/board_live/form_component.html.heex
+++ /dev/null
@@ -1,13 +0,0 @@
-<div>
-  <h2><%= @title %></h2>
-
-  <.form :let={f} id="board-form" phx-target={@myself} phx-submit="save">
-    <%!-- <%= label(f, :user_id) %> --%>
-    <%!-- <%= select(f, :user_id, @users) %> --%>
-    <%!-- <%= label(f, :title) %> --%>
-    <%!-- <%= text_input(f, :title) %> --%>
-    <%= label(f, :year) %>
-    <%= text_input(f, :year, pattern: "\\d{4}/\\d{4}") %>
-    <%= submit("Save", phx_disable_with: "Saving...") %>
-  </.form>
-</div>
diff --git a/lib/atomic_web/live/board_live/index.ex b/lib/atomic_web/live/board_live/index.ex
index 8dccb4c3c..7107f8341 100644
--- a/lib/atomic_web/live/board_live/index.ex
+++ b/lib/atomic_web/live/board_live/index.ex
@@ -6,11 +6,13 @@ defmodule AtomicWeb.BoardLive.Index do
   import AtomicWeb.Components.Board
   import AtomicWeb.Components.Button
   import AtomicWeb.Components.Icon
+  import AtomicWeb.Components.Modal
 
   alias Atomic.Accounts
   alias Atomic.Board
   alias Atomic.Ecto.Year
   alias Atomic.Organizations
+  alias Phoenix.LiveView.JS
 
   @impl true
   def mount(_params, _session, socket) do
@@ -18,10 +20,16 @@ defmodule AtomicWeb.BoardLive.Index do
   end
 
   @impl true
-  def handle_params(%{"organization_id" => organization_id}, _, socket) do
+  def handle_params(%{"organization_id" => organization_id} = params, _, socket) do
+    board_id = Map.get(params, "id")
     current_year = Year.current_year()
     boards = Board.list_boards_by_organization_id(organization_id)
-    board = Board.get_organization_board_by_year(current_year, organization_id)
+
+    board =
+      case board_id do
+        nil -> Board.get_organization_board_by_year(current_year, organization_id)
+        _ -> Board.get_board!(board_id)
+      end
 
     board_departments =
       case board do
@@ -42,6 +50,8 @@ defmodule AtomicWeb.BoardLive.Index do
      |> assign(:organization, organization)
      |> assign(:role, role)
      |> assign(:boards, boards)
+     |> assign(:board, board)
+     |> assign(:params, params)
      |> assign(:year, current_year)}
   end
 
@@ -82,8 +92,8 @@ defmodule AtomicWeb.BoardLive.Index do
   end
 
   @impl true
-  def handle_event("update_year", %{"year" => year}, socket) do
-    board = Board.get_organization_board_by_year(year, socket.assigns.organization.id)
+  def handle_event("update-selected-board", %{"id" => id}, socket) do
+    board = Board.get_board!(id)
 
     board_departments =
       case board do
@@ -95,7 +105,9 @@ defmodule AtomicWeb.BoardLive.Index do
      socket
      |> assign(:board_departments, board_departments)
      |> assign(:empty?, Enum.empty?(board_departments))
-     |> assign(:year, year)}
+     |> push_patch(
+       to: Routes.board_index_path(socket, :show, socket.assigns.organization.id, id)
+     )}
   end
 
   @impl true
@@ -113,6 +125,24 @@ defmodule AtomicWeb.BoardLive.Index do
     {:noreply, socket}
   end
 
+  @impl true
+  def handle_info({:change_collaborator, %{status: status, message: message}}, socket) do
+    {:noreply,
+     socket
+     |> put_flash(status, message)
+     |> assign(:live_action, :show)
+     |> push_patch(
+       to:
+         Routes.department_show_path(
+           socket,
+           :show,
+           socket.assigns.organization,
+           socket.assigns.department,
+           Map.delete(socket.assigns.params, "collaborator_id")
+         )
+     )}
+  end
+
   defp has_permissions?(socket, organization_id) do
     Accounts.has_master_permissions?(socket.assigns.current_user.id) ||
       Accounts.has_permissions_inside_organization?(
diff --git a/lib/atomic_web/live/board_live/index.html.heex b/lib/atomic_web/live/board_live/index.html.heex
index f55414098..2cef6cdcf 100644
--- a/lib/atomic_web/live/board_live/index.html.heex
+++ b/lib/atomic_web/live/board_live/index.html.heex
@@ -1,43 +1,33 @@
 <.page title="Board">
-  <div class="flex items-center justify-between border-b-2 border-zinc-200">
-    <%!-- <div class="justsiy-center flex min-w-0 flex-row items-center">
-        <.icon name={:arrow_small_left} solid class="mr-2 mb-2 h-8 w-8 cursor-pointer text-zinc-400" phx-click="previous-year" phx-value-organization_id={@organization.id} />
-        <h2 class="mb-2 text-xl font-bold leading-7 text-zinc-900 sm:truncate sm:text-4xl">
-          <%= gettext("Board") %> <%= @year %>
-        </h2>
-        <.icon name={:arrow_small_right} solid class="mb-2 ml-2 h-8 w-8 cursor-pointer text-zinc-400" phx-click="next-year" phx-value-organization_id={@organization.id} />
-      </div> --%>
-    <%= if not @empty? and @has_permissions? do %>
-      <div class="mb-2 hidden lg:block lg:border-orange-500">
-        <.button navigate={Routes.board_new_path(@socket, :new, @organization)}>
-          + <%= gettext("New Board Member") %>
-        </.button>
-      </div>
+  <:actions>
+    <%= if @has_permissions? do %>
+      <.button icon={:plus} icon_class="stroke-2" patch={Routes.board_index_path(@socket, :new_board, @organization)}>
+        <%= gettext("New") %>
+      </.button>
     <% end %>
-  </div>
-  <%= if @empty? and @has_permissions? do %>
-    <div class="mt-32">
-      <.empty_state url={Routes.board_new_path(@socket, :new, @organization)} placeholder="board member" />
+  </:actions>
+  <%= if @has_permissions? do %>
+    <div class="max-w-64 container mx-6 mt-8 flex h-10 flex-row justify-between divide-x overflow-hidden rounded-lg border border-zinc-200 lg:mx-8">
+      <form phx-change="update-selected-board" class="w-full">
+        <select class="w-full border-none" name="id">
+          <%= for board <- @boards do %>
+            <option value={board.id} selected={board.id == @board.id}><%= board.year %></option>
+          <% end %>
+        </select>
+      </form>
+      <span class="flex items-center">
+        <.button patch={Routes.board_index_path(@socket, :edit_board, @organization, @board.id)} color={:light} class="border-none">
+          <.icon name={:pencil} solid class="h-5 w-5 text-zinc-400" />
+        </.button>
+      </span>
     </div>
-  <% else %>
-    <%= if @has_permissions? do %>
-      <div class="max-w-64 container mx-6 mt-8 flex h-10 flex-row justify-between divide-x overflow-hidden rounded-lg border border-zinc-200 lg:mx-8">
-        <form phx-change="update_year" class="w-full">
-          <select class="w-full border-none" name="year">
-            <%= for board <- @boards do %>
-              <option value={board.year} selected={board.year == @year}><%= board.year %></option>
-            <% end %>
-          </select>
-        </form>
-        <span class="flex items-center">
-          <.button navigate={Routes.board_new_path(@socket, :new, @organization)} color={:light} class="border-none">
-            <.icon name={:plus} solid class="h-5 w-5 text-zinc-400" />
-          </.button>
-        </span>
-      </div>
-      <div class="border-zinc-30 container mx-6 mt-4 w-auto divide-y rounded-lg overflow-hidden border lg:mx-8">
-        <div class="flex flex-row bg-zinc-50 p-3">
+    <%= if not @empty? do %>
+      <div class="border-zinc-30 container mx-6 mt-4 w-auto divide-y overflow-hidden rounded-lg border lg:mx-8">
+        <div class="flex flex-row justify-between items-center bg-zinc-50 p-2">
           <span><%= length(@board_departments) %> departments in your organization</span>
+          <.button patch={Routes.board_index_path(@socket, :new_department, @organization, @board.id)} color={:light} variant={:outline}>
+            <.icon name={:plus} solid class="h-4 w-4 text-zinc-400" />
+          </.button>
         </div>
         <ul id="sortable-list" phx-hook="InitSorting" class="flex max-w-7xl flex-col divide-y">
           <%= for board_department <- @board_departments do %>
@@ -49,22 +39,25 @@
                       <.icon name={:bars_3} solid class="h-5 w-5 text-zinc-400" />
                     </span>
                   <% end %>
-                  <h1 class="w-fit text-lg tracking-tight text-zinc-900 sm:text-md"><%= board_department.name %></h1>
+                  <h1 class="w-fit text-left text-lg tracking-tight text-zinc-900 sm:text-md"><%= board_department.name %></h1>
                 </div>
-                <div class="relative">
+                <div class="relative hidden md:block">
                   <div class="container justify-center">
                     <div class="flex flex-wrap justify-items-end">
-                      <%= for user_organization <- Board.get_board_department_users(board_department.id, preloads: [:user]) do %>
-                        <.avatar class="mx-auto" color={:light_gray} name={user_organization.user.name} size={:xs} src={Uploaders.ProfilePicture.url({user_organization.user.profile_picture, user_organization.user}, :original)} />
+                      <%= for user_organization <- Board.get_board_department_users(board_department.id, preloads: [:user]) |> Enum.take(4) do %>
+                        <.avatar class="mx-auto ring-1 ring-white" color={:light_gray} name={user_organization.user.name} size={:xs} src={Uploaders.ProfilePicture.url({user_organization.user.profile_picture, user_organization.user}, :original)} />
+                      <% end %>
+                      <%= if length(Board.get_board_department_users(board_department.id, preloads: [:user])) > 4 do %>
+                        <.avatar name={"+#{length(Board.get_board_department_users(board_department.id, preloads: [:user])) - 4}"} size={:xs} auto_generate_initials={false} color={:light_gray} class="ring-1 ring-white" />
                       <% end %>
                     </div>
                   </div>
                 </div>
               </div>
-              <span class="text-nowrap">
+              <span class="whitespace-nowrap">
                 <%= length(Board.get_board_department_users(board_department.id, preloads: [:user])) %> members
               </span>
-              <.button navigate={Routes.board_new_path(@socket, :new, @organization)} color={:light}>
+              <.button patch={Routes.board_index_path(@socket, :edit_department, @organization, @board.id, board_department, @params)} color={:light} class="max-h-8">
                 <span class="h-4 w-4 select-none">
                   <.icon name={:pencil} />
                 </span>
@@ -74,27 +67,34 @@
         </ul>
       </div>
     <% else %>
-      <%= for board_department <- @board_departments do %>
-        <li id={"board-department-#{board_department.id}"} class="mt-5 max-w-full gap-x-8 text-center lg:mx-0 lg:max-w-none">
-          <div class="flex flex-row items-center space-x-8">
-            <%= if @role in [:owner, :admin] do %>
-              <span class="handle cursor-row-resize">
-                <.icon name={:bars_3} solid class="h-5 w-5 text-zinc-400" />
-              </span>
-            <% end %>
-            <h1 class="w-fit text-xl font-bold tracking-tight text-zinc-900 sm:text-xl"><%= board_department.name %></h1>
-          </div>
-          <div class="relative mb-10 lg:gap-x-24">
-            <div class="container mx-auto justify-center pt-5">
-              <div class="flex flex-wrap justify-center">
-                <%= for user_organization <- Board.get_board_department_users(board_department.id, preloads: [:user]) do %>
-                  <.member_bubble user_organization={user_organization} />
-                <% end %>
-              </div>
+      <div cass="flex flex-col justify-items-center items-center">
+        <.empty_state url={Routes.board_index_path(@socket, :new_department, @organization, @board)} placeholder="board member" />
+      </div>
+    <% end %>
+  <% else %>
+    <%= for board_department <- @board_departments do %>
+      <li id={"board-department-#{board_department.id}"} class="mt-5 max-w-full gap-x-8 text-center lg:mx-0 lg:max-w-none">
+        <div class="flex flex-row items-center space-x-8">
+          <%= if @role in [:owner, :admin] do %>
+            <span class="handle cursor-row-resize">
+              <.icon name={:bars_3} solid class="h-5 w-5 text-zinc-400" />
+            </span>
+          <% end %>
+          <h1 class="w-fit text-xl font-bold tracking-tight text-zinc-900 sm:text-xl"><%= board_department.name %></h1>
+        </div>
+        <div class="relative mb-10 lg:gap-x-24">
+          <div class="container mx-auto justify-center pt-5">
+            <div class="flex flex-wrap justify-center">
+              <%= for user_organization <- Board.get_board_department_users(board_department.id, preloads: [:user]) do %>
+                <.member_bubble user_organization={user_organization} />
+              <% end %>
             </div>
           </div>
-        </li>
-      <% end %>
+        </div>
+      </li>
     <% end %>
   <% end %>
 </.page>
+<.modal :if={@live_action in [:new_board, :edit_board, :new_department, :edit_department]} id="board-modal" show on_cancel={JS.patch(Routes.board_index_path(@socket, :show, @organization, @board))}>
+  <.live_component module={AtomicWeb.BoardLive.FormComponent} organization_id={@organization.id} board={@board} id="board-forms" action={@live_action} title={@page_title} return_to={Routes.board_index_path(@socket, :show, @current_organization, @board)} />
+</.modal>
diff --git a/lib/atomic_web/router.ex b/lib/atomic_web/router.ex
index c8fb62c28..43b099f14 100644
--- a/lib/atomic_web/router.ex
+++ b/lib/atomic_web/router.ex
@@ -110,8 +110,11 @@ defmodule AtomicWeb.Router do
 
         scope "/board" do
           pipe_through :confirm_board_association
-          live "/new", BoardLive.New, :new
-          live "/:id/edit", BoardLive.Edit, :edit
+          # live "/new", BoardLive.New, :new
+          live "/new", BoardLive.Index, :new_board
+          live "/:id/edit", BoardLive.Index, :edit_board
+          live "/:id/department/new", BoardLive.Index, :new_department
+          live "/:id/department/:department_id/edit", BoardLive.Index, :edit_department
         end
 
         scope "/memberships" do
@@ -168,7 +171,7 @@ defmodule AtomicWeb.Router do
         scope "/board" do
           pipe_through :confirm_board_association
           live "/", BoardLive.Index, :index
-          live "/:id", BoardLive.Show, :show
+          live "/:id", BoardLive.Index, :show
         end
 
         scope "/partners" do

From 417b76aecb233f6721e1dcc7bef0fb7fd6dc4d3f Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Sun, 24 Mar 2024 23:43:10 +0000
Subject: [PATCH 3/6] feat: user selection dropdown

---
 lib/atomic_web/components/button.ex           |  4 +-
 lib/atomic_web/components/modal.ex            |  2 +
 .../live/board_live/form_component.ex         | 83 ++++++++++++++-----
 lib/atomic_web/live/board_live/index.ex       |  4 +-
 4 files changed, 65 insertions(+), 28 deletions(-)

diff --git a/lib/atomic_web/components/button.ex b/lib/atomic_web/components/button.ex
index f6b909cbe..1758be63a 100644
--- a/lib/atomic_web/components/button.ex
+++ b/lib/atomic_web/components/button.ex
@@ -125,13 +125,13 @@ defmodule AtomicWeb.Components.Button do
 
   defp icon_content(assigns) do
     ~H"""
-    <.icon name={@icon} class={"#{generate_icon_classes(assigns)}"} solid={@icon_variant == :solid} mini={@icon_variant == :mini} />
+    <.icon name={@icon} class={generate_icon_classes(assigns)} solid={@icon_variant == :solid} mini={@icon_variant == :mini} />
     """
   end
 
   defp spinner_content(assigns) do
     ~H"""
-    <.spinner size_class={"#{generate_icon_classes(assigns)}"} size={@size} />
+    <.spinner size_class={generate_icon_classes(assigns)} size={@size} />
     """
   end
 
diff --git a/lib/atomic_web/components/modal.ex b/lib/atomic_web/components/modal.ex
index 1d0dcdc6f..74fc95cf8 100644
--- a/lib/atomic_web/components/modal.ex
+++ b/lib/atomic_web/components/modal.ex
@@ -65,6 +65,7 @@ defmodule AtomicWeb.Components.Modal do
     )
     |> show("##{id}-container")
     |> JS.add_class("overflow-hidden", to: "body")
+    |> JS.focus_first(to: "##{id}-container")
   end
 
   def hide_modal(js \\ %JS{}, id) do
@@ -76,5 +77,6 @@ defmodule AtomicWeb.Components.Modal do
     |> hide("##{id}-container")
     |> JS.hide(to: "##{id}", transition: {"block", "block", "hidden"})
     |> JS.remove_class("overflow-hidden", to: "body")
+    |> JS.pop_focus()
   end
 end
diff --git a/lib/atomic_web/live/board_live/form_component.ex b/lib/atomic_web/live/board_live/form_component.ex
index e1583aa76..69e0ab6bc 100644
--- a/lib/atomic_web/live/board_live/form_component.ex
+++ b/lib/atomic_web/live/board_live/form_component.ex
@@ -1,11 +1,8 @@
 defmodule AtomicWeb.BoardLive.FormComponent do
   use AtomicWeb, :live_component
 
-  import AtomicWeb.Components.Dropdown
-
-  alias Atomic.Board
   alias Atomic.Accounts
-  alias AtomicWeb.Components.MultiSelect
+  alias Atomic.Board
   alias Phoenix.LiveView.JS
 
   @impl true
@@ -36,7 +33,7 @@ defmodule AtomicWeb.BoardLive.FormComponent do
               size={:lg}
               icon={:check_circle}
               color={
-                if @action_modal in [:delete_collaborator, :deny_request] do
+                if @action_modal in [:delete_board, :delete_department] do
                   :danger
                 else
                   :success
@@ -55,8 +52,11 @@ defmodule AtomicWeb.BoardLive.FormComponent do
 
   @impl true
   def update(%{organization_id: _org} = assigns, socket) do
-    # changeset = Organizations.change_user_organization(user_organization)~
-    users = Enum.map(Accounts.list_users(), fn u -> [key: u.email, value: u.id] end)
+    # changeset = Organizations.change_user_organization(user_organization)
+    # users = Enum.map(Accounts.list_users(), fn u -> [key: u.email, value: u.id] end)
+    hide_dropdown()
+    # users = Accounts.list_users()
+    users = %{}
 
     {:ok,
      socket
@@ -93,6 +93,20 @@ defmodule AtomicWeb.BoardLive.FormComponent do
     end
   end
 
+  @impl true
+  def handle_event("update", board_params, socket) do
+    users =
+      Enum.filter(Accounts.list_users(), fn u ->
+        String.starts_with?(String.downcase(u.name), String.downcase(board_params["users"]))
+      end)
+
+    show_dropdown()
+
+    {:noreply,
+     socket
+     |> assign(:users, users)}
+  end
+
   @impl true
   def handle_event("delete", _, socket) do
     {:noreply,
@@ -109,12 +123,6 @@ defmodule AtomicWeb.BoardLive.FormComponent do
     end
   end
 
-  @impl true
-  def delete_board(board_params, socket) do
-    # save_user_organization(socket, socket.assigns.action, user_organization_params)
-    save_board(socket, :delete, board_params)
-  end
-
   defp save_board(socket, :new, board_params) do
     board_params = Map.put(board_params, "organization_id", socket.assigns.organization_id)
 
@@ -122,7 +130,7 @@ defmodule AtomicWeb.BoardLive.FormComponent do
       {:ok, _board} ->
         {:noreply,
          socket
-         |> put_flash(:info, "Board created successfully")
+         |> put_flash(:sccess, "Board created successfully")
          |> push_navigate(to: socket.assigns.return_to)}
 
       {:error, %Ecto.Changeset{} = changeset} ->
@@ -138,7 +146,7 @@ defmodule AtomicWeb.BoardLive.FormComponent do
       {:ok, _board} ->
         {:noreply,
          socket
-         |> put_flash(:info, "Board created successfully")
+         |> put_flash(:success, "Board edited successfully")
          |> push_navigate(to: socket.assigns.return_to)}
 
       {:error, %Ecto.Changeset{} = changeset} ->
@@ -146,15 +154,14 @@ defmodule AtomicWeb.BoardLive.FormComponent do
     end
   end
 
-  defp save_board(socket, :delete, board_params) do
-    board_params = Map.put(board_params, "organization_id", socket.assigns.organization_id)
+  defp save_board(socket, :delete, _board_params) do
     board = Board.get_board!(socket.assigns.board.id)
 
     case Board.delete_board(board) do
       {:ok, _board} ->
         {:noreply,
          socket
-         |> put_flash(:error, "Board deleted successfully")
+         |> put_flash(:success, "Board deleted successfully")
          |> push_navigate(to: socket.assigns.return_to)}
 
       {:error, %Ecto.Changeset{} = changeset} ->
@@ -219,16 +226,28 @@ defmodule AtomicWeb.BoardLive.FormComponent do
           <%= label(f, :users, class: "text-sm font-semibold") %>
           <p class="text-xs text-gray-500">The name of the department</p>
         </div>
-        <%= select(f, :user_id, @users, class: "rounded-lg border-zinc-200 focus:ring-primary-500 focus:border-primary-500") %>
+        <%!-- <%= select(f, :user_id, @users, class: "rounded-lg border-zinc-200 focus:ring-primary-500 focus:border-primary-500") %> --%>
         <%!-- <.live_component module={MultiSelect} id="users" items={@users} selected_items={[]} target={@myself} /> --%>
+        <div class="flex flex-col">
+          <%= text_input(f, :users, class: "rounded-lg border-zinc-200 focus:ring-primary-500 focus:border-primary-500", phx_change: "update", phx_target: @myself, id: "department-users-input") %>
+          <div class="relative">
+            <div id="department-users-dropdown" class="absolute top-full z-10 hidden max-h-44 w-full origin-top overflow-y-auto rounded-b-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5" phx-click-away={hide_dropdown()}>
+              <%= for user <- @users do %>
+                <a href="#" class="flex items-center gap-x-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">
+                  <%= user.name %>
+                </a>
+              <% end %>
+            </div>
+          </div>
+        </div>
         <%= error_tag(f, :users) %>
       </div>
 
       <div class="mt-4 flex w-full justify-end space-x-4">
         <%= if @action in [:edit_board, :edit_department] do %>
-          <.button size={:md} color={:danger} icon={:trash} phx-click="delete" phx-target={@myself}>Delete department</.button>
+          <.button size={:md} color={:danger} icon={:trash} phx-click="delete" phx-target={@myself} full_width>Delete department</.button>
         <% end %>
-        <.button size={:md} color={:white} icon={:check}>Save Changes</.button>
+        <.button size={:md} color={:white} icon={:check} full_width>Save Changes</.button>
       </div>
     </.form>
     """
@@ -248,8 +267,6 @@ defmodule AtomicWeb.BoardLive.FormComponent do
   end
 
   defp display_action_goal_confirm_description(action, board) do
-    IO.inspect(board)
-
     case action do
       :confirm_request ->
         gettext("If you change your mind you can always remove this person later.")
@@ -264,4 +281,24 @@ defmodule AtomicWeb.BoardLive.FormComponent do
         )
     end
   end
+
+  defp hide_dropdown(js \\ %JS{}) do
+    js
+    |> JS.remove_class("rounded-t-lg", to: "#department-users-input")
+    |> JS.add_class("rounded-lg", to: "#department-users-input")
+    |> JS.hide(
+      transition: {"ease-in duration-150", "scale-y-100", "scale-y-0"},
+      to: "#department-users-dropdown"
+    )
+  end
+
+  defp show_dropdown(js \\ %JS{}) do
+    js
+    |> JS.remove_class("rounded-lg", to: "#department-users-input")
+    |> JS.add_class("rounded-t-lg", to: "#department-users-input")
+    |> JS.show(
+      transition: {"ease-out duration-150", "scale-y-0", "scale-y-100"},
+      to: "#department-users-dropdown"
+    )
+  end
 end
diff --git a/lib/atomic_web/live/board_live/index.ex b/lib/atomic_web/live/board_live/index.ex
index 7107f8341..7e9e77b8c 100644
--- a/lib/atomic_web/live/board_live/index.ex
+++ b/lib/atomic_web/live/board_live/index.ex
@@ -105,9 +105,7 @@ defmodule AtomicWeb.BoardLive.Index do
      socket
      |> assign(:board_departments, board_departments)
      |> assign(:empty?, Enum.empty?(board_departments))
-     |> push_patch(
-       to: Routes.board_index_path(socket, :show, socket.assigns.organization.id, id)
-     )}
+     |> push_patch(to: Routes.board_index_path(socket, :show, socket.assigns.organization.id, id))}
   end
 
   @impl true

From 2da54c264a043f40a16c1aa2337b38d27ce58df5 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Mon, 15 Apr 2024 17:31:39 +0100
Subject: [PATCH 4/6] feat: add ability to set custom names for boards

---
 lib/atomic/board.ex                           |  6 +-
 lib/atomic/organizations/board.ex             |  5 +-
 lib/atomic_web/live/board_live/edit.html.heex |  2 +-
 .../live/board_live/form_component.ex         | 66 +++++++++++--------
 .../live/board_live/index.html.heex           |  6 +-
 lib/atomic_web/live/board_live/new.ex         |  1 -
 .../20230980102641_create_boards.exs          |  4 +-
 priv/repo/seeds/memberships.exs               |  2 +-
 8 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/lib/atomic/board.ex b/lib/atomic/board.ex
index b37cf65c6..d009a1f5b 100644
--- a/lib/atomic/board.ex
+++ b/lib/atomic/board.ex
@@ -87,6 +87,10 @@ defmodule Atomic.Board do
 
   """
   def create_board(attrs \\ %{}) do
+    IO.inspect(attrs)
+    IO.puts("changeset: ")
+    IO.inspect(Board.changeset(%Board{}, attrs))
+
     %Board{}
     |> Board.changeset(attrs)
     |> Repo.insert()
@@ -140,7 +144,7 @@ defmodule Atomic.Board do
   end
 
   def get_organization_board_by_year(year, organization_id) do
-    Repo.get_by(Board, year: year, organization_id: organization_id)
+    Repo.get_by(Board, name: year, organization_id: organization_id)
   end
 
   @doc """
diff --git a/lib/atomic/organizations/board.ex b/lib/atomic/organizations/board.ex
index a62179c26..2bade3863 100644
--- a/lib/atomic/organizations/board.ex
+++ b/lib/atomic/organizations/board.ex
@@ -2,14 +2,13 @@ defmodule Atomic.Organizations.Board do
   @moduledoc false
   use Atomic.Schema
 
-  alias Atomic.Ecto.Year
   alias Atomic.Organizations.BoardDepartments
   alias Atomic.Organizations.Organization
 
-  @required_fields ~w(year organization_id)a
+  @required_fields ~w(name organization_id)a
 
   schema "boards" do
-    field :year, Year
+    field :name, :string
     has_many :board_departments, BoardDepartments
 
     belongs_to :organization, Organization
diff --git a/lib/atomic_web/live/board_live/edit.html.heex b/lib/atomic_web/live/board_live/edit.html.heex
index e6d1c2228..83cf70828 100644
--- a/lib/atomic_web/live/board_live/edit.html.heex
+++ b/lib/atomic_web/live/board_live/edit.html.heex
@@ -1 +1 @@
-<.live_component module={AtomicWeb.BoardLive.FormComponent} users={@users} id={@user_organization.id} title={@page_title} action={@live_action} user_organization={@user_organization} return_to={Routes.board_show_path(@socket, :show, @user_organization.organization_id, @user_organization.id)} />
+<.live_component module={AtomicWeb.BoardLive.FormComponent} users={@users} id={@user_organization.id} title={@page_title} action={@live_action} user_organization={@user_organization} return_to={Routes.board_show_path(@socket, :show, @user_organization.organization_id)} />
diff --git a/lib/atomic_web/live/board_live/form_component.ex b/lib/atomic_web/live/board_live/form_component.ex
index 69e0ab6bc..b2d75db9b 100644
--- a/lib/atomic_web/live/board_live/form_component.ex
+++ b/lib/atomic_web/live/board_live/form_component.ex
@@ -1,6 +1,8 @@
 defmodule AtomicWeb.BoardLive.FormComponent do
   use AtomicWeb, :live_component
 
+  import AtomicWeb.Components.Forms
+
   alias Atomic.Accounts
   alias Atomic.Board
   alias Phoenix.LiveView.JS
@@ -52,7 +54,7 @@ defmodule AtomicWeb.BoardLive.FormComponent do
 
   @impl true
   def update(%{organization_id: _org} = assigns, socket) do
-    # changeset = Organizations.change_user_organization(user_organization)
+    changeset = Board.change_board(assigns.board)
     # users = Enum.map(Accounts.list_users(), fn u -> [key: u.email, value: u.id] end)
     hide_dropdown()
     # users = Accounts.list_users()
@@ -62,7 +64,8 @@ defmodule AtomicWeb.BoardLive.FormComponent do
      socket
      |> assign(assigns)
      |> assign(:action_modal, nil)
-     |> assign(users: users)}
+     |> assign(users: users)
+     |> assign(:changeset, changeset)}
   end
 
   @impl true
@@ -97,10 +100,10 @@ defmodule AtomicWeb.BoardLive.FormComponent do
   def handle_event("update", board_params, socket) do
     users =
       Enum.filter(Accounts.list_users(), fn u ->
-        String.starts_with?(String.downcase(u.name), String.downcase(board_params["users"]))
+        String.starts_with?(String.downcase(u.name), board_params["board"]["users"])
       end)
 
-    show_dropdown()
+    # show_dropdown()
 
     {:noreply,
      socket
@@ -124,14 +127,21 @@ defmodule AtomicWeb.BoardLive.FormComponent do
   end
 
   defp save_board(socket, :new, board_params) do
-    board_params = Map.put(board_params, "organization_id", socket.assigns.organization_id)
+    board_params =
+      Map.put(board_params["board"], "organization_id", socket.assigns.organization_id)
+
+    # board_params = Map.put(%Board{}, "board", board_map)
+
+    IO.inspect(board_params)
 
     case Board.create_board(board_params) do
-      {:ok, _board} ->
+      {:ok, board} ->
         {:noreply,
          socket
-         |> put_flash(:sccess, "Board created successfully")
-         |> push_navigate(to: socket.assigns.return_to)}
+         |> put_flash(:success, "Board created successfully")
+         |> push_navigate(
+           to: Routes.board_index_path(socket, :show, socket.assigns.organization_id, board.id)
+         )}
 
       {:error, %Ecto.Changeset{} = changeset} ->
         {:noreply, assign(socket, changeset: changeset)}
@@ -147,7 +157,7 @@ defmodule AtomicWeb.BoardLive.FormComponent do
         {:noreply,
          socket
          |> put_flash(:success, "Board edited successfully")
-         |> push_navigate(to: socket.assigns.return_to)}
+         |> push_patch(to: socket.assigns.return_to)}
 
       {:error, %Ecto.Changeset{} = changeset} ->
         {:noreply, assign(socket, changeset: changeset)}
@@ -156,6 +166,7 @@ defmodule AtomicWeb.BoardLive.FormComponent do
 
   defp save_board(socket, :delete, _board_params) do
     board = Board.get_board!(socket.assigns.board.id)
+    IO.inspect(socket.assigns.return_to)
 
     case Board.delete_board(board) do
       {:ok, _board} ->
@@ -173,23 +184,18 @@ defmodule AtomicWeb.BoardLive.FormComponent do
     ~H"""
     <h1 class="flex-1 select-none truncate text-lg font-semibold text-gray-900"><%= @title %></h1>
 
-    <.form :let={f} id="board-form" phx-target={@myself} phx-submit="save">
+    <.form :let={f} for={@changeset} id="board-form" phx-target={@myself} phx-submit="save">
       <%!-- <%= label(f, :user_id) %> --%>
       <%!-- <%= select(f, :user_id, @users) %> --%>
       <%!-- <%= label(f, :title) %> --%>
       <%!-- <%= text_input(f, :title) %> --%>
       <div class="flex flex-col gap-y-1">
-        <div>
-          <%= label(f, :name, class: "text-sm font-semibold") %>
-          <p class="text-xs text-gray-500">The name of the board</p>
-        </div>
-        <%= text_input(f, :year, class: "rounded-lg border-zinc-200 focus:ring-primary-500 focus:border-primary-500") %>
-        <%= error_tag(f, :year) %>
+        <.field field={f[:name]} id="name" label="Name" type="text" placeholder="Board name" />
       </div>
 
       <div class="mt-4 flex w-full justify-end space-x-4">
-        <%= if @action in [:edit_board, :edit_department] do %>
-          <.button size={:md} color={:danger} icon={:trash} phx-click="delete" phx-target={@myself}>Delete board</.button>
+        <%= if @action in [:edit_board] do %>
+          <.button size={:md} color={:danger} icon={:trash} type="button" phx-click="delete" phx-target={@myself}>Delete board</.button>
         <% end %>
         <.button size={:md} color={:white} icon={:check}>Save Changes</.button>
       </div>
@@ -207,7 +213,7 @@ defmodule AtomicWeb.BoardLive.FormComponent do
       <% end %>
     </h1>
 
-    <.form :let={f} id="board-form" phx-target={@myself} phx-submit="save">
+    <.form :let={f} id="board-form" for={@changeset} phx-target={@myself} phx-submit="save">
       <%!-- <%= label(f, :user_id) %> --%>
       <%!-- <%= select(f, :user_id, @users) %> --%>
       <%!-- <%= label(f, :title) %> --%>
@@ -217,8 +223,8 @@ defmodule AtomicWeb.BoardLive.FormComponent do
           <%= label(f, :name, class: "text-sm font-semibold") %>
           <p class="text-xs text-gray-500">The name of the department</p>
         </div>
-        <%= text_input(f, :year, class: "rounded-lg border-zinc-200 focus:ring-primary-500 focus:border-primary-500") %>
-        <%= error_tag(f, :year) %>
+        <%= text_input(f, :name, class: "rounded-lg border-zinc-200 focus:ring-primary-500 focus:border-primary-500") %>
+        <%= error_tag(f, :name) %>
       </div>
 
       <div class="flex flex-col gap-y-1">
@@ -229,14 +235,16 @@ defmodule AtomicWeb.BoardLive.FormComponent do
         <%!-- <%= select(f, :user_id, @users, class: "rounded-lg border-zinc-200 focus:ring-primary-500 focus:border-primary-500") %> --%>
         <%!-- <.live_component module={MultiSelect} id="users" items={@users} selected_items={[]} target={@myself} /> --%>
         <div class="flex flex-col">
-          <%= text_input(f, :users, class: "rounded-lg border-zinc-200 focus:ring-primary-500 focus:border-primary-500", phx_change: "update", phx_target: @myself, id: "department-users-input") %>
+          <%= text_input(f, :users, class: "rounded-lg border-zinc-200 focus:ring-primary-500 focus:border-primary-500", phx_click: show_dropdown(), phx_change: "update", phx_target: @myself, autocomplete: "off", id: "department-users-input") %>
           <div class="relative">
-            <div id="department-users-dropdown" class="absolute top-full z-10 hidden max-h-44 w-full origin-top overflow-y-auto rounded-b-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5" phx-click-away={hide_dropdown()}>
-              <%= for user <- @users do %>
-                <a href="#" class="flex items-center gap-x-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">
-                  <%= user.name %>
-                </a>
-              <% end %>
+            <div id="department-users-dropdown" class="absolute top-full z-10 hidden w-full origin-top overflow-hidden rounded-b-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5" phx-click-away={hide_dropdown()}>
+              <div class="max-h-44 overflow-y-scroll">
+                <%= for user <- @users do %>
+                  <a href="#" class="flex items-center gap-x-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">
+                    <%= user.name %>
+                  </a>
+                <% end %>
+              </div>
             </div>
           </div>
         </div>
@@ -277,7 +285,7 @@ defmodule AtomicWeb.BoardLive.FormComponent do
       :delete_board ->
         gettext(
           "If you remove this person, they will no longer have access to %{department_name}.",
-          department_name: board.year
+          department_name: board.name
         )
     end
   end
diff --git a/lib/atomic_web/live/board_live/index.html.heex b/lib/atomic_web/live/board_live/index.html.heex
index 2cef6cdcf..aceaab4a9 100644
--- a/lib/atomic_web/live/board_live/index.html.heex
+++ b/lib/atomic_web/live/board_live/index.html.heex
@@ -11,7 +11,7 @@
       <form phx-change="update-selected-board" class="w-full">
         <select class="w-full border-none" name="id">
           <%= for board <- @boards do %>
-            <option value={board.id} selected={board.id == @board.id}><%= board.year %></option>
+            <option value={board.id} selected={board.id == @board.id}><%= board.name %></option>
           <% end %>
         </select>
       </form>
@@ -48,7 +48,9 @@
                         <.avatar class="mx-auto ring-1 ring-white" color={:light_gray} name={user_organization.user.name} size={:xs} src={Uploaders.ProfilePicture.url({user_organization.user.profile_picture, user_organization.user}, :original)} />
                       <% end %>
                       <%= if length(Board.get_board_department_users(board_department.id, preloads: [:user])) > 4 do %>
-                        <.avatar name={"+#{length(Board.get_board_department_users(board_department.id, preloads: [:user])) - 4}"} size={:xs} auto_generate_initials={false} color={:light_gray} class="ring-1 ring-white" />
+                        <%!-- Uncomment this after improve departments pages is merged (auto_generate_initials) --%>
+                        <%!-- <.avatar name={"+#{length(Board.get_board_department_users(board_department.id, preloads: [:user])) - 4}"} size={:xs} auto_generate_initials={false} color={:light_gray} class="ring-1 ring-white" /> --%>
+                        <.avatar name={"+#{length(Board.get_board_department_users(board_department.id, preloads: [:user])) - 4}"} size={:xs} color={:light_gray} class="ring-1 ring-white" />
                       <% end %>
                     </div>
                   </div>
diff --git a/lib/atomic_web/live/board_live/new.ex b/lib/atomic_web/live/board_live/new.ex
index 43664b4ba..424d63c76 100644
--- a/lib/atomic_web/live/board_live/new.ex
+++ b/lib/atomic_web/live/board_live/new.ex
@@ -2,7 +2,6 @@ defmodule AtomicWeb.BoardLive.New do
   @moduledoc false
   use AtomicWeb, :live_view
 
-  alias Atomic.Accounts
   alias Atomic.Organizations.UserOrganization
 
   @impl true
diff --git a/priv/repo/migrations/20230980102641_create_boards.exs b/priv/repo/migrations/20230980102641_create_boards.exs
index 2a1d9e3e5..f79970df4 100644
--- a/priv/repo/migrations/20230980102641_create_boards.exs
+++ b/priv/repo/migrations/20230980102641_create_boards.exs
@@ -4,13 +4,13 @@ defmodule Atomic.Repo.Migrations.CreateBoards do
   def change do
     create table(:boards, primary_key: false) do
       add :id, :binary_id, primary_key: true
-      add :year, :string, null: false
+      add :name, :string, null: false
 
       add :organization_id, references(:organizations, type: :binary_id), null: false
 
       timestamps()
     end
 
-    create unique_index(:boards, [:year, :organization_id])
+    create unique_index(:boards, [:name, :organization_id])
   end
 end
diff --git a/priv/repo/seeds/memberships.exs b/priv/repo/seeds/memberships.exs
index 97cd004c5..65bd20e23 100644
--- a/priv/repo/seeds/memberships.exs
+++ b/priv/repo/seeds/memberships.exs
@@ -75,7 +75,7 @@ defmodule Atomic.Repo.Seeds.Memberships do
           %Board{}
           |> Board.changeset(%{
             "organization_id" => organization.id,
-            "year" => Year.current_year()
+            "name" => Year.current_year()
           })
           |> Repo.insert!()
         end

From a4c05c9a46d328ec9a8f2be989845504907e3dbc Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Wed, 24 Jul 2024 01:24:22 +0100
Subject: [PATCH 5/6] feat: manage board departments

---
 lib/atomic/board.ex                           |  17 +-
 .../live/board_live/form_component.ex         | 192 +++++++++++++++---
 lib/atomic_web/live/board_live/index.ex       |   5 +-
 .../live/board_live/index.html.heex           |   2 +-
 4 files changed, 184 insertions(+), 32 deletions(-)

diff --git a/lib/atomic/board.ex b/lib/atomic/board.ex
index d009a1f5b..a33be6ace 100644
--- a/lib/atomic/board.ex
+++ b/lib/atomic/board.ex
@@ -108,7 +108,7 @@ defmodule Atomic.Board do
       {:error, %Ecto.Changeset{}}
 
   """
-  def update_board(%Board{} = board, attrs) do
+  def update_board(board, attrs) do
     board
     |> Board.changeset(attrs)
     |> Repo.update()
@@ -199,11 +199,16 @@ defmodule Atomic.Board do
   end
 
   def get_board_department_users(board_departments_id, opts \\ []) do
-    UserOrganization
-    |> where([u], u.board_departments_id == ^board_departments_id)
-    |> order_by([u], u.priority)
-    |> apply_filters(opts)
-    |> Repo.all()
+    if board_departments_id == nil do
+      []
+    else
+      UserOrganization
+      |> where([u], u.board_departments_id == ^board_departments_id)
+      |> order_by([u], u.priority)
+      |> apply_filters(opts)
+      |> Repo.all()
+      |> Repo.preload(:user)
+    end
   end
 
   @doc """
diff --git a/lib/atomic_web/live/board_live/form_component.ex b/lib/atomic_web/live/board_live/form_component.ex
index b2d75db9b..e990de3ac 100644
--- a/lib/atomic_web/live/board_live/form_component.ex
+++ b/lib/atomic_web/live/board_live/form_component.ex
@@ -5,6 +5,7 @@ defmodule AtomicWeb.BoardLive.FormComponent do
 
   alias Atomic.Accounts
   alias Atomic.Board
+  alias Atomic.Organizations
   alias Phoenix.LiveView.JS
 
   @impl true
@@ -23,9 +24,11 @@ defmodule AtomicWeb.BoardLive.FormComponent do
           <h1 class="flex-1 select-none truncate text-lg font-semibold text-gray-900">
             <%= display_action_goal_confirm_title(@action_modal) %>
           </h1>
-          <p class="mt-4">
-            <%= display_action_goal_confirm_description(@action_modal, @board) %>
-          </p>
+          <%= if @action_modal in [:delete_board, :delete_department] do %>
+            <p class="mt-4 text-sm text-gray-500">
+              <%= gettext("This action cannot be undone.") %>
+            </p>
+          <% end %>
           <div class="mt-8 flex flex-row">
             <.button phx-click="clear-action" class="mr-2" phx-target={@myself} size={:lg} icon={:x_circle} color={:white} full_width>Cancel</.button>
             <.button
@@ -54,7 +57,25 @@ defmodule AtomicWeb.BoardLive.FormComponent do
 
   @impl true
   def update(%{organization_id: _org} = assigns, socket) do
-    changeset = Board.change_board(assigns.board)
+    changeset =
+      case assigns.action do
+        :new_board ->
+          Board.change_board(%Organizations.Board{})
+
+        :edit_board ->
+          Board.change_board(assigns.board)
+
+        :new_department ->
+          Board.change_board_department(%Organizations.BoardDepartments{})
+
+        :edit_department ->
+          Board.change_board_department(Board.get_board_department!(assigns.department_id))
+
+        _ ->
+          Board.change_board(assigns.board)
+      end
+
+    # changeset = Board.change_board(assigns.board)
     # users = Enum.map(Accounts.list_users(), fn u -> [key: u.email, value: u.id] end)
     hide_dropdown()
     # users = Accounts.list_users()
@@ -89,15 +110,18 @@ defmodule AtomicWeb.BoardLive.FormComponent do
   @impl true
   def handle_event("save", board_params, socket) do
     # save_user_organization(socket, socket.assigns.action, user_organization_params)
-    if socket.assigns.action == :new_board do
-      save_board(socket, :new, board_params)
-    else
-      save_board(socket, :edit, board_params)
+    IO.inspect("called save")
+
+    case socket.assigns.action do
+      :new_board -> save_board(socket, :new, board_params)
+      :edit_board -> save_board(socket, :edit, board_params)
+      :new_department -> save_department(socket, :new, board_params)
+      :edit_department -> save_department(socket, :edit, board_params)
     end
   end
 
   @impl true
-  def handle_event("update", board_params, socket) do
+  def handle_event("update_department", board_params, socket) do
     users =
       Enum.filter(Accounts.list_users(), fn u ->
         String.starts_with?(String.downcase(u.name), board_params["board"]["users"])
@@ -111,10 +135,12 @@ defmodule AtomicWeb.BoardLive.FormComponent do
   end
 
   @impl true
-  def handle_event("delete", _, socket) do
+  def handle_event(action, _, socket) when action in ["delete_board", "delete_department"] do
+    IO.inspect(action)
+
     {:noreply,
      socket
-     |> assign(:action_modal, :delete_board)}
+     |> assign(:action_modal, String.to_atom(action))}
   end
 
   @impl true
@@ -123,6 +149,7 @@ defmodule AtomicWeb.BoardLive.FormComponent do
       # :confirm_request -> accept_collaborator_request(socket)
       # :deny_request -> deny_collaborator_request(socket)
       :delete_board -> save_board(socket, :delete, socket.assigns.board)
+      :delete_department -> save_department(socket, :delete, socket.assigns.department_id)
     end
   end
 
@@ -148,9 +175,11 @@ defmodule AtomicWeb.BoardLive.FormComponent do
     end
   end
 
-  defp save_board(socket, :edit, board_params) do
-    board_params = Map.put(board_params, "organization_id", socket.assigns.organization_id)
+  defp save_board(socket, :edit, %{"board" => board_params}) do
+    # board_params = Map.put(board_params, "organization_id", socket.assigns.organization_id)
     board = Board.get_board!(socket.assigns.board.id)
+    IO.inspect(board)
+    IO.puts("Edit board")
 
     case Board.update_board(board, board_params) do
       {:ok, _board} ->
@@ -173,6 +202,95 @@ defmodule AtomicWeb.BoardLive.FormComponent do
         {:noreply,
          socket
          |> put_flash(:success, "Board deleted successfully")
+         |> assign(
+           :return_to,
+           Routes.board_index_path(socket, :index, socket.assigns.organization_id)
+         )
+         |> push_navigate(to: socket.assigns.return_to)}
+
+      {:error, %Ecto.Changeset{} = changeset} ->
+        {:noreply, assign(socket, changeset: changeset)}
+    end
+  end
+
+  defp save_department(socket, :new, department_params) do
+    # department_params =
+    # Map.put(department_params, "board", socket.assigns.board)
+
+    # board_params = Map.put(%Board{}, "board", board_map)
+    department_params =
+      Map.put(department_params["board_departments"], "board_id", socket.assigns.board.id)
+      |> Map.put("priority", 1)
+
+    IO.inspect(department_params)
+
+    case Board.create_board_department(department_params) do
+      {:ok, board_deparment} ->
+        {:noreply,
+         socket
+         |> put_flash(:success, "Department created successfully")
+         |> push_navigate(
+           to:
+             Routes.board_index_path(
+               socket,
+               :show,
+               socket.assigns.organization_id,
+               socket.assigns.board.id
+             )
+         )}
+
+      {:error, %Ecto.Changeset{} = changeset} ->
+        {:noreply, assign(socket, changeset: changeset)}
+    end
+  end
+
+  defp save_department(socket, :edit, department_params) do
+    # department_params =
+    # Map.put(department_params["board_departments"], "board_id", socket.assigns.board.id)
+    department_params = department_params["board_departments"]
+    department = Board.get_board_department!(socket.assigns.department_id)
+    # board_params = Map.put(%Board{}, "board", board_map)
+
+    IO.inspect(department_params)
+
+    case Board.update_board_department(department, department_params) do
+      {:ok, board_department} ->
+        {:noreply,
+         socket
+         |> put_flash(:success, "Department updated successfully")
+         |> push_navigate(
+           to:
+             Routes.board_index_path(
+               socket,
+               :show,
+               socket.assigns.organization_id,
+               socket.assigns.board.id
+             )
+         )}
+
+      {:error, %Ecto.Changeset{} = changeset} ->
+        {:noreply, assign(socket, changeset: changeset)}
+    end
+  end
+
+  defp save_department(socket, :delete, _department_params) do
+    department = Board.get_board_department!(socket.assigns.department_id)
+    IO.inspect("called delete department")
+
+    case Board.delete_board_department(department) do
+      {:ok, _board} ->
+        {:noreply,
+         socket
+         |> put_flash(:success, "Department deleted successfully")
+         |> assign(
+           :return_to,
+           Routes.board_index_path(
+             socket,
+             :show,
+             socket.assigns.organization_id,
+             socket.assigns.board.id
+           )
+         )
          |> push_navigate(to: socket.assigns.return_to)}
 
       {:error, %Ecto.Changeset{} = changeset} ->
@@ -195,7 +313,7 @@ defmodule AtomicWeb.BoardLive.FormComponent do
 
       <div class="mt-4 flex w-full justify-end space-x-4">
         <%= if @action in [:edit_board] do %>
-          <.button size={:md} color={:danger} icon={:trash} type="button" phx-click="delete" phx-target={@myself}>Delete board</.button>
+          <.button size={:md} color={:danger} icon={:trash} type="button" phx-click="delete_board" phx-target={@myself}>Delete board</.button>
         <% end %>
         <.button size={:md} color={:white} icon={:check}>Save Changes</.button>
       </div>
@@ -213,7 +331,7 @@ defmodule AtomicWeb.BoardLive.FormComponent do
       <% end %>
     </h1>
 
-    <.form :let={f} id="board-form" for={@changeset} phx-target={@myself} phx-submit="save">
+    <.form :let={f} id="department-form" for={@changeset} phx-target={@myself} phx-submit="save">
       <%!-- <%= label(f, :user_id) %> --%>
       <%!-- <%= select(f, :user_id, @users) %> --%>
       <%!-- <%= label(f, :title) %> --%>
@@ -235,25 +353,45 @@ defmodule AtomicWeb.BoardLive.FormComponent do
         <%!-- <%= select(f, :user_id, @users, class: "rounded-lg border-zinc-200 focus:ring-primary-500 focus:border-primary-500") %> --%>
         <%!-- <.live_component module={MultiSelect} id="users" items={@users} selected_items={[]} target={@myself} /> --%>
         <div class="flex flex-col">
-          <%= text_input(f, :users, class: "rounded-lg border-zinc-200 focus:ring-primary-500 focus:border-primary-500", phx_click: show_dropdown(), phx_change: "update", phx_target: @myself, autocomplete: "off", id: "department-users-input") %>
-          <div class="relative">
-            <div id="department-users-dropdown" class="absolute top-full z-10 hidden w-full origin-top overflow-hidden rounded-b-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5" phx-click-away={hide_dropdown()}>
-              <div class="max-h-44 overflow-y-scroll">
+          <%= text_input(f, :users, class: "rounded-lg border-zinc-200 focus:ring-primary-500 focus:border-primary-500", phx_click: show_dropdown(), phx_change: "update_department", phx_target: @myself, autocomplete: "off", id: "department-users-input") %>
+          <div class="h-48 overflow-clip rounded-lg border border-zinc-200">
+            <%= if Board.get_board_department_users(@department_id) == {} do %>
+              <p class="text-zinc-600">Empty...</p>
+            <% end %>
+            <div class="h-48 overflow-y-auto">
+              <ul class="flex flex-col items-center justify-center divide-y divide-zinc-200">
+                <%= for user_organization <- Board.get_board_department_users(@department_id) do %>
+                  <li class="w-full">
+                    <div class="flex items-center justify-between p-2">
+                      <p><%= user_organization.user.name %></p>
+                      <.button color={:light} class="max-h-8">
+                        <span class="h-4 w-4 select-none">
+                          <.icon name={:trash} />
+                        </span>
+                      </.button>
+                    </div>
+                  </li>
+                <% end %>
+              </ul>
+            </div>
+          </div>
+
+          <%!-- <div id="department-users-dropdown" class="absolute top-full z-10 hidden w-full origin-top overflow-hidden rounded-b-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5" phx-click-away={hide_dropdown()}>
+              <%!-- <div class="max-h-44 overflow-y-scroll">
                 <%= for user <- @users do %>
                   <a href="#" class="flex items-center gap-x-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">
                     <%= user.name %>
                   </a>
                 <% end %>
               </div>
-            </div>
-          </div>
+            </div> --%>
         </div>
         <%= error_tag(f, :users) %>
       </div>
 
       <div class="mt-4 flex w-full justify-end space-x-4">
-        <%= if @action in [:edit_board, :edit_department] do %>
-          <.button size={:md} color={:danger} icon={:trash} phx-click="delete" phx-target={@myself} full_width>Delete department</.button>
+        <%= if @action in [:edit_department] do %>
+          <.button size={:md} color={:danger} icon={:trash} type="button" phx-click="delete_department" phx-target={@myself} full_width>Delete department</.button>
         <% end %>
         <.button size={:md} color={:white} icon={:check} full_width>Save Changes</.button>
       </div>
@@ -270,7 +408,13 @@ defmodule AtomicWeb.BoardLive.FormComponent do
         gettext("Are you sure you want to deny this request?")
 
       :delete_board ->
-        gettext("Are you sure you want to remove this person from the department?")
+        gettext("Are you sure you want to remove this board?")
+
+      :delete_department ->
+        gettext("Are you sure you want to remove this department?")
+
+      _ ->
+        gettext("Are you sure you want to perform this action?")
     end
   end
 
diff --git a/lib/atomic_web/live/board_live/index.ex b/lib/atomic_web/live/board_live/index.ex
index 7e9e77b8c..ba94acca0 100644
--- a/lib/atomic_web/live/board_live/index.ex
+++ b/lib/atomic_web/live/board_live/index.ex
@@ -22,6 +22,8 @@ defmodule AtomicWeb.BoardLive.Index do
   @impl true
   def handle_params(%{"organization_id" => organization_id} = params, _, socket) do
     board_id = Map.get(params, "id")
+    department_id = Map.get(params, "department_id")
+
     current_year = Year.current_year()
     boards = Board.list_boards_by_organization_id(organization_id)
 
@@ -52,7 +54,8 @@ defmodule AtomicWeb.BoardLive.Index do
      |> assign(:boards, boards)
      |> assign(:board, board)
      |> assign(:params, params)
-     |> assign(:year, current_year)}
+     |> assign(:year, current_year)
+     |> assign(:department_id, department_id)}
   end
 
   @impl true
diff --git a/lib/atomic_web/live/board_live/index.html.heex b/lib/atomic_web/live/board_live/index.html.heex
index aceaab4a9..eb8b69f88 100644
--- a/lib/atomic_web/live/board_live/index.html.heex
+++ b/lib/atomic_web/live/board_live/index.html.heex
@@ -98,5 +98,5 @@
   <% end %>
 </.page>
 <.modal :if={@live_action in [:new_board, :edit_board, :new_department, :edit_department]} id="board-modal" show on_cancel={JS.patch(Routes.board_index_path(@socket, :show, @organization, @board))}>
-  <.live_component module={AtomicWeb.BoardLive.FormComponent} organization_id={@organization.id} board={@board} id="board-forms" action={@live_action} title={@page_title} return_to={Routes.board_index_path(@socket, :show, @current_organization, @board)} />
+  <.live_component module={AtomicWeb.BoardLive.FormComponent} organization_id={@organization.id} department_id={@department_id} board={@board} id="board-forms" action={@live_action} title={@page_title} return_to={Routes.board_index_path(@socket, :show, @current_organization, @board)} />
 </.modal>

From efee1b9916a8b6826f15176f92e4f9a95ffc3ec0 Mon Sep 17 00:00:00 2001
From: Nuno Miguel <nmpf.2005@gmail.com>
Date: Tue, 6 Aug 2024 00:07:46 +0100
Subject: [PATCH 6/6] fix: move handle not showing with the correct permissions

---
 lib/atomic_web/live/board_live/form_component.ex | 11 ++++++++++-
 lib/atomic_web/live/board_live/index.html.heex   | 11 ++---------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/lib/atomic_web/live/board_live/form_component.ex b/lib/atomic_web/live/board_live/form_component.ex
index e990de3ac..dc72083a6 100644
--- a/lib/atomic_web/live/board_live/form_component.ex
+++ b/lib/atomic_web/live/board_live/form_component.ex
@@ -153,6 +153,15 @@ defmodule AtomicWeb.BoardLive.FormComponent do
     end
   end
 
+  @impl true
+  def handle_event("remove_user", %{"user-id" => user_id}, socket) do
+    IO.inspect(user_id)
+
+    IO.puts("Remove user")
+
+    {:noreply, assign(socket, :users, Board.get_board_department_users(socket.assigns.department_id))}
+  end
+
   defp save_board(socket, :new, board_params) do
     board_params =
       Map.put(board_params["board"], "organization_id", socket.assigns.organization_id)
@@ -364,7 +373,7 @@ defmodule AtomicWeb.BoardLive.FormComponent do
                   <li class="w-full">
                     <div class="flex items-center justify-between p-2">
                       <p><%= user_organization.user.name %></p>
-                      <.button color={:light} class="max-h-8">
+                      <.button color={:light} type="button" phx-target={@myself} phx-click="remove_user" phx-value-user-id={user_organization.user.id} class="max-h-8">
                         <span class="h-4 w-4 select-none">
                           <.icon name={:trash} />
                         </span>
diff --git a/lib/atomic_web/live/board_live/index.html.heex b/lib/atomic_web/live/board_live/index.html.heex
index eb8b69f88..50d91d21e 100644
--- a/lib/atomic_web/live/board_live/index.html.heex
+++ b/lib/atomic_web/live/board_live/index.html.heex
@@ -2,7 +2,7 @@
   <:actions>
     <%= if @has_permissions? do %>
       <.button icon={:plus} icon_class="stroke-2" patch={Routes.board_index_path(@socket, :new_board, @organization)}>
-        <%= gettext("New") %>
+        <%= gettext("New Board") %>
       </.button>
     <% end %>
   </:actions>
@@ -34,11 +34,9 @@
             <li id={"board-department-#{board_department.id}"} class="flex max-w-full flex-row gap-x-5 p-2 text-center lg:mx-0 lg:max-w-none">
               <div class="flex w-full justify-between">
                 <div class="flex flex-row items-center space-x-4">
-                  <%= if @role in [:owner, :admin] do %>
                     <span class="handle cursor-row-resize">
                       <.icon name={:bars_3} solid class="h-5 w-5 text-zinc-400" />
                     </span>
-                  <% end %>
                   <h1 class="w-fit text-left text-lg tracking-tight text-zinc-900 sm:text-md"><%= board_department.name %></h1>
                 </div>
                 <div class="relative hidden md:block">
@@ -56,7 +54,7 @@
                   </div>
                 </div>
               </div>
-              <span class="whitespace-nowrap">
+              <span class="whitespace-nowrap flex items-center justify-center">
                 <%= length(Board.get_board_department_users(board_department.id, preloads: [:user])) %> members
               </span>
               <.button patch={Routes.board_index_path(@socket, :edit_department, @organization, @board.id, board_department, @params)} color={:light} class="max-h-8">
@@ -77,11 +75,6 @@
     <%= for board_department <- @board_departments do %>
       <li id={"board-department-#{board_department.id}"} class="mt-5 max-w-full gap-x-8 text-center lg:mx-0 lg:max-w-none">
         <div class="flex flex-row items-center space-x-8">
-          <%= if @role in [:owner, :admin] do %>
-            <span class="handle cursor-row-resize">
-              <.icon name={:bars_3} solid class="h-5 w-5 text-zinc-400" />
-            </span>
-          <% end %>
           <h1 class="w-fit text-xl font-bold tracking-tight text-zinc-900 sm:text-xl"><%= board_department.name %></h1>
         </div>
         <div class="relative mb-10 lg:gap-x-24">