use new table component for ammo type index table

lib/cannery_web/live/ammo_type_live/index.ex

@@ -46,37 +46,107 @@ defmodule CanneryWeb.AmmoTypeLive.Index do
   defp list_ammo_types(%{assigns: %{current_user: current_user}} = socket) do
     ammo_types = Ammo.list_ammo_types(current_user)
 
-    columns_to_display =
+    columns =
       [
-        {gettext("Name"), :name, :string},
+        %{label: gettext("Name"), key: "name", type: :string},
-        {gettext("Bullet type"), :bullet_type, :string},
+        %{label: gettext("Bullet type"), key: "bullet_type", type: :string},
-        {gettext("Bullet core"), :bullet_core, :string},
+        %{label: gettext("Bullet core"), key: "bullet_core", type: :string},
-        {gettext("Cartridge"), :cartridge, :string},
+        %{label: gettext("Cartridge"), key: "cartridge", type: :string},
-        {gettext("Caliber"), :caliber, :string},
+        %{label: gettext("Caliber"), key: "caliber", type: :string},
-        {gettext("Case material"), :case_material, :string},
+        %{label: gettext("Case material"), key: "case_material", type: :string},
-        {gettext("Jacket type"), :jacket_type, :string},
+        %{label: gettext("Jacket type"), key: "jacket_type", type: :string},
-        {gettext("Muzzle velocity"), :muzzle_velocity, :string},
+        %{label: gettext("Muzzle velocity"), key: "muzzle_velocity", type: :string},
-        {gettext("Powder type"), :powder_type, :string},
+        %{label: gettext("Powder type"), key: "powder_type", type: :string},
-        {gettext("Powder grains per charge"), :powder_grains_per_charge, :string},
+        %{
-        {gettext("Grains"), :grains, :string},
+          label: gettext("Powder grains per charge"),
-        {gettext("Pressure"), :pressure, :string},
+          key: "powder_grains_per_charge",
-        {gettext("Primer type"), :primer_type, :string},
+          type: :string
-        {gettext("Firing type"), :firing_type, :string},
+        },
-        {gettext("Tracer"), :tracer, :boolean},
+        %{label: gettext("Grains"), key: "grains", type: :string},
-        {gettext("Incendiary"), :incendiary, :boolean},
+        %{label: gettext("Pressure"), key: "pressure", type: :string},
-        {gettext("Blank"), :blank, :boolean},
+        %{label: gettext("Primer type"), key: "primer_type", type: :string},
-        {gettext("Corrosive"), :corrosive, :boolean},
+        %{label: gettext("Firing type"), key: "firing_type", type: :string},
-        {gettext("Manufacturer"), :manufacturer, :string},
+        %{label: gettext("Tracer"), key: "tracer", type: :boolean},
-        {gettext("UPC"), :upc, :string}
+        %{label: gettext("Incendiary"), key: "incendiary", type: :boolean},
+        %{label: gettext("Blank"), key: "blank", type: :boolean},
+        %{label: gettext("Corrosive"), key: "corrosive", type: :boolean},
+        %{label: gettext("Manufacturer"), key: "manufacturer", type: :string},
+        %{label: gettext("UPC"), key: "upc", type: :string}
       ]
-      |> Enum.filter(fn {_label, field, type} ->
+      |> Enum.filter(fn %{key: key, type: type} ->
         # remove columns if all values match defaults
         default_value = if type == :boolean, do: false, else: nil
 
         ammo_types
-        |> Enum.any?(fn ammo_type -> not (ammo_type |> Map.get(field) == default_value) end)
+        |> Enum.any?(fn ammo_type ->
+          not (ammo_type |> Map.get(key |> String.to_existing_atom()) == default_value)
+        end)
       end)
+      |> Kernel.++([
+        %{label: gettext("Total # of rounds"), key: "round_count", type: :round_count},
+        %{
+          label: nil,
+          key: "actions",
+          class: "px-4 py-2 space-x-4 flex justify-center items-center",
+          type: :actions,
+          sortable: false
+        }
+      ])
 
-    socket |> assign(ammo_types: ammo_types, columns_to_display: columns_to_display)
+    rows =
+      ammo_types
+      |> Enum.map(fn ammo_type -> ammo_type |> get_ammo_type_values(columns, current_user) end)
+
+    socket |> assign(columns: columns, rows: rows)
+  end
+
+  defp get_ammo_type_values(ammo_type, columns, current_user) do
+    assigns = %{ammo_type: ammo_type}
+
+    columns
+    |> Enum.into(%{}, fn %{key: key, type: type} ->
+      value =
+        case type do
+          :boolean ->
+            ammo_type |> Map.get(key |> String.to_existing_atom()) |> humanize()
+
+          :round_count ->
+            ammo_type |> Ammo.get_round_count_for_ammo_type(current_user)
+
+          :actions ->
+            ~H"""
+            <%= live_redirect to: Routes.ammo_type_show_path(Endpoint, :show, ammo_type),
+                          class: "text-primary-600 link",
+                          data: [qa: "view-#{ammo_type.id}"] do %>
+              <i class="fa-fw fa-lg fas fa-eye"></i>
+            <% end %>
+
+            <%= live_patch to: Routes.ammo_type_index_path(Endpoint, :edit, ammo_type),
+                        class: "text-primary-600 link",
+                        data: [qa: "edit-#{ammo_type.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: ammo_type.id,
+                  data: [
+                    confirm: dgettext("prompts", "Are you sure you want to delete this ammo?"),
+                    qa: "delete-#{ammo_type.id}"
+                  ] do %>
+              <i class="fa-lg fas fa-trash"></i>
+            <% end %>
+            """
+
+          nil ->
+            nil
+
+          _other ->
+            ammo_type |> Map.get(key |> String.to_existing_atom())
+        end
+
+      {key, value}
+    end)
   end
 end

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

@@ -3,7 +3,7 @@
     <%= gettext("Ammo Types") %>
   </h1>
 
-  <%= if @ammo_types |> Enum.empty?() do %>
+  <%= if @rows |> Enum.empty?() do %>
     <h2 class="title text-xl text-primary-600">
       <%= gettext("No Ammo Types") %>
       <%= display_emoji("😔") %>
@@ -19,71 +19,13 @@
       class: "btn btn-primary"
     ) %>
 
-    <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="ammo_types_index"
-          <tr>
+      action={@live_action}
-            <%= for {field_name, _field, _type} <- @columns_to_display do %>
+      columns={@columns}
-              <th class="p-2">
+      rows={@rows}
-                <%= field_name %>
+    />
-              </th>
-            <% end %>
-            <th class="p-2">
-              <%= gettext("Total # of rounds") %>
-            </th>
-
-            <th class="p-2"></th>
-          </tr>
-        </thead>
-        <tbody>
-          <%= for ammo_type <- @ammo_types do %>
-            <tr id={"ammo_type-#{ammo_type.id}"}>
-              <%= for {_label, field, type} <- @columns_to_display do %>
-                <td class="p-2">
-                  <%= case type do %>
-                    <% :boolean -> %>
-                      <%= ammo_type |> Map.get(field) |> humanize() %>
-                    <% _other -> %>
-                      <%= ammo_type |> Map.get(field) %>
-                  <% end %>
-                </td>
-              <% end %>
-
-              <td class="p-2">
-                <%= ammo_type |> Ammo.get_round_count_for_ammo_type(@current_user) %>
-              </td>
-
-              <td class="p-2">
-                <div class="px-4 py-2 space-x-4 flex justify-center items-center">
-                  <%= live_redirect to: Routes.ammo_type_show_path(Endpoint, :show, ammo_type),
-                                class: "text-primary-600 link",
-                                data: [qa: "view-#{ammo_type.id}"] do %>
-                    <i class="fa-fw fa-lg fas fa-eye"></i>
-                  <% end %>
-
-                  <%= live_patch to: Routes.ammo_type_index_path(Endpoint, :edit, ammo_type),
-                             class: "text-primary-600 link",
-                             data: [qa: "edit-#{ammo_type.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: ammo_type.id,
-                       data: [
-                         confirm: dgettext("prompts", "Are you sure you want to delete this ammo?"),
-                         qa: "delete-#{ammo_type.id}"
-                       ] do %>
-                    <i class="fa-lg fas fa-trash"></i>
-                  <% end %>
-                </div>
-              </td>
-            </tr>
-          <% end %>
-        </tbody>
-      </table>
-    </div>
   <% end %>
 </div>