use table component for move ammo group component

This commit is contained in:
shibao 2022-03-04 20:53:18 -05:00
parent bd20820361
commit da8c788992
2 changed files with 85 additions and 72 deletions

View File

@ -4,7 +4,7 @@ defmodule CanneryWeb.Components.MoveAmmoGroupComponent do
"""
use CanneryWeb, :live_component
alias Cannery.{Accounts.User, Ammo, Ammo.AmmoGroup, Containers}
alias Cannery.{Accounts.User, Ammo, Ammo.AmmoGroup, Containers, Containers.Container}
alias CanneryWeb.Endpoint
alias Phoenix.LiveView.Socket
@ -28,7 +28,12 @@ defmodule CanneryWeb.Components.MoveAmmoGroupComponent do
Containers.list_containers(current_user)
|> Enum.reject(fn %{id: id} -> id == container_id end)
{:ok, socket |> assign(assigns) |> assign(changeset: changeset, containers: containers)}
socket =
socket
|> assign(assigns)
|> assign(changeset: changeset, containers: containers)
{:ok, socket}
end
@impl true
@ -55,4 +60,82 @@ defmodule CanneryWeb.Components.MoveAmmoGroupComponent do
{:noreply, socket}
end
@impl true
def render(%{containers: containers} = assigns) do
columns = [
%{label: gettext("Container"), key: "name"},
%{label: gettext("Type"), key: "type"},
%{label: gettext("Location"), key: "location"},
%{
label: nil,
key: "actions",
sortable: false,
class: "px-4 py-2 space-x-4 flex justify-center items-center"
}
]
rows = containers |> get_rows_for_containers(assigns, columns)
assigns = assigns |> Map.merge(%{columns: columns, rows: rows})
~H"""
<div class="w-full flex flex-col space-y-8 justify-center items-center">
<h2 class="mb-8 text-center title text-xl text-primary-600">
<%= gettext("Move ammo") %>
</h2>
<%= if @containers |> Enum.empty?() do %>
<h2 class="title text-xl text-primary-600">
<%= gettext("No other containers") %>
<%= display_emoji("😔") %>
</h2>
<%= live_patch(dgettext("actions", "Add another container!"),
to: Routes.container_index_path(Endpoint, :new),
class: "btn btn-primary"
) %>
<% else %>
<.live_component
module={CanneryWeb.Components.TableComponent}
id="move_ammo_group_table"
columns={@columns}
rows={@rows}
/>
<% end %>
</div>
"""
end
@spec get_rows_for_containers([Container.t()], map(), [map()]) :: [map()]
defp get_rows_for_containers(containers, assigns, columns) do
containers
|> Enum.map(fn container ->
assigns = assigns |> Map.put(:container, container)
columns
|> Enum.into(%{}, fn %{key: key} ->
value =
case key do
"actions" ->
~H"""
<button
type="button"
class="btn btn-primary"
phx-click="move"
phx-target={@myself}
phx-value-container_id={container.id}
>
<%= dgettext("actions", "Select") %>
</button>
"""
key ->
container |> Map.get(key |> String.to_existing_atom())
end
{key, value}
end)
end)
end
end

View File

@ -1,70 +0,0 @@
<div class="w-full flex flex-col space-y-8 justify-center items-center">
<h2 class="mb-8 text-center title text-xl text-primary-600">
<%= gettext("Move ammo") %>
</h2>
<%= if @containers |> Enum.empty?() do %>
<h2 class="title text-xl text-primary-600">
<%= gettext("No other containers") %>
<%= display_emoji("😔") %>
</h2>
<%= live_patch(dgettext("actions", "Add another container!"),
to: Routes.container_index_path(Endpoint, :new),
class: "btn btn-primary"
) %>
<% else %>
<div class="w-full overflow-x-auto border border-gray-600 rounded-lg shadow-lg bg-black">
<table class="min-w-full table-auto text-center bg-white">
<thead class="border-b border-primary-600">
<tr>
<th class="p-2">
<%= gettext("Container") %>
</th>
<th class="p-2">
<%= gettext("Type") %>
</th>
<th class="p-2">
<%= gettext("Location") %>
</th>
<th class="p-2"></th>
</tr>
</thead>
<tbody id="containers">
<%= for container <- @containers do %>
<tr id={"container-#{container.id}"}>
<td class="p-2">
<%= container.name %>
</td>
<td class="p-2">
<%= container.type %>
</td>
<td class="p-2">
<%= container.location %>
</td>
<td class="p-2">
<div class="px-4 py-2 space-x-4 flex justify-center items-center">
<button
type="button"
class="btn btn-primary"
phx-click="move"
phx-target={@myself}
phx-value-container_id={container.id}
>
<%= dgettext("actions", "Select") %>
</button>
</div>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
<% end %>
</div>