chore; added translation for listing members

lib/mv_web/components/layouts.ex

@@ -8,6 +8,8 @@ defmodule MvWeb.Layouts do
   in regular views and live views.
   """
   use MvWeb, :html
+  use Gettext, backend: MvWeb.Gettext
+  import MvWeb.Layouts.Navbar
 
   embed_templates "layouts/*"
 
@@ -19,7 +21,7 @@ defmodule MvWeb.Layouts do
       <Layouts.app flash={@flash}>
         <h1>Content</h1>
       </Layout.app>
-      
+
   """
   attr :flash, :map, required: true, doc: "the map of flash messages"
 
@@ -31,44 +33,9 @@ defmodule MvWeb.Layouts do
 
   def app(assigns) do
     ~H"""
-    <header class="navbar px-4 sm:px-6 lg:px-8">
-      <div class="flex-1">
-        <a href="/" class="flex-1 flex w-fit items-center gap-2">
-          <img src={~p"/images/logo.svg"} width="36" />
-          <span class="text-sm font-semibold">v{Application.spec(:phoenix, :vsn)}</span>
-        </a>
-      </div>
-      <div class="flex-none">
-        <ul class="flex flex-column px-1 space-x-4 items-center">
-          <li>
-            <form method="post" action="/set_locale" class="mr-4">
-              <input type="hidden" name="_csrf_token" value={Plug.CSRFProtection.get_csrf_token()} />
-              <select name="locale" onchange="this.form.submit()" class="select select-sm">
-                <option value="de" selected={Gettext.get_locale() == "de"}>Deutsch</option>
-                <option value="en" selected={Gettext.get_locale() == "en"}>English</option>
-              </select>
-            </form>
-          </li>
-          <li>
-            <a href="https://phoenixframework.org/" class="btn btn-ghost">Website</a>
-          </li>
-          <li>
-            <a href="https://github.com/phoenixframework/phoenix" class="btn btn-ghost">GitHub</a>
-          </li>
-          <li>
-            <.theme_toggle />
-          </li>
-          <li>
-            <a href="https://hexdocs.pm/phoenix/overview.html" class="btn btn-primary">
-              Get Started <span aria-hidden="true">&rarr;</span>
-            </a>
-          </li>
-        </ul>
-      </div>
-    </header>
-
-    <main class="px-4 py-20 sm:px-6 lg:px-8">
-      <div class="mx-auto max-w-2xl space-y-4">
+    <.navbar />
+    <main class="px-4 py-20 sm:px-6 lg:px-16">
+      <div class="mx-auto max-full space-y-4">
         {render_slot(@inner_block)}
       </div>
     </main>

lib/mv_web/components/layouts/navbar.ex

@@ -0,0 +1,42 @@
+defmodule MvWeb.Layouts.Navbar do
+  @moduledoc """
+  Navbar that is used in the rootlayout shown on every page
+  """
+  use Phoenix.Component
+  use Gettext, backend: MvWeb.Gettext
+
+  def navbar(assigns) do
+    ~H"""
+    <header class="navbar bg-base-100 shadow-sm">
+      <div class="flex-1">
+        <a class="btn btn-ghost text-xl">Mitgliederverwaltung</a>
+        <ul class="menu menu-horizontal bg-base-200">
+          <li><a href="/members">{gettext("Listing Members")}</a></li>
+          <li><a>Transaktionen</a></li>
+        </ul>
+      </div>
+      <div class="flex gap-2">
+        <div class="dropdown dropdown-end">
+          <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar avatar-placeholder">
+            <div class="bg-neutral text-neutral-content w-12 rounded-full">
+              <span>AA</span>
+            </div>
+          </div>
+          <ul
+            tabindex="0"
+            class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
+          >
+            <li>
+              <a>
+                {gettext("Profil")}
+              </a>
+            </li>
+            <li><a>{gettext("Settings")}</a></li>
+            <li><a href="sign-out">{gettext("Logout")}</a></li>
+          </ul>
+        </div>
+      </div>
+    </header>
+    """
+  end
+end

lib/mv_web/components/table_components.ex

@@ -0,0 +1,44 @@
+defmodule MvWeb.TableComponents do
+  @moduledoc """
+  TableComponents that can be used in tables as components (like a button for sorting, a filter...)
+  """
+  use Phoenix.Component
+  import MvWeb.CoreComponents
+  use Gettext, backend: MvWeb.Gettext
+
+  attr :field, :atom, required: true
+  attr :label, :string, required: true
+  attr :sort_field, :atom, default: nil
+  attr :sort_order, :atom, default: nil
+
+  @doc """
+  A sort button (with chevron icon) that can be used to sort a list of items
+  """
+  def sort_button(assigns) do
+    ~H"""
+    <button
+      type="button"
+      phx-click="sort"
+      phx-value-field={@field}
+      aria-sort={aria_sort(@sort_field, @sort_order, @field)}
+      class="flex items-center gap-1 hover:underline focus:outline-none"
+    >
+      <span>{@label}</span>
+      <%= if @sort_field == @field do %>
+        <.icon name={if @sort_order == :asc, do: "hero-chevron-up", else: "hero-chevron-down"} />
+        <span class="sr-only">
+          ({(@sort_order == :asc && gettext("ascending")) || gettext("descending")})
+        </span>
+      <% end %>
+    </button>
+    """
+  end
+
+  defp aria_sort(current_field, current_order, this_field) do
+    cond do
+      current_field != this_field -> "none"
+      current_order == :asc -> "ascending"
+      true -> "descending"
+    end
+  end
+end

lib/mv_web/live/member_live/index.ex

@@ -1,58 +1,19 @@
 defmodule MvWeb.MemberLive.Index do
   use MvWeb, :live_view
-
-  @impl true
-  def render(assigns) do
-    ~H"""
-    <Layouts.app flash={@flash}>
-      <.header>
-        {gettext("Listing Members")}
-        <:actions>
-          <.button variant="primary" navigate={~p"/members/new"}>
-            <.icon name="hero-plus" /> {gettext("New Member")}
-          </.button>
-        </:actions>
-      </.header>
-
-      <.table
-        id="members"
-        rows={@streams.members}
-        row_click={fn {_id, member} -> JS.navigate(~p"/members/#{member}") end}
-      >
-        <!-- <:col :let={{_id, member}} label="Id">{member.id}</:col> -->
-        <:col :let={{_id, member}} label={gettext("First Name")}>{member.first_name}</:col>
-        <:col :let={{_id, member}} label={gettext("Last Name")}>{member.last_name}</:col>
-        <:col :let={{_id, member}} label={gettext("Email")}>{member.email}</:col>
-        <:col :let={{_id, member}} label={gettext("City")}>{member.city}</:col>
-        <:col :let={{_id, member}} label={gettext("Join Date")}>{member.join_date}</:col>
-
-        <:action :let={{_id, member}}>
-          <div class="sr-only">
-            <.link navigate={~p"/members/#{member}"}>{gettext("Show")}</.link>
-          </div>
-
-          <.link navigate={~p"/members/#{member}/edit"}>{gettext("Edit")}</.link>
-        </:action>
-
-        <:action :let={{id, member}}>
-          <.link
-            phx-click={JS.push("delete", value: %{id: member.id}) |> hide("##{id}")}
-            data-confirm={gettext("Are you sure?")}
-          >
-            {gettext("Delete")}
-          </.link>
-        </:action>
-      </.table>
-    </Layouts.app>
-    """
-  end
+  import MvWeb.TableComponents
 
   @impl true
   def mount(_params, _session, socket) do
+    members = Ash.read!(Mv.Membership.Member)
+    sorted = Enum.sort_by(members, & &1.first_name)
+
     {:ok,
      socket
      |> assign(:page_title, gettext("Listing Members"))
-     |> stream(:members, Ash.read!(Mv.Membership.Member))}
+     |> assign(:sort_field, :first_name)
+     |> assign(:sort_order, :asc)
+     |> assign(:members, sorted)
+     |> assign(:selected_members, [])}
   end
 
   @impl true
@@ -62,4 +23,64 @@ defmodule MvWeb.MemberLive.Index do
 
     {:noreply, stream_delete(socket, :members, member)}
   end
+
+  # Selects one member in the list of members
+  @impl true
+  def handle_event("select_member", %{"id" => id}, socket) do
+    selected =
+      if id in socket.assigns.selected_members do
+        List.delete(socket.assigns.selected_members, id)
+      else
+        [id | socket.assigns.selected_members]
+      end
+
+    {:noreply, assign(socket, :selected_members, selected)}
+  end
+
+  # Sorts the list of members according to a field, when you click on the column header
+  @impl true
+  def handle_event("sort", %{"field" => field_str}, socket) do
+    members = socket.assigns.members
+    field = String.to_existing_atom(field_str)
+
+    new_order =
+      if socket.assigns.sort_field == field do
+        toggle_order(socket.assigns.sort_order)
+      else
+        :asc
+      end
+
+    sorted_members =
+      members
+      |> Enum.sort_by(&Map.get(&1, field), sort_fun(new_order))
+
+    {:noreply,
+     socket
+     |> assign(:sort_field, field)
+     |> assign(:sort_order, new_order)
+     |> assign(:members, sorted_members)}
+  end
+
+  #     Selects all members in the list of members
+
+  @impl true
+  def handle_event("select_all", _params, socket) do
+    members = socket.assigns.members
+
+    all_ids = Enum.map(members, & &1.id)
+
+    selected =
+      if Enum.sort(socket.assigns.selected_members) == Enum.sort(all_ids) do
+        []
+      else
+        all_ids
+      end
+
+    {:noreply, assign(socket, :selected_members, selected)}
+  end
+
+  defp toggle_order(:asc), do: :desc
+  defp toggle_order(:desc), do: :asc
+  defp sort_fun(:asc), do: &<=/2
+  defp sort_fun(:desc), do: &>=/2
 end

lib/mv_web/live/member_live/index.html.heex

@@ -0,0 +1,83 @@
+<Layouts.app flash={@flash}>
+  <.header>
+    {gettext("Listing Members")}
+    <:actions>
+      <.button variant="primary" navigate={~p"/members/new"}>
+        <.icon name="hero-plus" /> {gettext("New Member")}
+      </.button>
+    </:actions>
+  </.header>
+
+  <.table
+    id="members"
+    rows={@members}
+    row_click={fn member -> JS.navigate(~p"/members/#{member}") end}
+  >
+    
+<!-- <:col :let={member} label="Id">{member.id}</:col> -->
+    <:col
+      :let={member}
+      label={
+        ~H"""
+        <.input
+          type="checkbox"
+          name="select_all"
+          phx-click="select_all"
+          checked={Enum.sort(@selected_members) == Enum.map(@members, & &1.id) |> Enum.sort()}
+          aria-label={gettext("Select all members")}
+          role="checkbox"
+        />
+        """
+      }
+    >
+      <.input
+        type="checkbox"
+        name={member.id}
+        phx-click="select_member"
+        phx-value-id={member.id}
+        checked={member.id in @selected_members}
+        phx-capture-click
+        phx-stop-propagation
+        aria-label={gettext("Select member")}
+        role="checkbox"
+      />
+    </:col>
+    <:col
+      :let={member}
+      label={
+        sort_button(%{
+          field: :first_name,
+          label: gettext("Name"),
+          sort_field: @sort_field,
+          sort_order: @sort_order
+        })
+      }
+    >
+      {member.first_name} {member.last_name}
+    </:col>
+    <:col :let={member} label={gettext("Email")}>{member.email}</:col>
+    <:col :let={member} label={gettext("Street")}>{member.street}</:col>
+    <:col :let={member} label={gettext("House Number")}>{member.house_number}</:col>
+    <:col :let={member} label={gettext("Postal Code")}>{member.postal_code}</:col>
+    <:col :let={member} label={gettext("City")}>{member.city}</:col>
+    <:col :let={member} label={gettext("Phone Number")}>{member.phone_number}</:col>
+    <:col :let={member} label={gettext("Join Date")}>{member.join_date}</:col>
+
+    <:action :let={member}>
+      <div class="sr-only">
+        <.link navigate={~p"/members/#{member}"}>{gettext("Show")}</.link>
+      </div>
+
+      <.link navigate={~p"/members/#{member}/edit"}>{gettext("Edit")}</.link>
+    </:action>
+
+    <:action :let={member}>
+      <.link
+        phx-click={JS.push("delete", value: %{id: member.id}) |> hide("#row-#{member.id}")}
+        data-confirm={gettext("Are you sure?")}
+      >
+        {gettext("Delete")}
+      </.link>
+    </:action>
+  </.table>
+</Layouts.app>

mix.lock

@@ -17,7 +17,7 @@
   "credo": {:hex, :credo, "1.7.12", "9e3c20463de4b5f3f23721527fcaf16722ec815e70ff6c60b86412c695d426c1", [:mix], [{:bunt, "~> 0.2.1 or ~> 1.0", [hex: :bunt, repo: "hexpm", optional: false]}, {:file_system, "~> 0.2 or ~> 1.0", [hex: :file_system, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "8493d45c656c5427d9c729235b99d498bd133421f3e0a683e5c1b561471291e5"},
   "db_connection": {:hex, :db_connection, "2.8.0", "64fd82cfa6d8e25ec6660cea73e92a4cbc6a18b31343910427b702838c4b33b2", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "008399dae5eee1bf5caa6e86d204dcb44242c82b1ed5e22c881f2c34da201b15"},
   "decimal": {:hex, :decimal, "2.3.0", "3ad6255aa77b4a3c4f818171b12d237500e63525c2fd056699967a3e7ea20f62", [:mix], [], "hexpm", "a4d66355cb29cb47c3cf30e71329e58361cfcb37c34235ef3bf1d7bf3773aeac"},
-  "dns_cluster": {:hex, :dns_cluster, "0.2.0", "aa8eb46e3bd0326bd67b84790c561733b25c5ba2fe3c7e36f28e88f384ebcb33", [:mix], [], "hexpm", "ba6f1893411c69c01b9e8e8f772062535a4cf70f3f35bcc964a324078d8c8240"},
+  "dns_cluster": {:hex, :dns_cluster, "0.1.3", "0bc20a2c88ed6cc494f2964075c359f8c2d00e1bf25518a6a6c7fd277c9b0c66", [:mix], [], "hexpm", "46cb7c4a1b3e52c7ad4cbe33ca5079fbde4840dedeafca2baf77996c2da1bc33"},
   "ecto": {:hex, :ecto, "3.13.2", "7d0c0863f3fc8d71d17fc3ad3b9424beae13f02712ad84191a826c7169484f01", [:mix], [{:decimal, "~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "669d9291370513ff56e7b7e7081b7af3283d02e046cf3d403053c557894a0b3e"},
   "ecto_commons": {:hex, :ecto_commons, "0.3.6", "7b1d9e59396cf8c8cbe5a26d50d03f9b6d0fe6c640210dd503622f276f1e59bb", [:mix], [{:burnex, "~> 3.0", [hex: :burnex, repo: "hexpm", optional: true]}, {:ecto, "~> 3.4", [hex: :ecto, repo: "hexpm", optional: false]}, {:ex_phone_number, "~> 0.2", [hex: :ex_phone_number, repo: "hexpm", optional: false]}, {:luhn, "~> 0.3.0", [hex: :luhn, repo: "hexpm", optional: false]}], "hexpm", "3f12981a1e398f206c5d2014e7b732b7ec91b110b9cb84875cb5b28fc75d7a0a"},
   "ecto_sql": {:hex, :ecto_sql, "3.13.2", "a07d2461d84107b3d037097c822ffdd36ed69d1cf7c0f70e12a3d1decf04e2e1", [:mix], [{:db_connection, "~> 2.4.1 or ~> 2.5", [hex: :db_connection, repo: "hexpm", optional: false]}, {:ecto, "~> 3.13.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:myxql, "~> 0.7", [hex: :myxql, repo: "hexpm", optional: true]}, {:postgrex, "~> 0.19 or ~> 1.0", [hex: :postgrex, repo: "hexpm", optional: true]}, {:tds, "~> 2.1.1 or ~> 2.2", [hex: :tds, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.0 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "539274ab0ecf1a0078a6a72ef3465629e4d6018a3028095dc90f60a19c371717"},

priv/gettext/en/LC_MESSAGES/default.po

@@ -91,7 +91,7 @@ msgstr ""
 #: lib/mv_web/member_live/index.ex:88
 #, elixir-autogen, elixir-format
 msgid "Listing Members"
-msgstr ""
+msgstr "Members"
 
 #: lib/mv_web/member_live/index.ex:11
 #: lib/mv_web/member_live/index.ex:82