feat: improve board page

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);
       }
     })
   }

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()
@@ -104,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()
@@ -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 """
@@ -195,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 """

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

lib/atomic_web/components/button.ex

@@ -127,13 +127,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
 

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,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

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)} />