use table component for ammo group show table

This commit is contained in:
shibao 2022-03-04 21:57:22 -05:00
parent 3d115c6383
commit f120e54c3e
2 changed files with 63 additions and 59 deletions

View File

@ -5,7 +5,7 @@ defmodule CanneryWeb.AmmoGroupLive.Show do
use CanneryWeb, :live_view use CanneryWeb, :live_view
import CanneryWeb.Components.ContainerCard import CanneryWeb.Components.ContainerCard
alias Cannery.{ActivityLog, Ammo, Ammo.AmmoGroup, Repo} alias Cannery.{ActivityLog, ActivityLog.ShotGroup, Ammo, Ammo.AmmoGroup, Repo}
alias CanneryWeb.Endpoint alias CanneryWeb.Endpoint
alias Phoenix.LiveView.Socket alias Phoenix.LiveView.Socket
@ -84,9 +84,64 @@ defmodule CanneryWeb.AmmoGroupLive.Show do
@spec display_ammo_group(Socket.t(), AmmoGroup.t() | AmmoGroup.id()) :: Socket.t() @spec display_ammo_group(Socket.t(), AmmoGroup.t() | AmmoGroup.id()) :: Socket.t()
defp display_ammo_group(socket, %AmmoGroup{} = ammo_group) do defp display_ammo_group(socket, %AmmoGroup{} = ammo_group) do
ammo_group = ammo_group |> Repo.preload([:container, :ammo_type, :shot_groups], force: true) ammo_group = ammo_group |> Repo.preload([:container, :ammo_type, :shot_groups], force: true)
socket |> assign(:ammo_group, ammo_group)
columns = [
%{label: gettext("Rounds shot"), key: "count"},
%{label: gettext("Notes"), key: "notes"},
%{label: gettext("Date"), key: "date"},
%{label: nil, key: "actions", sortable: false}
]
rows =
ammo_group.shot_groups
|> Enum.map(fn shot_group ->
ammo_group |> get_table_row_for_shot_group(shot_group, columns)
end)
socket |> assign(ammo_group: ammo_group, columns: columns, rows: rows)
end end
defp display_ammo_group(%{assigns: %{current_user: current_user}} = socket, id), defp display_ammo_group(%{assigns: %{current_user: current_user}} = socket, id),
do: display_ammo_group(socket, Ammo.get_ammo_group!(id, current_user)) do: display_ammo_group(socket, Ammo.get_ammo_group!(id, current_user))
@spec get_table_row_for_shot_group(AmmoGroup.t(), ShotGroup.t(), [map()]) :: [map()]
defp get_table_row_for_shot_group(ammo_group, %{date: date} = shot_group, columns) do
assigns = %{ammo_group: ammo_group, shot_group: shot_group}
columns
|> Enum.into(%{}, fn %{key: key} ->
value =
case key do
"date" ->
{date, date |> display_date()}
"actions" ->
~H"""
<div class="px-4 py-2 space-x-4 flex justify-center items-center">
<%= live_patch to: Routes.ammo_group_show_path(Endpoint, :edit_shot_group, @ammo_group, shot_group),
class: "text-primary-600 link",
data: [qa: "edit-#{shot_group.id}"] do %>
<i class="fa-fw fa-lg fas fa-edit"></i>
<% end %>
<%= link to: "#",
class: "text-primary-600 link",
phx_click: "delete_shot_group",
phx_value_id: shot_group.id,
data: [
confirm: dgettext("prompts", "Are you sure you want to delete this shot record?"),
qa: "delete-#{shot_group.id}"
] do %>
<i class="fa-fw fa-lg fas fa-trash"></i>
<% end %>
</div>
"""
key ->
shot_group |> Map.get(key |> String.to_existing_atom())
end
{key, value}
end)
end
end end

View File

@ -111,63 +111,12 @@
<%= gettext("Rounds used") %> <%= gettext("Rounds used") %>
</h1> </h1>
<div class="w-full overflow-x-auto border border-gray-600 rounded-lg shadow-lg bg-black"> <.live_component
<table class="min-w-full table-auto text-center bg-white"> module={CanneryWeb.Components.TableComponent}
<thead class="border-b border-primary-600"> id="shot_groups_table"
<tr> columns={@columns}
<th class="p-2"> rows={@rows}
<%= gettext("Rounds shot") %> />
</th>
<th class="p-2">
<%= gettext("Notes") %>
</th>
<th class="p-2">
<%= gettext("Date") %>
</th>
<th class="p-2"></th>
</tr>
</thead>
<tbody id="shot_groups">
<%= for shot_group <- @ammo_group.shot_groups do %>
<tr id={"shot_group-#{shot_group.id}"}>
<td class="p-2">
<%= shot_group.count %>
</td>
<td class="p-2">
<%= shot_group.notes %>
</td>
<td class="p-2">
<%= shot_group.date |> display_date() %>
</td>
<td class="p-2 w-full h-full space-x-2 flex justify-center items-center">
<div class="px-4 py-2 space-x-4 flex justify-center items-center">
<%= live_patch to: Routes.ammo_group_show_path(Endpoint, :edit_shot_group, @ammo_group, shot_group),
class: "text-primary-600 link",
data: [qa: "edit-#{shot_group.id}"] do %>
<i class="fa-fw fa-lg fas fa-edit"></i>
<% end %>
<%= link to: "#",
class: "text-primary-600 link",
phx_click: "delete_shot_group",
phx_value_id: shot_group.id,
data: [
confirm: dgettext("prompts", "Are you sure you want to delete this shot record?"),
qa: "delete-#{shot_group.id}"
] do %>
<i class="fa-fw fa-lg fas fa-trash"></i>
<% end %>
</div>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
<% end %> <% end %>
</div> </div>