add selectable ammo types

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

@@ -17,17 +17,17 @@
       <%= dgettext("actions", "New Container") %>
     </.link>
 
-    <div class="w-full flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 max-w-xl">
+    <div class="w-full flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 max-w-2xl">
       <.form
         :let={f}
         for={%{}}
         as={:search}
         phx-change="search"
         phx-submit="search"
-        class="grow self-stretch flex flex-col items-stretch"
+        class="grow flex items-center"
       >
         <%= text_input(f, :search_term,
-          class: "input input-primary",
+          class: "grow input input-primary",
           value: @search,
           role: "search",
           phx_debounce: 300,
@@ -41,80 +41,22 @@
         </span>
       </.toggle_button>
     </div>
-  <% end %>
 
-  <%= if @containers |> Enum.empty?() do %>
-    <h2 class="title text-xl text-primary-600">
-      <%= gettext("No containers") %>
-      <%= display_emoji("😔") %>
-    </h2>
-  <% else %>
-    <%= if @view_table do %>
-      <.live_component
-        module={CanneryWeb.Components.ContainerTableComponent}
-        id="containers_index_table"
-        action={@live_action}
-        containers={@containers}
-        current_user={@current_user}
-      >
-        <:tag_actions :let={container}>
-          <div class="mx-4 my-2">
-            <.link
-              patch={Routes.container_index_path(Endpoint, :edit_tags, container)}
-              class="text-primary-600 link"
-              aria-label={
-                dgettext("actions", "Tag %{container_name}", container_name: container.name)
-              }
-            >
-              <i class="fa-fw fa-lg fas fa-tags"></i>
-            </.link>
-          </div>
-        </:tag_actions>
-        <:actions :let={container}>
-          <.link
-            patch={Routes.container_index_path(Endpoint, :edit, container)}
-            class="text-primary-600 link"
-            aria-label={
-              dgettext("actions", "Edit %{container_name}", container_name: container.name)
-            }
-          >
-            <i class="fa-fw fa-lg fas fa-edit"></i>
-          </.link>
-
-          <.link
-            patch={Routes.container_index_path(Endpoint, :clone, container)}
-            class="text-primary-600 link"
-            aria-label={
-              dgettext("actions", "Clone %{container_name}", container_name: container.name)
-            }
-          >
-            <i class="fa-fw fa-lg fas fa-copy"></i>
-          </.link>
-
-          <.link
-            href="#"
-            class="text-primary-600 link"
-            phx-click="delete"
-            phx-value-id={container.id}
-            data-confirm={
-              dgettext("prompts", "Are you sure you want to delete %{name}?", name: container.name)
-            }
-            aria-label={
-              dgettext("actions", "Delete %{container_name}", container_name: container.name)
-            }
-          >
-            <i class="fa-fw fa-lg fas fa-trash"></i>
-          </.link>
-        </:actions>
-      </.live_component>
+    <%= if @containers |> Enum.empty?() do %>
+      <h2 class="title text-xl text-primary-600">
+        <%= gettext("No containers") %>
+        <%= display_emoji("😔") %>
+      </h2>
     <% else %>
-      <div class="w-full flex flex-row flex-wrap justify-center items-stretch">
-        <.container_card
-          :for={container <- @containers}
-          container={container}
+      <%= if @view_table do %>
+        <.live_component
+          module={CanneryWeb.Components.ContainerTableComponent}
+          id="containers_index_table"
+          action={@live_action}
+          containers={@containers}
           current_user={@current_user}
         >
-          <:tag_actions>
+          <:tag_actions :let={container}>
             <div class="mx-4 my-2">
               <.link
                 patch={Routes.container_index_path(Endpoint, :edit_tags, container)}
@@ -127,42 +69,104 @@
               </.link>
             </div>
           </:tag_actions>
-          <.link
-            patch={Routes.container_index_path(Endpoint, :edit, container)}
-            class="text-primary-600 link"
-            aria-label={
-              dgettext("actions", "Edit %{container_name}", container_name: container.name)
-            }
-          >
-            <i class="fa-fw fa-lg fas fa-edit"></i>
-          </.link>
+          <:actions :let={container}>
+            <.link
+              patch={Routes.container_index_path(Endpoint, :edit, container)}
+              class="text-primary-600 link"
+              aria-label={
+                dgettext("actions", "Edit %{container_name}", container_name: container.name)
+              }
+            >
+              <i class="fa-fw fa-lg fas fa-edit"></i>
+            </.link>
 
-          <.link
-            patch={Routes.container_index_path(Endpoint, :clone, container)}
-            class="text-primary-600 link"
-            aria-label={
-              dgettext("actions", "Clone %{container_name}", container_name: container.name)
-            }
-          >
-            <i class="fa-fw fa-lg fas fa-copy"></i>
-          </.link>
+            <.link
+              patch={Routes.container_index_path(Endpoint, :clone, container)}
+              class="text-primary-600 link"
+              aria-label={
+                dgettext("actions", "Clone %{container_name}", container_name: container.name)
+              }
+            >
+              <i class="fa-fw fa-lg fas fa-copy"></i>
+            </.link>
 
-          <.link
-            href="#"
-            class="text-primary-600 link"
-            phx-click="delete"
-            phx-value-id={container.id}
-            data-confirm={
-              dgettext("prompts", "Are you sure you want to delete %{name}?", name: container.name)
-            }
-            aria-label={
-              dgettext("actions", "Delete %{container_name}", container_name: container.name)
-            }
+            <.link
+              href="#"
+              class="text-primary-600 link"
+              phx-click="delete"
+              phx-value-id={container.id}
+              data-confirm={
+                dgettext("prompts", "Are you sure you want to delete %{name}?",
+                  name: container.name
+                )
+              }
+              aria-label={
+                dgettext("actions", "Delete %{container_name}", container_name: container.name)
+              }
+            >
+              <i class="fa-fw fa-lg fas fa-trash"></i>
+            </.link>
+          </:actions>
+        </.live_component>
+      <% else %>
+        <div class="w-full flex flex-row flex-wrap justify-center items-stretch">
+          <.container_card
+            :for={container <- @containers}
+            container={container}
+            current_user={@current_user}
           >
-            <i class="fa-fw fa-lg fas fa-trash"></i>
-          </.link>
-        </.container_card>
-      </div>
+            <:tag_actions>
+              <div class="mx-4 my-2">
+                <.link
+                  patch={Routes.container_index_path(Endpoint, :edit_tags, container)}
+                  class="text-primary-600 link"
+                  aria-label={
+                    dgettext("actions", "Tag %{container_name}", container_name: container.name)
+                  }
+                >
+                  <i class="fa-fw fa-lg fas fa-tags"></i>
+                </.link>
+              </div>
+            </:tag_actions>
+            <.link
+              patch={Routes.container_index_path(Endpoint, :edit, container)}
+              class="text-primary-600 link"
+              aria-label={
+                dgettext("actions", "Edit %{container_name}", container_name: container.name)
+              }
+            >
+              <i class="fa-fw fa-lg fas fa-edit"></i>
+            </.link>
+
+            <.link
+              patch={Routes.container_index_path(Endpoint, :clone, container)}
+              class="text-primary-600 link"
+              aria-label={
+                dgettext("actions", "Clone %{container_name}", container_name: container.name)
+              }
+            >
+              <i class="fa-fw fa-lg fas fa-copy"></i>
+            </.link>
+
+            <.link
+              href="#"
+              class="text-primary-600 link"
+              phx-click="delete"
+              phx-value-id={container.id}
+              data-confirm={
+                dgettext("prompts", "Are you sure you want to delete %{name}?",
+                  name: container.name
+                )
+              }
+              aria-label={
+                dgettext("actions", "Delete %{container_name}", container_name: container.name)
+              }
+            >
+              <i class="fa-fw fa-lg fas fa-trash"></i>
+            </.link>
+          </.container_card>
+        </div>
+      <% end %>
     <% end %>
   <% end %>
 </div>

lib/cannery_web/live/container_live/show.ex

@@ -11,7 +11,7 @@ defmodule CanneryWeb.ContainerLive.Show do
 
   @impl true
   def mount(_params, _session, socket),
-    do: {:ok, socket |> assign(show_used: false, view_table: true)}
+    do: {:ok, socket |> assign(type: :all, view_table: true)}
 
   @impl true
   def handle_params(%{"id" => id}, _session, %{assigns: %{current_user: current_user}} = socket) do
@@ -82,22 +82,34 @@ defmodule CanneryWeb.ContainerLive.Show do
     {:noreply, socket}
   end
 
-  def handle_event("toggle_show_used", _params, %{assigns: %{show_used: show_used}} = socket) do
-    {:noreply, socket |> assign(:show_used, !show_used) |> render_container()}
-  end
-
   def handle_event("toggle_table", _params, %{assigns: %{view_table: view_table}} = socket) do
     {:noreply, socket |> assign(:view_table, !view_table) |> render_container()}
   end
 
+  def handle_event("change_type", %{"ammo_type" => %{"type" => "rifle"}}, socket) do
+    {:noreply, socket |> assign(:type, :rifle) |> render_container()}
+  end
+
+  def handle_event("change_type", %{"ammo_type" => %{"type" => "shotgun"}}, socket) do
+    {:noreply, socket |> assign(:type, :shotgun) |> render_container()}
+  end
+
+  def handle_event("change_type", %{"ammo_type" => %{"type" => "pistol"}}, socket) do
+    {:noreply, socket |> assign(:type, :pistol) |> render_container()}
+  end
+
+  def handle_event("change_type", %{"ammo_type" => %{"type" => _all}}, socket) do
+    {:noreply, socket |> assign(:type, :all) |> render_container()}
+  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,
+         %{assigns: %{type: type, live_action: live_action}} = socket,
          id,
          current_user
        ) do
     %{name: container_name} = container = Containers.get_container!(id, current_user)
-    ammo_groups = Ammo.list_ammo_groups_for_container(container, current_user, show_used)
+    ammo_groups = Ammo.list_ammo_groups_for_container(container, type, current_user)
     original_counts = ammo_groups |> Ammo.get_original_counts(current_user)
     cprs = ammo_groups |> Ammo.get_cprs(current_user)
     last_used_dates = ammo_groups |> ActivityLog.get_last_used_dates(current_user)
@@ -113,6 +125,7 @@ defmodule CanneryWeb.ContainerLive.Show do
     |> assign(
       container: container,
       round_count: Ammo.get_round_count_for_container!(container, current_user),
+      ammo_groups_count: Ammo.get_ammo_groups_count_for_container!(container, current_user),
       ammo_groups: ammo_groups,
       original_counts: original_counts,
       cprs: cprs,

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

@@ -18,22 +18,15 @@
     <%= @container.location %>
   </span>
 
-  <%= unless @ammo_groups |> Enum.empty?() do %>
-    <span class="rounded-lg title text-lg">
-      <%= gettext("Packs:") %>
-      <%= @ammo_groups |> Enum.reject(fn %{count: count} -> count in [0, nil] end) |> Enum.count() %>
-    </span>
+  <span class="rounded-lg title text-lg">
+    <%= gettext("Packs:") %>
+    <%= @ammo_groups_count %>
+  </span>
 
-    <span :if={@show_used} class="rounded-lg title text-lg">
-      <%= gettext("Total packs:") %>
-      <%= Enum.count(@ammo_groups) %>
-    </span>
-
-    <span class="rounded-lg title text-lg">
-      <%= gettext("Rounds:") %>
-      <%= @round_count %>
-    </span>
-  <% end %>
+  <span class="rounded-lg title text-lg">
+    <%= gettext("Rounds:") %>
+    <%= @round_count %>
+  </span>
 
   <div class="flex space-x-4 justify-center items-center text-primary-600">
     <.link
@@ -93,11 +86,29 @@
   <hr class="mb-4 hr" />
 
   <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">
-        <%= gettext("Show used") %>
-      </span>
-    </.toggle_button>
+    <.form
+      :let={f}
+      for={%{}}
+      as={:ammo_type}
+      phx-change="change_type"
+      phx-submit="change_type"
+      class="flex items-center"
+    >
+      <%= label(f, :type, gettext("Type"), class: "title text-primary-600 text-lg text-center") %>
+
+      <%= select(
+        f,
+        :type,
+        [
+          {gettext("All"), :all},
+          {gettext("Rifle"), :rifle},
+          {gettext("Shotgun"), :shotgun},
+          {gettext("Pistol"), :pistol}
+        ],
+        class: "mx-2 my-1 min-w-md input input-primary",
+        value: @type
+      ) %>
+    </.form>
 
     <.toggle_button action="toggle_table" value={@view_table}>
       <span class="title text-lg text-primary-600">
@@ -118,7 +129,7 @@
           id="ammo-type-show-table"
           ammo_groups={@ammo_groups}
           current_user={@current_user}
-          show_used={@show_used}
+          show_used={false}
         >
           <:ammo_type :let={%{name: ammo_type_name} = ammo_type}>
             <.link navigate={Routes.ammo_type_show_path(Endpoint, :show, ammo_type)} class="link">