use table component for ammo group show table

lib/cannery_web/live/ammo_group_live/show.ex

@@ -5,7 +5,7 @@ defmodule CanneryWeb.AmmoGroupLive.Show do
 
   use CanneryWeb, :live_view
   import CanneryWeb.Components.ContainerCard
-  alias Cannery.{ActivityLog, Ammo, Ammo.AmmoGroup, Repo}
+  alias Cannery.{ActivityLog, ActivityLog.ShotGroup, Ammo, Ammo.AmmoGroup, Repo}
   alias CanneryWeb.Endpoint
   alias Phoenix.LiveView.Socket
 
@@ -84,9 +84,64 @@ defmodule CanneryWeb.AmmoGroupLive.Show do
   @spec display_ammo_group(Socket.t(), AmmoGroup.t() | AmmoGroup.id()) :: Socket.t()
   defp display_ammo_group(socket, %AmmoGroup{} = ammo_group) do
     ammo_group = ammo_group |> Repo.preload([:container, :ammo_type, :shot_groups], force: true)
-    socket |> assign(:ammo_group, ammo_group)
+
+    columns = [
+      %{label: gettext("Rounds shot"), key: "count"},
+      %{label: gettext("Notes"), key: "notes"},
+      %{label: gettext("Date"), key: "date"},
+      %{label: nil, key: "actions", sortable: false}
+    ]
+
+    rows =
+      ammo_group.shot_groups
+      |> Enum.map(fn shot_group ->
+        ammo_group |> get_table_row_for_shot_group(shot_group, columns)
+      end)
+
+    socket |> assign(ammo_group: ammo_group, columns: columns, rows: rows)
   end
 
   defp display_ammo_group(%{assigns: %{current_user: current_user}} = socket, id),
     do: display_ammo_group(socket, Ammo.get_ammo_group!(id, current_user))
+
+  @spec get_table_row_for_shot_group(AmmoGroup.t(), ShotGroup.t(), [map()]) :: [map()]
+  defp get_table_row_for_shot_group(ammo_group, %{date: date} = shot_group, columns) do
+    assigns = %{ammo_group: ammo_group, shot_group: shot_group}
+
+    columns
+    |> Enum.into(%{}, fn %{key: key} ->
+      value =
+        case key do
+          "date" ->
+            {date, date |> display_date()}
+
+          "actions" ->
+            ~H"""
+            <div class="px-4 py-2 space-x-4 flex justify-center items-center">
+              <%= live_patch to: Routes.ammo_group_show_path(Endpoint, :edit_shot_group, @ammo_group, shot_group),
+                          class: "text-primary-600 link",
+                          data: [qa: "edit-#{shot_group.id}"] do %>
+                <i class="fa-fw fa-lg fas fa-edit"></i>
+              <% end %>
+
+              <%= link to: "#",
+                    class: "text-primary-600 link",
+                    phx_click: "delete_shot_group",
+                    phx_value_id: shot_group.id,
+                    data: [
+                      confirm: dgettext("prompts", "Are you sure you want to delete this shot record?"),
+                      qa: "delete-#{shot_group.id}"
+                    ] do %>
+                <i class="fa-fw fa-lg fas fa-trash"></i>
+              <% end %>
+            </div>
+            """
+
+          key ->
+            shot_group |> Map.get(key |> String.to_existing_atom())
+        end
+
+      {key, value}
+    end)
+  end
 end

lib/cannery_web/live/ammo_group_live/show.html.heex

@@ -111,63 +111,12 @@
       <%= gettext("Rounds used") %>
     </h1>
 
-    <div class="w-full overflow-x-auto border border-gray-600 rounded-lg shadow-lg bg-black">
+    <.live_component
-      <table class="min-w-full table-auto text-center bg-white">
+      module={CanneryWeb.Components.TableComponent}
-        <thead class="border-b border-primary-600">
+      id="shot_groups_table"
-          <tr>
+      columns={@columns}
-            <th class="p-2">
+      rows={@rows}
-              <%= gettext("Rounds shot") %>
+    />
-            </th>
-            <th class="p-2">
-              <%= gettext("Notes") %>
-            </th>
-            <th class="p-2">
-              <%= gettext("Date") %>
-            </th>
-
-            <th class="p-2"></th>
-          </tr>
-        </thead>
-        <tbody id="shot_groups">
-          <%= for shot_group <- @ammo_group.shot_groups do %>
-            <tr id={"shot_group-#{shot_group.id}"}>
-              <td class="p-2">
-                <%= shot_group.count %>
-              </td>
-
-              <td class="p-2">
-                <%= shot_group.notes %>
-              </td>
-
-              <td class="p-2">
-                <%= shot_group.date |> display_date() %>
-              </td>
-
-              <td class="p-2 w-full h-full space-x-2 flex justify-center items-center">
-                <div class="px-4 py-2 space-x-4 flex justify-center items-center">
-                  <%= live_patch to: Routes.ammo_group_show_path(Endpoint, :edit_shot_group, @ammo_group, shot_group),
-                              class: "text-primary-600 link",
-                              data: [qa: "edit-#{shot_group.id}"] do %>
-                    <i class="fa-fw fa-lg fas fa-edit"></i>
-                  <% end %>
-
-                  <%= link to: "#",
-                        class: "text-primary-600 link",
-                        phx_click: "delete_shot_group",
-                        phx_value_id: shot_group.id,
-                        data: [
-                          confirm: dgettext("prompts", "Are you sure you want to delete this shot record?"),
-                          qa: "delete-#{shot_group.id}"
-                        ] do %>
-                    <i class="fa-fw fa-lg fas fa-trash"></i>
-                  <% end %>
-                </div>
-              </td>
-            </tr>
-          <% end %>
-        </tbody>
-      </table>
-    </div>
   <% end %>
 </div>