style app, use components for cards

lib/cannery_web/live/ammo_group_live/ammo_group_card.ex

@@ -0,0 +1,46 @@
+defmodule CanneryWeb.AmmoGroupLive.AmmoGroupCard do
+  @moduledoc """
+  Display card for an ammo group
+  """
+
+  use CanneryWeb, :component
+  alias Cannery.Repo
+  alias CanneryWeb.Endpoint
+
+  def ammo_group_card(assigns) do
+    assigns = assigns |> assign(:ammo_group, assigns.ammo_group |> Repo.preload(:ammo_type))
+
+    ~H"""
+    <div
+      id={"ammo_group-#{@ammo_group.id}"}
+      class="px-8 py-4 flex flex-col justify-center items-center
+            border border-gray-400 rounded-lg shadow-lg hover:shadow-md"
+    >
+      <%= live_redirect to: Routes.ammo_group_show_path(Endpoint, :show, @ammo_group),
+                    class: "mb-2 link" do %>
+        <h1 class="title text-xl title-primary-500">
+          <%= @ammo_group.ammo_type.name %>
+        </h1>
+      <% end %>
+
+      <div class="flex flex-col justify-center items-center">
+        <span class="rounded-lg title text-lg">
+          Count: <%= @ammo_group.count %>
+        </span>
+
+        <%= if @ammo_group.notes do %>
+          <span class="rounded-lg title text-lg">
+            Notes: <%= @ammo_group.notes %>
+          </span>
+        <% end %>
+
+        <%= if @ammo_group.price_paid do %>
+          <span class="rounded-lg title text-lg">
+            Price paid: $ <%= @ammo_group.price_paid |> :erlang.float_to_binary(decimals: 2) %>
+          </span>
+        <% end %>
+      </div>
+    </div>
+    """
+  end
+end

lib/cannery_web/live/ammo_group_live/form_component.ex

@@ -5,20 +5,25 @@ defmodule CanneryWeb.AmmoGroupLive.FormComponent do
 
   use CanneryWeb, :live_component
 
-  alias Cannery.Ammo
+  alias Cannery.{Ammo, Containers}
+  alias Cannery.{Ammo.AmmoType, Containers.Container}
+  alias Ecto.Changeset
 
   @impl true
   def update(%{ammo_group: ammo_group} = assigns, socket) do
-    changeset = Ammo.change_ammo_group(ammo_group)
+    socket = socket |> assign(assigns)
 
-    {:ok,
+    changeset = Ammo.change_ammo_group(ammo_group)
-     socket
+    containers = Containers.list_containers(socket.assigns.current_user)
-     |> assign(assigns)
+    ammo_types = Ammo.list_ammo_types()
-     |> assign(:changeset, changeset)}
+
+    {:ok, socket |> assign(changeset: changeset, containers: containers, ammo_types: ammo_types)}
   end
 
   @impl true
   def handle_event("validate", %{"ammo_group" => ammo_group_params}, socket) do
+    ammo_group_params = ammo_group_params |> Map.put("user_id", socket.assigns.current_user.id)
+
     changeset =
       socket.assigns.ammo_group
       |> Ammo.change_ammo_group(ammo_group_params)
@@ -28,6 +33,7 @@ defmodule CanneryWeb.AmmoGroupLive.FormComponent do
   end
 
   def handle_event("save", %{"ammo_group" => ammo_group_params}, socket) do
+    ammo_group_params = ammo_group_params |> Map.put("user_id", socket.assigns.current_user.id)
     save_ammo_group(socket, socket.assigns.action, ammo_group_params)
   end
 
@@ -35,7 +41,7 @@ defmodule CanneryWeb.AmmoGroupLive.FormComponent do
   def render(assigns) do
     ~H"""
     <div>
-      <h2>
+      <h2 class="text-center title text-xl text-primary-500">
         <%= @title %>
       </h2>
       <.form
@@ -45,31 +51,84 @@ defmodule CanneryWeb.AmmoGroupLive.FormComponent do
         phx-target={@myself}
         phx-change="validate"
         phx-submit="save"
+        class="grid grid-cols-3 justify-center items-center space-y-4"
       >
-        <%= label(f, :count, class: "title text-lg text-primary-500") %>
+        <%= label(f, :count, class: "mr-4 title text-lg text-primary-500") %>
-        <%= number_input(f, :count) %>
+        <%= number_input(f, :count,
-        <%= error_tag(f, :count) %>
+          class: "text-center col-span-2 input input-primary",
-        <%= label(f, :price_paid, class: "title text-lg text-primary-500") %>
+          min: 1
-        <%= number_input(f, :price_paid, step: "any") %>
+        ) %>
-        <%= error_tag(f, :price_paid) %>
+        <div class="col-span-3 text-center">
-        <%= label(f, :notes, class: "title text-lg text-primary-500") %>
+          <%= error_tag(f, :count) %>
-        <%= textarea(f, :notes, class: "input") %>
+        </div>
-        <%= error_tag(f, :notes) %>
+
-        <%= submit("Save", phx_disable_with: "Saving...") %>
+        <%= label(f, :price_paid, class: "mr-4 title text-lg text-primary-500") %>
+        <%= number_input(f, :price_paid,
+          step: "0.01",
+          class: "text-center col-span-2 input input-primary"
+        ) %>
+        <div class="col-span-3 text-center">
+          <%= error_tag(f, :price_paid) %>
+        </div>
+
+        <%= label(f, :notes, class: "mr-4 title text-lg text-primary-500") %>
+        <%= textarea(f, :notes,
+          class: "text-center col-span-2 input input-primary",
+          phx_hook: "MaintainAttrs"
+        ) %>
+        <div class="col-span-3 text-center">
+          <%= error_tag(f, :notes) %>
+        </div>
+
+        <%= label(f, :ammo_type_id, class: "mr-4 title text-lg text-primary-500") %>
+        <%= select(f, :ammo_type_id, ammo_type_options(@ammo_types),
+          class: "text-center col-span-2 input input-primary"
+        ) %>
+        <div class="col-span-3 text-center">
+          <%= error_tag(f, :ammo_type_id) %>
+        </div>
+
+        <%= label(f, :container, class: "mr-4 title text-lg text-primary-500") %>
+        <%= select(f, :container_id, container_options(@containers),
+          class: "text-center col-span-2 input input-primary"
+        ) %>
+        <div class="col-span-3 text-center">
+          <%= error_tag(f, :container_id) %>
+        </div>
+
+        <%= submit("Save",
+          phx_disable_with: "Saving...",
+          class: "mx-auto col-span-3 btn btn-primary"
+        ) %>
       </.form>
     </div>
     """
   end
 
+  # HTML Helpers
+  @spec container_options([Container.t()]) :: [{String.t(), Container.id()}]
+  defp container_options(containers) do
+    containers |> Enum.map(fn container -> {container.name, container.id} end)
+  end
+
+  @spec ammo_type_options([AmmoType.t()]) :: [{String.t(), AmmoType.id()}]
+  defp ammo_type_options(ammo_types) do
+    ammo_types |> Enum.map(fn ammo_type -> {ammo_type.name, ammo_type.id} end)
+  end
+
+  # Save Helpers
+
   defp save_ammo_group(socket, :edit, ammo_group_params) do
-    case Ammo.update_ammo_group(socket.assigns.ammo_group, ammo_group_params) do
+    socket.assigns.ammo_group
+    |> Ammo.update_ammo_group(ammo_group_params)
+    |> case do
       {:ok, _ammo_group} ->
         {:noreply,
          socket
          |> put_flash(:info, "Ammo group updated successfully")
          |> push_redirect(to: socket.assigns.return_to)}
 
-      {:error, %Ecto.Changeset{} = changeset} ->
+      {:error, %Changeset{} = changeset} ->
         {:noreply, socket |> assign(:changeset, changeset)}
     end
   end
@@ -82,7 +141,7 @@ defmodule CanneryWeb.AmmoGroupLive.FormComponent do
          |> put_flash(:info, "Ammo group created successfully")
          |> push_redirect(to: socket.assigns.return_to)}
 
-      {:error, %Ecto.Changeset{} = changeset} ->
+      {:error, %Changeset{} = changeset} ->
         {:noreply, socket |> assign(changeset: changeset)}
     end
   end

lib/cannery_web/live/ammo_group_live/index.ex

@@ -26,7 +26,7 @@ defmodule CanneryWeb.AmmoGroupLive.Index do
 
   defp apply_action(socket, :new, _params) do
     socket
-    |> assign(:page_title, "New Ammo group")
+    |> assign(:page_title, "Add Ammo")
     |> assign(:ammo_group, %AmmoGroup{})
   end
 

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

@@ -37,32 +37,34 @@
         </thead>
         <tbody id="ammo_groups">
           <%= for ammo_group <- @ammo_groups do %>
-            <tr id={ammo_group-"#{ammo_group.id}"}>
+            <tr id={"ammo_group-#{ammo_group.id}"}>
               <td class="p-2">
                 <%= ammo_group.count %>
               </td>
+
               <td class="p-2">
-                <%= ammo_group.price_paid %>
+                $ <%= ammo_group.price_paid |> :erlang.float_to_binary(decimals: 2) %>
               </td>
+
               <td class="p-2">
                 <%= ammo_group.notes %>
               </td>
 
-              <td class="p-2 w-full h-full space-y-2 flex flex-col justify-center items-center">
+              <td class="p-2 w-full h-full space-x-2 flex justify-center items-center">
-                <span>
+                <%= live_redirect("View", to: Routes.ammo_group_show_path(@socket, :show, ammo_group)) %>
-                  <%= live_redirect("Show", to: Routes.ammo_group_show_path(@socket, :show, ammo_group)) %>
+
-                </span>
+                <%= live_patch to: Routes.ammo_group_index_path(@socket, :edit, ammo_group),
-                <span>
+                           class: "text-primary-500 link" do %>
-                  <%= live_patch("Edit", to: Routes.ammo_group_index_path(@socket, :edit, ammo_group)) %>
+                  <i class="fa-fw fa-lg fas fa-edit"></i>
-                </span>
+                <% end %>
-                <span>
+
-                  <%= link("Delete",
+                <%= link to: "#",
-                    to: "#",
+                     class: "text-primary-500 link",
-                    phx_click: "delete",
+                     phx_click: "delete",
-                    phx_value_id: ammo_group.id,
+                     phx_value_id: ammo_group.id,
-                    data: [confirm: "Are you sure?"]
+                     data: [confirm: "Are you sure you want to delete this ammo?"] do %>
-                  ) %>
+                  <i class="fa-fw fa-lg fas fa-trash"></i>
-                </span>
+                <% end %>
               </td>
             </tr>
           <% end %>
@@ -78,6 +80,7 @@
     title: @page_title,
     action: @live_action,
     ammo_group: @ammo_group,
-    return_to: Routes.ammo_group_index_path(@socket, :index)
+    return_to: Routes.ammo_group_index_path(@socket, :index),
+    current_user: @current_user
   ) %>
 <% end %>

lib/cannery_web/live/ammo_group_live/show.ex

@@ -4,20 +4,32 @@ defmodule CanneryWeb.AmmoGroupLive.Show do
   """
 
   use CanneryWeb, :live_view
-
+  import CanneryWeb.ContainerLive.ContainerCard
-  alias Cannery.Ammo
+  alias Cannery.{Ammo, Repo}
 
   @impl true
   def mount(_params, session, socket) do
-    {:ok, socket |> assign_defaults(session)}
+    socket = socket |> assign_defaults(session)
+
+    {:ok, socket}
   end
 
   @impl true
   def handle_params(%{"id" => id}, _, socket) do
-    {:noreply,
+    socket =
-     socket
+      socket
-     |> assign(:page_title, page_title(socket.assigns.live_action))
+      |> assign(
-     |> assign(:ammo_group, Ammo.get_ammo_group!(id))}
+        page_title: page_title(socket.assigns.live_action),
+        ammo_group: Ammo.get_ammo_group!(id) |> Repo.preload([:container, :ammo_type])
+      )
+
+    {:noreply, socket}
+  end
+
+  @impl true
+  def handle_event("delete", _, socket) do
+    socket.assigns.ammo_group |> Ammo.delete_ammo_group!()
+    {:noreply, socket |> push_redirect(to: Routes.ammo_group_index_path(socket, :index))}
   end
 
   defp page_title(:show), do: "Show Ammo group"

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

@@ -0,0 +1,62 @@
+<div class="mx-auto space-y-4 max-w-3xl flex flex-col justify-center items-center">
+  <h1 class="title text-2xl title-primary-500">
+    <%= @ammo_group.ammo_type.name %>
+  </h1>
+
+  <div class="space-y-2 flex flex-col justify-center items-center">
+    <span class="rounded-lg title text-lg">
+      Count: <%= @ammo_group.count %>
+    </span>
+
+    <%= if @ammo_group.notes do %>
+      <span class="rounded-lg title text-lg">
+        Notes: <%= @ammo_group.notes %>
+      </span>
+    <% end %>
+
+    <%= if @ammo_group.price_paid do %>
+      <span class="rounded-lg title text-lg">
+        Price paid: $ <%= @ammo_group.price_paid |> :erlang.float_to_binary(decimals: 2) %>
+      </span>
+    <% end %>
+  </div>
+
+  <div class="flex space-x-4 justify-center items-center text-primary-500">
+    <%= live_patch to: Routes.ammo_group_show_path(@socket, :edit, @ammo_group),
+               class: "text-primary-500 link" do %>
+      <i class="fa-fw fa-lg fas fa-edit"></i>
+    <% end %>
+
+    <%= link to: "#",
+         class: "text-primary-500 link",
+         phx_click: "delete",
+         data: [confirm: "Are you sure you want to delete this ammo?"] do %>
+      <i class="fa-fw fa-lg fas fa-trash"></i>
+    <% end %>
+  </div>
+
+  <hr class="mb-4 w-full">
+
+  <div>
+    <%= if @ammo_group.container do %>
+      <h1 class="mb-4 px-4 py-2 text-center rounded-lg title text-xl">
+        Stored in
+      </h1>
+
+      <.container_card container={@ammo_group.container} />
+    <% else %>
+      This ammo group is not in a container
+    <% end %>
+  </div>
+</div>
+
+<%= if @live_action in [:edit] do %>
+  <%= live_modal(CanneryWeb.AmmoGroupLive.FormComponent,
+    id: @ammo_group.id,
+    title: @page_title,
+    action: @live_action,
+    ammo_group: @ammo_group,
+    return_to: Routes.ammo_group_show_path(@socket, :show, @ammo_group),
+    current_user: @current_user
+  ) %>
+<% end %>

lib/cannery_web/live/ammo_group_live/show.html.leex

@@ -1,32 +0,0 @@
-<h1>Show Ammo group</h1>
-
-<%= if @live_action in [:edit] do %>
-  <%= live_modal CanneryWeb.AmmoGroupLive.FormComponent,
-    id: @ammo_group.id,
-    title: @page_title,
-    action: @live_action,
-    ammo_group: @ammo_group,
-    return_to: Routes.ammo_group_show_path(@socket, :show, @ammo_group) %>
-<% end %>
-
-<ul>
-
-  <li>
-    <strong>Count:</strong>
-    <%= @ammo_group.count %>
-  </li>
-
-  <li>
-    <strong>Price paid:</strong>
-    <%= @ammo_group.price_paid %>
-  </li>
-
-  <li>
-    <strong>Notes:</strong>
-    <%= @ammo_group.notes %>
-  </li>
-
-</ul>
-
-<span><%= live_patch "Edit", to: Routes.ammo_group_show_path(@socket, :edit, @ammo_group), class: "button" %></span>
-<span><%= live_redirect "Back", to: Routes.ammo_group_index_path(@socket, :index) %></span>

lib/cannery_web/live/ammo_type_live/ammo_type_card.ex

@@ -0,0 +1,46 @@
+defmodule CanneryWeb.AmmoTypeLive.AmmoTypeCard do
+  @moduledoc """
+  Display card for an ammo type
+  """
+
+  use CanneryWeb, :component
+  alias Cannery.Repo
+  alias CanneryWeb.Endpoint
+
+  def ammo_group_card(assigns) do
+    assigns = assigns |> assign(:ammo_group, assigns.ammo_group |> Repo.preload(:ammo_type))
+
+    ~H"""
+    <div
+      id={"ammo_group-#{@ammo_group.id}"}
+      class="px-8 py-4 flex flex-col justify-center items-center
+            border border-gray-400 rounded-lg shadow-lg hover:shadow-md"
+    >
+      <%= live_redirect to: Routes.ammo_group_show_path(Endpoint, :show, @ammo_group),
+                    class: "mb-2 link" do %>
+        <h1 class="title text-xl title-primary-500">
+          <%= @ammo_group.ammo_type.name %>
+        </h1>
+      <% end %>
+
+      <div class="flex flex-col justify-center items-center">
+        <span class="rounded-lg title text-lg">
+          Count: <%= @ammo_group.count %>
+        </span>
+
+        <%= if @ammo_group.notes do %>
+          <span class="rounded-lg title text-lg">
+            Notes: <%= @ammo_group.notes %>
+          </span>
+        <% end %>
+
+        <%= if @ammo_group.price_paid do %>
+          <span class="rounded-lg title text-lg">
+            Price paid: $ <%= @ammo_group.price_paid |> :erlang.float_to_binary(decimals: 2) %>
+          </span>
+        <% end %>
+      </div>
+    </div>
+    """
+  end
+end

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

@@ -60,21 +60,21 @@
                 <%= ammo_type.manufacturer %>
               </td>
 
-              <td class="p-2 w-full h-full space-y-2 flex flex-col justify-center items-center">
+              <td class="p-2 w-full h-full space-x-2 flex justify-center items-center">
-                <span>
+                <%= live_redirect("View", to: Routes.ammo_type_show_path(@socket, :show, ammo_type)) %>
-                  <%= live_redirect("Show", to: Routes.ammo_type_show_path(@socket, :show, ammo_type)) %>
+
-                </span>
+                <%= live_patch to: Routes.ammo_type_index_path(@socket, :edit, ammo_type),
-                <span>
+                           class: "text-primary-500 link" do %>
-                  <%= live_patch("Edit", to: Routes.ammo_type_index_path(@socket, :edit, ammo_type)) %>
+                  <i class="fa-fw fa-lg fas fa-edit"></i>
-                </span>
+                <% end %>
-                <span>
+
-                  <%= link("Delete",
+                <%= link to: "#",
-                    to: "#",
+                     class: "text-primary-500 link",
-                    phx_click: "delete",
+                     phx_click: "delete",
-                    phx_value_id: ammo_type.id,
+                     phx_value_id: ammo_type.id,
-                    data: [confirm: "Are you sure?"]
+                     data: [confirm: "Are you sure you want to delete this ammo?"] do %>
-                  ) %>
+                  <i class="fa-fw fa-lg fas fa-trash"></i>
-                </span>
+                <% end %>
               </td>
             </tr>
           <% end %>

lib/cannery_web/live/ammo_type_live/show.ex

@@ -4,8 +4,8 @@ defmodule CanneryWeb.AmmoTypeLive.Show do
   """
 
   use CanneryWeb, :live_view
-
+  import CanneryWeb.AmmoGroupLive.AmmoGroupCard
-  alias Cannery.Ammo
+  alias Cannery.{Ammo, Repo}
 
   @impl true
   def mount(_params, session, socket) do
@@ -14,10 +14,14 @@ defmodule CanneryWeb.AmmoTypeLive.Show do
 
   @impl true
   def handle_params(%{"id" => id}, _, socket) do
-    {:noreply,
+    socket =
-     socket
+      socket
-     |> assign(:page_title, page_title(socket.assigns.live_action))
+      |> assign(
-     |> assign(:ammo_type, Ammo.get_ammo_type!(id))}
+        page_title: page_title(socket.assigns.live_action),
+        ammo_type: Ammo.get_ammo_type!(id) |> Repo.preload(:ammo_groups)
+      )
+
+    {:noreply, socket}
   end
 
   @impl true

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

@@ -3,45 +3,63 @@
     <%= @ammo_type.name %>
   </h1>
 
-  <div class="flex space-x-4 justify-center items-center text-primary-500">
+  <div class="space-y-2 flex flex-col justify-center items-center">
-    <%= live_redirect("Back", to: Routes.ammo_type_index_path(@socket, :index), class: "link") %>
+    <%= if @ammo_type.desc do %>
-    <%= live_patch("Edit", to: Routes.ammo_type_show_path(@socket, :edit, @ammo_type), class: "button") %>
+      <span class="rounded-lg title text-lg">
-    <%= link("Delete",
+        Desc: <%= @ammo_type.desc %>
-      to: "#",
+      </span>
-      class: "link",
+    <% end %>
-      phx_click: "delete",
+
-      data: [confirm: "Are you sure you want to delete #{@ammo_type.name}?"]
+    <%= if @ammo_type.case_material do %>
-    ) %>
+      <span class="rounded-lg title text-lg">
+        Case material: <%= @ammo_type.case_material %>
+      </span>
+    <% end %>
+
+    <%= if @ammo_type.bullet_type do %>
+      <span class="rounded-lg title text-lg">
+        Bullet type: <%= @ammo_type.bullet_type %>
+      </span>
+    <% end %>
+
+    <%= if @ammo_type.grain do %>
+      <span class="rounded-lg title text-lg">
+        Grain: <%= @ammo_type.grain %>
+      </span>
+    <% end %>
+
+    <%= if @ammo_type.manufacturer do %>
+      <span class="rounded-lg title text-lg">
+        Manufacturer: <%= @ammo_type.manufacturer %>
+      </span>
+    <% end %>
   </div>
 
-  <hr class="w-full">
+  <div class="flex space-x-4 justify-center items-center text-primary-500">
+    <%= live_patch to: Routes.ammo_type_show_path(@socket, :edit, @ammo_type),
+               class: "text-primary-500 link" do %>
+      <i class="fa-fw fa-lg fas fa-edit"></i>
+    <% end %>
 
-  <ul class="text-center">
+    <%= link to: "#",
-    <li>
+         class: "text-primary-500 link",
-      <strong>Desc:</strong>
+         phx_click: "delete",
-      <%= @ammo_type.desc %>
+         data: [confirm: "Are you sure you want to delete #{@ammo_type.name}?"] do %>
-    </li>
+      <i class="fa-fw fa-lg fas fa-trash"></i>
+    <% end %>
+  </div>
 
-    <li>
+  <hr class="mb-4 w-full">
-      <strong>Case material:</strong>
-      <%= @ammo_type.case_material %>
-    </li>
 
-    <li>
+  <div class="mb-4">
-      <strong>Bullet type:</strong>
+    <%= if @ammo_type.ammo_groups |> Enum.empty?() do %>
-      <%= @ammo_type.bullet_type %>
+      No ammo for this type
-    </li>
+    <% else %>
-
+      <%= for ammo_group <- @ammo_type.ammo_groups do %>
-    <li>
+        <.ammo_group_card ammo_group={ammo_group} />
-      <strong>Grain:</strong>
+      <% end %>
-      <%= @ammo_type.grain %>
+    <% end %>
-    </li>
+  </div>
-
-    <li>
-      <strong>Manufacturer:</strong>
-      <%= @ammo_type.manufacturer %>
-    </li>
-  </ul>
 </div>
 
 <%= if @live_action in [:edit] do %>

lib/cannery_web/live/container_live/container_card.ex

@@ -0,0 +1,49 @@
+defmodule CanneryWeb.ContainerLive.ContainerCard do
+  @moduledoc """
+  Display card for a container
+  """
+
+  use CanneryWeb, :component
+  alias CanneryWeb.Endpoint
+
+  def container_card(assigns) do
+    ~H"""
+    <div
+      id={"container-#{@container.id}"}
+      class="px-8 py-4 flex flex-col justify-center items-center
+        border border-gray-400 rounded-lg shadow-lg hover:shadow-md"
+    >
+      <div class="mb-4 flex flex-col justify-center items-center">
+        <%= live_redirect to: Routes.container_show_path(Endpoint, :show, @container),
+                      class: "link" do %>
+          <h1 class="px-4 py-2 rounded-lg title text-xl">
+            <%= @container.name %>
+          </h1>
+        <% end %>
+
+        <%= if @container.desc do %>
+          <span class="rounded-lg title text-lg">
+            Description: <%= @container.desc %>
+          </span>
+        <% end %>
+
+        <span class="rounded-lg title text-lg">
+          Type: <%= @container.type %>
+        </span>
+
+        <%= if @container.location do %>
+          <span class="rounded-lg title text-lg">
+            Location: <%= @container.location %>
+          </span>
+        <% end %>
+      </div>
+
+      <%= if assigns |> Map.has_key?(:inner_block) do %>
+        <div class="flex space-x-4 justify-center items-center">
+          <%= render_slot(@inner_block) %>
+        </div>
+      <% end %>
+    </div>
+    """
+  end
+end

lib/cannery_web/live/container_live/index.ex

@@ -4,7 +4,7 @@ defmodule CanneryWeb.ContainerLive.Index do
   """
 
   use CanneryWeb, :live_view
-
+  import CanneryWeb.ContainerLive.ContainerCard
   alias Cannery.Containers
   alias Cannery.Containers.Container
 

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

@@ -21,51 +21,20 @@
 
   <div class="flex flex-row flex-wrap">
     <%= for container <- @containers do %>
-      <div
+      <.container_card container={container}>
-        id={"container-#{container.id}"}
+        <%= live_patch to: Routes.container_index_path(@socket, :edit, container),
-        class="px-8 py-4 flex flex-col justify-center items-center
+                   class: "text-primary-500 link" do %>
-          border border-gray-400 rounded-lg shadow-lg hover:shadow-md"
+          <i class="fa-fw fa-lg fas fa-edit"></i>
-      >
+        <% end %>
-        <div class="mb-4 flex flex-col justify-center items-center">
-          <h1 class="px-4 py-2 rounded-lg title text-xl">
-            <%= container.name %>
-          </h1>
 
-          <%= if container.desc do %>
+        <%= link to: "#",
-            <span class="rounded-lg title text-lg">
+             class: "text-primary-500 link",
-              Description: <%= container.desc %>
+             phx_click: "delete",
-            </span>
+             phx_value_id: container.id,
-          <% end %>
+             data: [confirm: "Are you sure you want to delete #{container.name}?"] do %>
-
+          <i class="fa-fw fa-lg fas fa-trash"></i>
-          <span class="rounded-lg title text-lg">
+        <% end %>
-            Type: <%= container.type %>
+      </.container_card>
-          </span>
-
-          <%= if container.location do %>
-            <span class="rounded-lg title text-lg">
-              Location: <%= container.location %>
-            </span>
-          <% end %>
-        </div>
-
-        <div class="flex space-x-4 justify-center items-center">
-          <%= live_redirect("Show",
-            to: Routes.container_show_path(@socket, :show, container),
-            class: "text-primary-500 link"
-          ) %>
-          <%= live_patch("Edit",
-            to: Routes.container_index_path(@socket, :edit, container),
-            class: "text-primary-500 link"
-          ) %>
-          <%= link("Delete",
-            to: "#",
-            class: "text-primary-500 link",
-            phx_click: "delete",
-            phx_value_id: container.id,
-            data: [confirm: "Are you sure you want to delete #{container.name}?"]
-          ) %>
-        </div>
-      </div>
     <% end %>
   </div>
 </div>

lib/cannery_web/live/container_live/show.ex

@@ -4,8 +4,8 @@ defmodule CanneryWeb.ContainerLive.Show do
   """
 
   use CanneryWeb, :live_view
-
+  import CanneryWeb.AmmoGroupLive.AmmoGroupCard
-  alias Cannery.Containers
+  alias Cannery.{Containers, Repo}
 
   @impl true
   def mount(_params, session, socket) do
@@ -18,7 +18,7 @@ defmodule CanneryWeb.ContainerLive.Show do
       socket
       |> assign(
         page_title: page_title(socket.assigns.live_action),
-        container: Containers.get_container!(id)
+        container: Containers.get_container!(id) |> Repo.preload(:ammo_groups)
       )
 
     {:noreply, socket}

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

@@ -20,19 +20,30 @@
   <% end %>
 
   <div class="flex space-x-4 justify-center items-center text-primary-500">
-    <%= live_redirect("Back", to: Routes.container_index_path(@socket, :index), class: "link") %>
+    <%= live_patch to: Routes.container_show_path(@socket, :edit, @container),
-    <%= live_patch("Edit", to: Routes.container_show_path(@socket, :edit, @container), class: "link") %>
+               class: "text-primary-500 link" do %>
-    <%= link("Delete",
+      <i class="fa-fw fa-lg fas fa-edit"></i>
-      to: "#",
+    <% end %>
-      class: "link",
+
-      phx_click: "delete",
+    <%= link to: "#",
-      data: [confirm: "Are you sure you want to delete #{@container.name}?"]
+         class: "text-primary-500 link",
-    ) %>
+         phx_click: "delete",
+         data: [confirm: "Are you sure you want to delete #{@container.name}?"] do %>
+      <i class="fa-fw fa-lg fas fa-trash"></i>
+    <% end %>
   </div>
 
   <hr class="mb-4 w-full">
 
-  <p>No ammo groups in this container</p>
+  <p>
+    <%= if @container.ammo_groups |> Enum.empty?() do %>
+      No ammo groups in this container
+    <% else %>
+      <%= for ammo_group <- @container.ammo_groups do %>
+        <.ammo_group_card ammo_group={ammo_group} />
+      <% end %>
+    <% end %>
+  </p>
 
   <%= if @live_action in [:edit] do %>
     <%= live_modal(CanneryWeb.ContainerLive.FormComponent,

lib/cannery_web/live/invite_live/index.html.leex

@@ -15,7 +15,7 @@
   <% else %>
     <%= live_patch to: Routes.invite_index_path(@socket, :new),
       class: "btn btn-primary" do %>
-      Invite
+      Create Invite
     <% end %>
   <% end %>
 
@@ -42,29 +42,33 @@
         </code>
 
         <div class="flex space-x-4 justify-center items-center">
-          <%= live_patch "Edit", to: Routes.invite_index_path(@socket, :edit, invite),
+          <%= live_patch to: Routes.invite_index_path(@socket, :edit, invite),
-            class: "text-primary-500 link" %>
+                    class: "text-primary-500 link" do %>
+            <i class="fa-fw fa-lg fas fa-edit"></i>
+          <% end %>
 
-          <%= link "Delete", to: "#",
+          <%= link to: "#",
-            class: "text-primary-500 link",
+              class: "text-primary-500 link",
-            phx_click: "delete",
+              phx_click: "delete",
             phx_value_id: invite.id,
-            data: [confirm: "Are you sure?"] %>
+            data: [confirm: "Are you sure you want to delete the invite for #{invite.name}?"] do %>
+            <i class="fa-fw fa-lg fas fa-trash"></i>
+          <% end %>
 
           <%= if invite.disabled_at |> is_nil() do %>
-            <a href="#" class="text-primary-500 link"
+            <a href="#" class="btn btn-primary"
               phx-click="disable" phx-value-id="<%= invite.id %>">
               Disable
             </a>
           <% else %>
-            <a href="#" class="text-primary-500 link"
+            <a href="#" class="btn btn-primary"
               phx-click="enable" phx-value-id="<%= invite.id %>">
               Enable
             </a>
           <% end %>
 
           <%= if invite.disabled_at |> is_nil() and not(invite.uses_left |> is_nil()) do %>
-            <a href="#" class="text-primary-500 link"
+            <a href="#" class="btn btn-primary"
               phx-click="set_unlimited" phx-value-id="<%= invite.id %>"
               data-confirm="Are you sure you want to make this invite unlimited?">
               Set Unlimited

lib/cannery_web/live/tag_live/index.ex

@@ -4,7 +4,7 @@ defmodule CanneryWeb.TagLive.Index do
   """
 
   use CanneryWeb, :live_view
-
+  import CanneryWeb.TagLive.TagCard
   alias Cannery.Tags
   alias Cannery.Tags.Tag
 

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

@@ -22,32 +22,11 @@
   <% end %>
   <div class="flex flex-row flex-wrap">
     <%= for tag <- @tags do %>
-      <div
+      <.tag_card tag={tag} />
-        id={"tag-#{tag.id}"}
-        class="mx-4 my-2 px-8 py-4 space-x-4 flex justify-center items-center
-        border border-gray-400 rounded-lg shadow-lg hover:shadow-md"
-      >
-        <h1
-          class="px-4 py-2 rounded-lg title text-xl"
-          style={"color: #{tag.text_color}; background-color: #{tag.bg_color}"}
-        >
-          <%= tag.name %>
-        </h1>
-        <%= live_patch to: Routes.tag_index_path(@socket, :edit, tag),
-                   class: "text-primary-500 link" do %>
-          <i class="fa-fw fa-lg fas fa-edit"></i>
-        <% end %>
-        <%= link to: "#",
-             class: "text-primary-500 link",
-             phx_click: "delete",
-             phx_value_id: tag.id,
-             data: [confirm: "Are you sure you want to delete #{tag.name}?"] do %>
-          <i class="fa-fw fa-lg fas fa-trash"></i>
-        <% end %>
-      </div>
     <% end %>
   </div>
 </div>
+
 <%= if @live_action in [:new, :edit] do %>
   <%= live_modal(CanneryWeb.TagLive.FormComponent,
     id: @tag.id || :new,

lib/cannery_web/live/tag_live/tag_card.ex

@@ -0,0 +1,38 @@
+defmodule CanneryWeb.TagLive.TagCard do
+  @moduledoc """
+  Display card for a tag
+  """
+
+  use CanneryWeb, :component
+  alias CanneryWeb.Endpoint
+
+  def tag_card(assigns) do
+    ~H"""
+    <div
+      id={"tag-#{@tag.id}"}
+      class="mx-4 my-2 px-8 py-4 space-x-4 flex justify-center items-center
+          border border-gray-400 rounded-lg shadow-lg hover:shadow-md"
+    >
+      <h1
+        class="px-4 py-2 rounded-lg title text-xl"
+        style={"color: #{@tag.text_color}; background-color: #{@tag.bg_color}"}
+      >
+        <%= @tag.name %>
+      </h1>
+
+      <%= live_patch to: Routes.tag_index_path(Endpoint, :edit, @tag),
+                 class: "text-primary-500 link" do %>
+        <i class="fa-fw fa-lg fas fa-edit"></i>
+      <% end %>
+
+      <%= link to: "#",
+           class: "text-primary-500 link",
+           phx_click: "delete",
+           phx_value_id: @tag.id,
+           data: [confirm: "Are you sure you want to delete #{@tag.name}?"] do %>
+        <i class="fa-fw fa-lg fas fa-trash"></i>
+      <% end %>
+    </div>
+    """
+  end
+end