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