use table component for shot group table

This commit is contained in:
shibao 2022-03-04 22:06:01 -05:00
parent ec6946068e
commit af4af84515
2 changed files with 66 additions and 65 deletions

View File

@ -77,6 +77,65 @@ defmodule CanneryWeb.RangeLive.Index do
ActivityLog.list_shot_groups(current_user) |> Repo.preload(ammo_group: :ammo_type)
ammo_groups = Ammo.list_staged_ammo_groups(current_user)
socket |> assign(shot_groups: shot_groups, ammo_groups: ammo_groups)
columns = [
%{label: gettext("Ammo"), key: "name"},
%{label: gettext("Rounds shot"), key: "count"},
%{label: gettext("Notes"), key: "notes"},
%{label: gettext("Date"), key: "date"},
%{label: nil, key: "actions", sortable: false}
]
rows =
shot_groups
|> Enum.map(fn %{date: date} = shot_group ->
assigns = %{shot_group: shot_group}
columns
|> Enum.into(%{}, fn %{key: key} ->
value =
case key do
"name" ->
{shot_group.ammo_group.ammo_type.name,
live_patch(shot_group.ammo_group.ammo_type.name,
to: Routes.ammo_group_show_path(Endpoint, :show, shot_group.ammo_group),
class: "link"
)}
"date" ->
date |> display_date()
"actions" ->
~H"""
<div class="px-4 py-2 space-x-4 flex justify-center items-center">
<%= live_patch to: Routes.range_index_path(Endpoint, :edit, 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",
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>
"""
value ->
shot_group |> Map.get(key |> String.to_existing_atom())
end
{key, value}
end)
end)
socket
|> assign(ammo_groups: ammo_groups, columns: columns, rows: rows, shot_groups: shot_groups)
end
end

View File

@ -53,70 +53,12 @@
<%= gettext("Shot log") %>
</h1>
<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("Ammo") %>
</th>
<th class="p-2">
<%= 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 <- @shot_groups do %>
<tr id={"shot_group-#{shot_group.id}"}>
<td class="p-2">
<%= live_patch(shot_group.ammo_group.ammo_type.name,
to: Routes.ammo_group_show_path(Endpoint, :show, shot_group.ammo_group),
class: "link"
) %>
</td>
<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.range_index_path(Endpoint, :edit, 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",
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>
<.live_component
module={CanneryWeb.Components.TableComponent}
id="shot_groups_table"
columns={@columns}
rows={@rows}
/>
<% end %>
</div>