use table component for move ammo group component

lib/cannery_web/components/move_ammo_group_component.ex

@@ -4,7 +4,7 @@ defmodule CanneryWeb.Components.MoveAmmoGroupComponent do
   """
 
   use CanneryWeb, :live_component
-  alias Cannery.{Accounts.User, Ammo, Ammo.AmmoGroup, Containers}
+  alias Cannery.{Accounts.User, Ammo, Ammo.AmmoGroup, Containers, Containers.Container}
   alias CanneryWeb.Endpoint
   alias Phoenix.LiveView.Socket
 
@@ -28,7 +28,12 @@ defmodule CanneryWeb.Components.MoveAmmoGroupComponent do
       Containers.list_containers(current_user)
       |> Enum.reject(fn %{id: id} -> id == container_id end)
 
-    {:ok, socket |> assign(assigns) |> assign(changeset: changeset, containers: containers)}
+    socket =
+      socket
+      |> assign(assigns)
+      |> assign(changeset: changeset, containers: containers)
+
+    {:ok, socket}
   end
 
   @impl true
@@ -55,4 +60,82 @@ defmodule CanneryWeb.Components.MoveAmmoGroupComponent do
 
     {:noreply, socket}
   end
+
+  @impl true
+  def render(%{containers: containers} = assigns) do
+    columns = [
+      %{label: gettext("Container"), key: "name"},
+      %{label: gettext("Type"), key: "type"},
+      %{label: gettext("Location"), key: "location"},
+      %{
+        label: nil,
+        key: "actions",
+        sortable: false,
+        class: "px-4 py-2 space-x-4 flex justify-center items-center"
+      }
+    ]
+
+    rows = containers |> get_rows_for_containers(assigns, columns)
+
+    assigns = assigns |> Map.merge(%{columns: columns, rows: rows})
+
+    ~H"""
+    <div class="w-full flex flex-col space-y-8 justify-center items-center">
+      <h2 class="mb-8 text-center title text-xl text-primary-600">
+        <%= gettext("Move ammo") %>
+      </h2>
+
+      <%= if @containers |> Enum.empty?() do %>
+        <h2 class="title text-xl text-primary-600">
+          <%= gettext("No other containers") %>
+          <%= display_emoji("😔") %>
+        </h2>
+
+        <%= live_patch(dgettext("actions", "Add another container!"),
+          to: Routes.container_index_path(Endpoint, :new),
+          class: "btn btn-primary"
+        ) %>
+      <% else %>
+        <.live_component
+          module={CanneryWeb.Components.TableComponent}
+          id="move_ammo_group_table"
+          columns={@columns}
+          rows={@rows}
+        />
+      <% end %>
+    </div>
+    """
+  end
+
+  @spec get_rows_for_containers([Container.t()], map(), [map()]) :: [map()]
+  defp get_rows_for_containers(containers, assigns, columns) do
+    containers
+    |> Enum.map(fn container ->
+      assigns = assigns |> Map.put(:container, container)
+
+      columns
+      |> Enum.into(%{}, fn %{key: key} ->
+        value =
+          case key do
+            "actions" ->
+              ~H"""
+              <button
+                type="button"
+                class="btn btn-primary"
+                phx-click="move"
+                phx-target={@myself}
+                phx-value-container_id={container.id}
+              >
+                <%= dgettext("actions", "Select") %>
+              </button>
+              """
+
+            key ->
+              container |> Map.get(key |> String.to_existing_atom())
+          end
+
+        {key, value}
+      end)
+    end)
+  end
 end

lib/cannery_web/components/move_ammo_group_component.html.heex

@@ -1,70 +0,0 @@
-<div class="w-full flex flex-col space-y-8 justify-center items-center">
-  <h2 class="mb-8 text-center title text-xl text-primary-600">
-    <%= gettext("Move ammo") %>
-  </h2>
-
-  <%= if @containers |> Enum.empty?() do %>
-    <h2 class="title text-xl text-primary-600">
-      <%= gettext("No other containers") %>
-      <%= display_emoji("😔") %>
-    </h2>
-
-    <%= live_patch(dgettext("actions", "Add another container!"),
-      to: Routes.container_index_path(Endpoint, :new),
-      class: "btn btn-primary"
-    ) %>
-  <% else %>
-    <div class="w-full overflow-x-auto border border-gray-600 rounded-lg shadow-lg bg-black">
-      <table class="min-w-full table-auto text-center bg-white">
-        <thead class="border-b border-primary-600">
-          <tr>
-            <th class="p-2">
-              <%= gettext("Container") %>
-            </th>
-
-            <th class="p-2">
-              <%= gettext("Type") %>
-            </th>
-
-            <th class="p-2">
-              <%= gettext("Location") %>
-            </th>
-
-            <th class="p-2"></th>
-          </tr>
-        </thead>
-        <tbody id="containers">
-          <%= for container <- @containers do %>
-            <tr id={"container-#{container.id}"}>
-              <td class="p-2">
-                <%= container.name %>
-              </td>
-
-              <td class="p-2">
-                <%= container.type %>
-              </td>
-
-              <td class="p-2">
-                <%= container.location %>
-              </td>
-
-              <td class="p-2">
-                <div class="px-4 py-2 space-x-4 flex justify-center items-center">
-                  <button
-                    type="button"
-                    class="btn btn-primary"
-                    phx-click="move"
-                    phx-target={@myself}
-                    phx-value-container_id={container.id}
-                  >
-                    <%= dgettext("actions", "Select") %>
-                  </button>
-                </div>
-              </td>
-            </tr>
-          <% end %>
-        </tbody>
-      </table>
-    </div>
-  <% end %>
-</div>