make ammo type show page and container show page also display ammo groups as table

lib/cannery_web/live/container_live/index.ex

@@ -153,12 +153,12 @@ defmodule CanneryWeb.ContainerLive.Index do
     )
   end
 
-  @spec get_row_data_for_container(Container.t(), [map()]) :: [map()]
+  @spec get_row_data_for_container(Container.t(), [map()]) :: map()
   defp get_row_data_for_container(container, columns) do
     container = container |> Repo.preload([:ammo_groups, :tags])
 
     columns
-    |> Enum.into(%{}, fn %{key: key} -> {key, get_value_for_key(key, container)} end)
+    |> Map.new(fn %{key: key} -> {key, get_value_for_key(key, container)} end)
   end
 
   @spec get_value_for_key(atom(), Container.t()) :: any()

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

@@ -26,7 +26,7 @@
     </div>
   <% end %>
 
-  <div class="max-w-full flex flex-row flex-wrap justify-center items-center">
+  <div class="w-full flex flex-row flex-wrap justify-center items-center">
     <%= if @view_table do %>
       <.live_component
         module={CanneryWeb.Components.TableComponent}

lib/cannery_web/live/container_live/show.ex

@@ -11,15 +11,19 @@ defmodule CanneryWeb.ContainerLive.Show do
   alias Phoenix.LiveView.Socket
 
   @impl true
-  def mount(_params, _session, socket), do: {:ok, socket |> assign(show_used: false)}
+  def mount(_params, _session, socket),
+    do: {:ok, socket |> assign(show_used: false, view_table: false)}
 
   @impl true
   def handle_params(
         %{"id" => id},
         _session,
-        %{assigns: %{current_user: current_user}} = socket
+        %{assigns: %{current_user: current_user, live_action: live_action}} = socket
       ) do
-    {:noreply, socket |> render_container(id, current_user)}
+    socket =
+      socket |> assign(view_table: live_action == :table) |> render_container(id, current_user)
+
+    {:noreply, socket}
   end
 
   @impl true
@@ -87,6 +91,20 @@ defmodule CanneryWeb.ContainerLive.Show do
     {:noreply, socket |> assign(:show_used, !show_used) |> render_container()}
   end
 
+  @impl true
+  def handle_event(
+        "toggle_table",
+        _params,
+        %{assigns: %{view_table: view_table, container: container}} = socket
+      ) do
+    new_path =
+      if view_table,
+        do: Routes.container_show_path(Endpoint, :show, container),
+        else: Routes.container_show_path(Endpoint, :table, container)
+
+    {:noreply, socket |> assign(view_table: !view_table) |> push_patch(to: new_path)}
+  end
+
   @spec render_container(Socket.t(), Container.id(), User.t()) :: Socket.t()
   defp render_container(
          %{assigns: %{live_action: live_action, show_used: show_used}} = socket,
@@ -102,7 +120,7 @@ defmodule CanneryWeb.ContainerLive.Show do
 
     page_title =
       case live_action do
-        :show -> gettext("Show %{name}", name: container_name)
+        action when action in [:show, :table] -> container_name
         :edit -> gettext("Edit %{name}", name: container_name)
         :edit_tags -> gettext("Edit %{name} tags", name: container_name)
       end

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

@@ -91,25 +91,47 @@
 
   <hr class="mb-4 hr" />
 
-  <div class="flex flex-col justify-center items-center">
+  <div class="flex justify-center items-center space-x-4">
     <.toggle_button action="toggle_show_used" value={@show_used}>
       <span class="title text-lg text-primary-600">
-        <%= dgettext("actions", "Show used") %>
+        <%= gettext("Show used") %>
+      </span>
+    </.toggle_button>
+
+    <.toggle_button action="toggle_table" value={@view_table}>
+      <span class="title text-lg text-primary-600">
+        <%= gettext("View as table") %>
       </span>
     </.toggle_button>
   </div>
 
-  <div>
+  <div class="w-full p-4">
     <%= if @ammo_groups |> Enum.empty?() do %>
-      <h2 class="mx-8 my-4 title text-lg text-primary-600">
+      <h2 class="mx-4 title text-lg text-primary-600">
         <%= gettext("No ammo in this container") %>
       </h2>
     <% else %>
-      <div class="flex flex-wrap justify-center items-center">
-        <%= for ammo_group <- @ammo_groups do %>
-          <.ammo_group_card ammo_group={ammo_group} />
-        <% end %>
-      </div>
+      <%= if @view_table do %>
+        <.live_component
+          module={CanneryWeb.Components.AmmoGroupTableComponent}
+          id="ammo-type-show-table"
+          ammo_groups={@ammo_groups}
+          current_user={@current_user}
+          show_used={@show_used}
+        >
+          <:ammo_type :let={%{name: ammo_type_name} = ammo_type}>
+            <.link navigate={Routes.ammo_type_show_path(Endpoint, :show, ammo_type)} class="link">
+              <%= ammo_type_name %>
+            </.link>
+          </:ammo_type>
+        </.live_component>
+      <% else %>
+        <div class="flex flex-wrap justify-center items-center">
+          <%= for ammo_group <- @ammo_groups do %>
+            <.ammo_group_card ammo_group={ammo_group} />
+          <% end %>
+        </div>
+      <% end %>
     <% end %>
   </div>
 </div>