style app, use components for cards

This commit is contained in:
2022-02-05 01:59:40 -05:00
parent 844c8ccdae
commit 3dd624d6de
20 changed files with 492 additions and 224 deletions

View File

@ -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

View File

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

View File

@ -21,51 +21,20 @@
<div class="flex flex-row flex-wrap">
<%= for container <- @containers do %>
<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">
<h1 class="px-4 py-2 rounded-lg title text-xl">
<%= container.name %>
</h1>
<.container_card container={container}>
<%= live_patch to: Routes.container_index_path(@socket, :edit, container),
class: "text-primary-500 link" do %>
<i class="fa-fw fa-lg fas fa-edit"></i>
<% 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>
<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>
<%= link 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}?"] do %>
<i class="fa-fw fa-lg fas fa-trash"></i>
<% end %>
</.container_card>
<% end %>
</div>
</div>

View File

@ -4,8 +4,8 @@ defmodule CanneryWeb.ContainerLive.Show do
"""
use CanneryWeb, :live_view
alias Cannery.Containers
import CanneryWeb.AmmoGroupLive.AmmoGroupCard
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}

View File

@ -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("Edit", to: Routes.container_show_path(@socket, :edit, @container), class: "link") %>
<%= link("Delete",
to: "#",
class: "link",
phx_click: "delete",
data: [confirm: "Are you sure you want to delete #{@container.name}?"]
) %>
<%= live_patch to: Routes.container_show_path(@socket, :edit, @container),
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 #{@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,