use table component for ammo group table
This commit is contained in:
		| @@ -75,6 +75,114 @@ defmodule CanneryWeb.AmmoGroupLive.Index do | ||||
|   defp display_ammo_groups(%{assigns: %{current_user: current_user}} = socket) do | ||||
|     ammo_groups = Ammo.list_ammo_groups(current_user) |> Repo.preload([:ammo_type, :container]) | ||||
|     containers = Containers.list_containers(current_user) | ||||
|     socket |> assign(ammo_groups: ammo_groups, containers: containers) | ||||
|  | ||||
|     columns = [ | ||||
|       %{label: gettext("Ammo type"), key: "ammo_type"}, | ||||
|       %{label: gettext("Count"), key: "count"}, | ||||
|       %{label: gettext("Price paid"), key: "price_paid"}, | ||||
|       %{label: gettext("% left"), key: "remaining"}, | ||||
|       %{label: gettext("Range"), key: "range"}, | ||||
|       %{label: gettext("Container"), key: "container"}, | ||||
|       %{ | ||||
|         label: nil, | ||||
|         key: "actions", | ||||
|         sortable: false, | ||||
|         class: "px-4 py-2 space-x-4 flex justify-center items-center" | ||||
|       } | ||||
|     ] | ||||
|  | ||||
|     rows = | ||||
|       ammo_groups | ||||
|       |> Enum.map(fn ammo_group -> | ||||
|         assigns = %{ammo_group: ammo_group} | ||||
|  | ||||
|         columns | ||||
|         |> Enum.into(%{}, fn %{key: key} -> | ||||
|           value = | ||||
|             case key do | ||||
|               "ammo_type" -> | ||||
|                 {ammo_group.ammo_type.name, | ||||
|                  live_patch(ammo_group.ammo_type.name, | ||||
|                    to: Routes.ammo_type_show_path(Endpoint, :show, ammo_group.ammo_type), | ||||
|                    class: "link" | ||||
|                  )} | ||||
|  | ||||
|               "price_paid" -> | ||||
|                 if ammo_group.price_paid do | ||||
|                   gettext("$%{amount}", | ||||
|                     amount: ammo_group.price_paid |> :erlang.float_to_binary(decimals: 2) | ||||
|                   ) | ||||
|                 else | ||||
|                   {"a", nil} | ||||
|                 end | ||||
|  | ||||
|               "remaining" -> | ||||
|                 "#{ammo_group |> Ammo.get_percentage_remaining()}%" | ||||
|  | ||||
|               "range" -> | ||||
|                 {ammo_group.staged, | ||||
|                  ~H""" | ||||
|                  <button | ||||
|                    type="button" | ||||
|                    class="btn btn-primary" | ||||
|                    phx-click="toggle_staged" | ||||
|                    phx-value-ammo_group_id={ammo_group.id} | ||||
|                  > | ||||
|                    <%= if ammo_group.staged, do: gettext("Unstage"), else: gettext("Stage") %> | ||||
|                  </button> | ||||
|  | ||||
|                  <%= live_patch(dgettext("actions", "Record shots"), | ||||
|                    to: Routes.ammo_group_index_path(Endpoint, :add_shot_group, ammo_group), | ||||
|                    class: "btn btn-primary" | ||||
|                  ) %> | ||||
|                  """} | ||||
|  | ||||
|               "container" -> | ||||
|                 if ammo_group.container do | ||||
|                   {ammo_group.container.name, | ||||
|                    live_patch(ammo_group.container.name, | ||||
|                      to: Routes.ammo_group_index_path(Endpoint, :move, ammo_group), | ||||
|                      class: "btn btn-primary" | ||||
|                    )} | ||||
|                 else | ||||
|                   {nil, nil} | ||||
|                 end | ||||
|  | ||||
|               "actions" -> | ||||
|                 ~H""" | ||||
|                 <%= live_redirect to: Routes.ammo_group_show_path(Endpoint, :show, ammo_group), | ||||
|                               class: "text-primary-600 link", | ||||
|                               data: [qa: "view-#{ammo_group.id}"] do %> | ||||
|                   <i class="fa-fw fa-lg fas fa-eye"></i> | ||||
|                 <% end %> | ||||
|  | ||||
|                 <%= live_patch to: Routes.ammo_group_index_path(Endpoint, :edit, ammo_group), | ||||
|                             class: "text-primary-600 link", | ||||
|                             data: [qa: "edit-#{ammo_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: ammo_group.id, | ||||
|                       data: [ | ||||
|                         confirm: dgettext("prompts", "Are you sure you want to delete this ammo?"), | ||||
|                         qa: "delete-#{ammo_group.id}" | ||||
|                       ] do %> | ||||
|                   <i class="fa-fw fa-lg fas fa-trash"></i> | ||||
|                 <% end %> | ||||
|                 """ | ||||
|  | ||||
|               _ -> | ||||
|                 ammo_group |> Map.get(key |> String.to_existing_atom()) | ||||
|             end | ||||
|  | ||||
|           {key, value} | ||||
|         end) | ||||
|       end) | ||||
|  | ||||
|     socket | ||||
|     |> assign(ammo_groups: ammo_groups, containers: containers, columns: columns, rows: rows) | ||||
|   end | ||||
| end | ||||
|   | ||||
| @@ -45,116 +45,13 @@ | ||||
|       ) %> | ||||
|     <% end %> | ||||
|  | ||||
|     <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 type") %> | ||||
|             </th> | ||||
|             <th class="p-2"> | ||||
|               <%= gettext("Count") %> | ||||
|             </th> | ||||
|             <th class="p-2"> | ||||
|               <%= gettext("Price paid") %> | ||||
|             </th> | ||||
|             <th class="p-2"> | ||||
|               <%= gettext("% left") %> | ||||
|             </th> | ||||
|             <th class="p-2"> | ||||
|               <%= gettext("Range") %> | ||||
|             </th> | ||||
|             <th class="p-2"> | ||||
|               <%= gettext("Container") %> | ||||
|             </th> | ||||
|  | ||||
|             <th class="p-2"></th> | ||||
|           </tr> | ||||
|         </thead> | ||||
|         <tbody id="ammo_groups"> | ||||
|           <%= for ammo_group <- @ammo_groups do %> | ||||
|             <tr id={"ammo_group-#{ammo_group.id}"}> | ||||
|               <td class="p-2"> | ||||
|                 <%= live_patch(ammo_group.ammo_type.name, | ||||
|                   to: Routes.ammo_type_show_path(Endpoint, :show, ammo_group.ammo_type), | ||||
|                   class: "link" | ||||
|                 ) %> | ||||
|               </td> | ||||
|  | ||||
|               <td class="p-2"> | ||||
|                 <%= ammo_group.count %> | ||||
|               </td> | ||||
|  | ||||
|               <td class="p-2"> | ||||
|                 <%= if ammo_group.price_paid do %> | ||||
|                   <%= gettext("$%{amount}", | ||||
|                     amount: ammo_group.price_paid |> :erlang.float_to_binary(decimals: 2) | ||||
|                   ) %> | ||||
|                 <% end %> | ||||
|               </td> | ||||
|  | ||||
|               <td class="p-2"> | ||||
|                 <%= "#{ammo_group |> Ammo.get_percentage_remaining()}%" %> | ||||
|               </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="toggle_staged" | ||||
|                     phx-value-ammo_group_id={ammo_group.id} | ||||
|                   > | ||||
|                     <%= if ammo_group.staged, do: gettext("Unstage"), else: gettext("Stage") %> | ||||
|                   </button> | ||||
|  | ||||
|                   <%= live_patch(dgettext("actions", "Record shots"), | ||||
|                     to: Routes.ammo_group_index_path(Endpoint, :add_shot_group, ammo_group), | ||||
|                     class: "btn btn-primary" | ||||
|                   ) %> | ||||
|                 </div> | ||||
|               </td> | ||||
|  | ||||
|               <td class="p-2"> | ||||
|                 <%= if ammo_group.container do %> | ||||
|                   <%= live_patch(ammo_group.container.name, | ||||
|                     to: Routes.ammo_group_index_path(Endpoint, :move, ammo_group), | ||||
|                     class: "btn btn-primary" | ||||
|                   ) %> | ||||
|                 <% end %> | ||||
|               </td> | ||||
|  | ||||
|               <td class="p-2"> | ||||
|                 <div class="px-4 py-2 space-x-4 flex justify-center items-center"> | ||||
|                   <%= live_redirect to: Routes.ammo_group_show_path(Endpoint, :show, ammo_group), | ||||
|                                 class: "text-primary-600 link", | ||||
|                                 data: [qa: "view-#{ammo_group.id}"] do %> | ||||
|                     <i class="fa-fw fa-lg fas fa-eye"></i> | ||||
|                   <% end %> | ||||
|  | ||||
|                   <%= live_patch to: Routes.ammo_group_index_path(Endpoint, :edit, ammo_group), | ||||
|                              class: "text-primary-600 link", | ||||
|                              data: [qa: "edit-#{ammo_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: ammo_group.id, | ||||
|                        data: [ | ||||
|                          confirm: dgettext("prompts", "Are you sure you want to delete this ammo?"), | ||||
|                          qa: "delete-#{ammo_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="ammo_groups_index" | ||||
|       action={@live_action} | ||||
|       columns={@columns} | ||||
|       rows={@rows} | ||||
|     /> | ||||
|   <% end %> | ||||
| </div> | ||||
|  | ||||
| @@ -196,5 +93,5 @@ | ||||
|         current_user={@current_user} | ||||
|       /> | ||||
|     </.modal> | ||||
|   <% true -> %> | ||||
|   <% end %> | ||||
|   <% true -> %> <%= nil %> | ||||
| <% end %> | ||||
|   | ||||
		Reference in New Issue
	
	Block a user