use table component for shot group table

lib/cannery_web/live/range_live/index.ex

@@ -77,6 +77,65 @@ defmodule CanneryWeb.RangeLive.Index do
       ActivityLog.list_shot_groups(current_user) |> Repo.preload(ammo_group: :ammo_type)
 
     ammo_groups = Ammo.list_staged_ammo_groups(current_user)
-    socket |> assign(shot_groups: shot_groups, ammo_groups: ammo_groups)
+
+    columns = [
+      %{label: gettext("Ammo"), key: "name"},
+      %{label: gettext("Rounds shot"), key: "count"},
+      %{label: gettext("Notes"), key: "notes"},
+      %{label: gettext("Date"), key: "date"},
+      %{label: nil, key: "actions", sortable: false}
+    ]
+
+    rows =
+      shot_groups
+      |> Enum.map(fn %{date: date} = shot_group ->
+        assigns = %{shot_group: shot_group}
+
+        columns
+        |> Enum.into(%{}, fn %{key: key} ->
+          value =
+            case key do
+              "name" ->
+                {shot_group.ammo_group.ammo_type.name,
+                 live_patch(shot_group.ammo_group.ammo_type.name,
+                   to: Routes.ammo_group_show_path(Endpoint, :show, shot_group.ammo_group),
+                   class: "link"
+                 )}
+
+              "date" ->
+                date |> display_date()
+
+              "actions" ->
+                ~H"""
+                <div class="px-4 py-2 space-x-4 flex justify-center items-center">
+                  <%= live_patch to: Routes.range_index_path(Endpoint, :edit, 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",
+                       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>
+                """
+
+              value ->
+                shot_group |> Map.get(key |> String.to_existing_atom())
+            end
+
+          {key, value}
+        end)
+      end)
+
+    socket
+    |> assign(ammo_groups: ammo_groups, columns: columns, rows: rows, shot_groups: shot_groups)
   end
 end

lib/cannery_web/live/range_live/index.html.heex

@@ -53,70 +53,12 @@
       <%= gettext("Shot log") %>
     </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("Ammo") %>
+    />
-            </th>
-            <th class="p-2">
-              <%= 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 <- @shot_groups do %>
-            <tr id={"shot_group-#{shot_group.id}"}>
-              <td class="p-2">
-                <%= live_patch(shot_group.ammo_group.ammo_type.name,
-                  to: Routes.ammo_group_show_path(Endpoint, :show, shot_group.ammo_group),
-                  class: "link"
-                ) %>
-              </td>
-              <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.range_index_path(Endpoint, :edit, 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",
-                       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>