add used filtering to ammo type show page

lib/cannery_web/components/ammo_group_card.ex

@@ -32,7 +32,7 @@ defmodule CanneryWeb.Components.AmmoGroupCard do
       <div class="flex flex-col justify-center items-center">
         <span class="rounded-lg title text-lg">
           <%= gettext("Count:") %>
-          <%= @ammo_group.count %>
+          <%= if @ammo_group.count == 0, do: "Empty", else: @ammo_group.count %>
         </span>
 
         <%= if @ammo_group.notes do %>

lib/cannery_web/live/ammo_type_live/show.ex

@@ -9,22 +9,12 @@ defmodule CanneryWeb.AmmoTypeLive.Show do
   alias CanneryWeb.Endpoint
 
   @impl true
-  def mount(_params, _session, socket), do: {:ok, socket}
+  def mount(_params, _session, socket), do: {:ok, socket |> assign(show_used: false)}
 
   @impl true
   def handle_params(%{"id" => id}, _params, %{assigns: %{current_user: current_user}} = socket) do
     ammo_type = Ammo.get_ammo_type!(id, current_user)
-
-    socket =
-      socket
-      |> assign(
-        page_title: page_title(socket.assigns.live_action),
-        ammo_type: ammo_type,
-        ammo_groups: ammo_type |> Ammo.list_ammo_groups_for_type(current_user),
-        avg_cost_per_round: ammo_type |> Ammo.get_average_cost_for_ammo_type!(current_user)
-      )
-
-    {:noreply, socket}
+    {:noreply, socket |> display_ammo_type(ammo_type)}
   end
 
   @impl true
@@ -41,6 +31,34 @@ defmodule CanneryWeb.AmmoTypeLive.Show do
     {:noreply, socket |> put_flash(:info, prompt) |> push_redirect(to: redirect_to)}
   end
 
+  @impl true
+  def handle_event("toggle_show_used", _, %{assigns: %{show_used: show_used}} = socket) do
+    {:noreply, socket |> assign(:show_used, !show_used) |> display_ammo_type()}
+  end
+
+  defp display_ammo_type(
+         %{
+           assigns: %{
+             live_action: live_action,
+             current_user: current_user,
+             show_used: show_used
+           }
+         } = socket,
+         ammo_type
+       ) do
+    socket
+    |> assign(
+      page_title: page_title(live_action),
+      ammo_type: ammo_type,
+      ammo_groups: ammo_type |> Ammo.list_ammo_groups_for_type(current_user, show_used),
+      avg_cost_per_round: ammo_type |> Ammo.get_average_cost_for_ammo_type!(current_user)
+    )
+  end
+
+  defp display_ammo_type(%{assigns: %{ammo_type: ammo_type}} = socket) do
+    socket |> display_ammo_type(ammo_type)
+  end
+
   defp page_title(:show), do: gettext("Show Ammo type")
   defp page_title(:edit), do: gettext("Edit Ammo type")
 end

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

@@ -113,6 +113,14 @@
 
   <hr class="hr" />
 
+  <div class="flex flex-col justify-center items-center">
+    <.toggle_button action="toggle_show_used" value={@show_used}>
+      <span class="title text-lg text-primary-600">
+        <%= gettext("Show used") %>
+      </span>
+    </.toggle_button>
+  </div>
+
   <div>
     <%= if @ammo_groups |> Enum.empty?() do %>
       <h2 class="mx-8 my-4 title text-lg text-primary-600">

lib/cannery_web/views/view_helpers.ex

@@ -5,6 +5,7 @@ defmodule CanneryWeb.ViewHelpers do
   :view`
   """
 
+  import Phoenix.LiveView
   import Phoenix.LiveView.Helpers
 
   @id_length 16
@@ -65,4 +66,43 @@ defmodule CanneryWeb.ViewHelpers do
       if(Application.get_env(:cannery, CanneryWeb.ViewHelpers)[:shibao_mode], do: "q_q", else: "😔")
 
   def display_emoji(other_emoji), do: other_emoji
+
+  @doc """
+  A toggle button element that can be directed to a liveview or a
+  live_component's `handle_event/3`.
+
+  ## Examples
+
+  <.toggle_button action="my_liveview_action" value={@some_value}>
+    <span>Toggle me!</span>
+  </.toggle_button>
+  <.toggle_button action="my_live_component_action" target={@myself} value={@some_value}>
+    <span>Whatever you want</span>
+  </.toggle_button>
+  """
+  def toggle_button(assigns) do
+    assigns = assigns |> assign_new(:id, fn -> assigns.action end)
+
+    ~H"""
+    <label for={@id} class="inline-flex relative items-center cursor-pointer">
+      <input
+        type="checkbox"
+        value={@value}
+        checked={@value}
+        id={@id}
+        class="sr-only peer"
+        {
+          if assigns |> Map.has_key?(:target),
+            do: %{"phx-click" => @action, "phx-value-value" => @value, "phx-target" => @target},
+            else: %{"phx-click" => @action, "phx-value-value" => @value}
+        }
+      />
+      <div class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-1 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-teal-600">
+      </div>
+      <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+        <%= render_slot(@inner_block) %>
+      </span>
+    </label>
+    """
+  end
 end