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,
-     socket
-     |> assign(assigns)
-     |> assign(:changeset, changeset)}
+    changeset = Ammo.change_ammo_group(ammo_group)
+    containers = Containers.list_containers(socket.assigns.current_user)
+    ammo_types = Ammo.list_ammo_types()
+
+    {: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") %>
-        <%= number_input(f, :count) %>
-        <%= error_tag(f, :count) %>
-        <%= label(f, :price_paid, class: "title text-lg text-primary-500") %>
-        <%= number_input(f, :price_paid, step: "any") %>
-        <%= error_tag(f, :price_paid) %>
-        <%= label(f, :notes, class: "title text-lg text-primary-500") %>
-        <%= textarea(f, :notes, class: "input") %>
-        <%= error_tag(f, :notes) %>
-        <%= submit("Save", phx_disable_with: "Saving...") %>
+        <%= label(f, :count, class: "mr-4 title text-lg text-primary-500") %>
+        <%= number_input(f, :count,
+          class: "text-center col-span-2 input input-primary",
+          min: 1
+        ) %>
+        <div class="col-span-3 text-center">
+          <%= error_tag(f, :count) %>
+        </div>
+
+        <%= 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">
-                <span>
-                  <%= live_redirect("Show", to: Routes.ammo_group_show_path(@socket, :show, ammo_group)) %>
-                </span>
-                <span>
-                  <%= live_patch("Edit", to: Routes.ammo_group_index_path(@socket, :edit, ammo_group)) %>
-                </span>
-                <span>
-                  <%= link("Delete",
-                    to: "#",
-                    phx_click: "delete",
-                    phx_value_id: ammo_group.id,
-                    data: [confirm: "Are you sure?"]
-                  ) %>
-                </span>
+              <td class="p-2 w-full h-full space-x-2 flex justify-center items-center">
+                <%= live_redirect("View", to: Routes.ammo_group_show_path(@socket, :show, ammo_group)) %>
+
+                <%= live_patch to: Routes.ammo_group_index_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",
+                     phx_value_id: ammo_group.id,
+                     data: [confirm: "Are you sure you want to delete this ammo?"] do %>
+                  <i class="fa-fw fa-lg fas fa-trash"></i>
+                <% 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
-
-  alias Cannery.Ammo
+  import CanneryWeb.ContainerLive.ContainerCard
+  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
-     |> assign(:page_title, page_title(socket.assigns.live_action))
-     |> assign(:ammo_group, Ammo.get_ammo_group!(id))}
+    socket =
+      socket
+      |> assign(
+        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>