add container index table

2022-11-10 18:51:24 -05:00
parent 09394ea408
commit 76d3554b4b
24 changed files with 426 additions and 78 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - Make ammo type show page a bit more compact
 - Make ammo type show page include container names for each ammo
 - Make ammo type show page filter used-up ammo
+- Make container index page optionally display a table
 - Make container show page a bit more compact
 - Make container show page filter used-up ammo
 - Forgot to add the logo as the favicon whoops
--- a/lib/cannery_web/components/table_component.ex
+++ b/lib/cannery_web/components/table_component.ex
@@ -47,7 +47,7 @@ defmodule CanneryWeb.Components.TableComponent do
      if assigns |> Map.has_key?(:initial_key) do
        assigns.initial_key
      else
-        columns |> List.first() |> Map.get(:key)
+        columns |> List.first(%{}) |> Map.get(:key)
      end

    initial_sort_mode =
--- a/lib/cannery_web/live/container_live/index.ex
+++ b/lib/cannery_web/live/container_live/index.ex
@@ -6,11 +6,11 @@ defmodule CanneryWeb.ContainerLive.Index do
  use CanneryWeb, :live_view
  import CanneryWeb.Components.ContainerCard
  alias Cannery.{Containers, Containers.Container, Repo}
-  alias CanneryWeb.Endpoint
+  alias CanneryWeb.{Components.TagCard, Endpoint}
  alias Ecto.Changeset

  @impl true
-  def mount(_params, _session, socket), do: {:ok, socket}
+  def mount(_params, _session, socket), do: {:ok, socket |> assign(view_table: false)}

  @impl true
  def handle_params(params, _url, %{assigns: %{live_action: live_action}} = socket) do
@@ -33,8 +33,20 @@ defmodule CanneryWeb.ContainerLive.Index do

  defp apply_action(socket, :index, _params) do
    socket
-    |> assign(:page_title, gettext("Containers"))
-    |> assign(:container, nil)
+    |> assign(
+      page_title: gettext("Containers"),
+      container: nil
+    )
+    |> display_containers()
+  end
+
+  defp apply_action(socket, :table, _params) do
+    socket
+    |> assign(
+      page_title: gettext("Containers"),
+      container: nil,
+      view_table: true
+    )
    |> display_containers()
  end

@@ -83,10 +95,127 @@ defmodule CanneryWeb.ContainerLive.Index do
    {:noreply, socket}
  end

+  @impl true
+  def handle_event("toggle_table", _params, %{assigns: %{view_table: view_table}} = socket) do
+    new_path =
+      if view_table,
+        do: Routes.container_index_path(Endpoint, :index),
+        else: Routes.container_index_path(Endpoint, :table)
+
+    {:noreply, socket |> assign(view_table: !view_table) |> push_patch(to: new_path)}
+  end
+
  defp display_containers(%{assigns: %{current_user: current_user}} = socket) do
    containers =
      Containers.list_containers(current_user) |> Repo.preload([:tags, :ammo_groups], force: true)

-    socket |> assign(containers: containers)
+    columns =
+      [
+        %{label: gettext("Name"), key: :name, type: :string},
+        %{label: gettext("Description"), key: :desc, type: :string},
+        %{label: gettext("Location"), key: :location, type: :string},
+        %{label: gettext("Type"), key: :type, type: :string},
+        %{label: gettext("Packs"), key: :packs, type: :integer},
+        %{label: gettext("Rounds"), key: :rounds, type: :string},
+        %{label: gettext("Tags"), key: :tags, type: :tags},
+        %{label: nil, key: :actions, sortable: false, type: :actions}
+      ]
+      |> Enum.filter(fn %{key: key, type: type} ->
+        # remove columns if all values match defaults
+        default_value =
+          case type do
+            :boolean -> false
+            _other_type -> nil
          end
+
+        containers
+        |> Enum.any?(fn container ->
+          type in [:tags, :actions] or not (container |> Map.get(key) == default_value)
+        end)
+      end)
+
+    rows =
+      containers
+      |> Enum.map(fn container -> container |> get_row_data_for_container(columns) end)
+
+    socket
+    |> assign(
+      containers: containers,
+      columns: columns,
+      rows: rows
+    )
+  end
+
+  @spec get_row_data_for_container(Container.t(), [map()]) :: [map()]
+  defp get_row_data_for_container(container, columns) do
+    container = container |> Repo.preload([:ammo_groups, :tags])
+
+    columns
+    |> Enum.into(%{}, fn %{key: key} -> {key, get_value_for_key(key, container)} end)
+  end
+
+  @spec get_value_for_key(atom(), Container.t()) :: any()
+  defp get_value_for_key(:packs, container) do
+    container |> Containers.get_container_ammo_group_count!()
+  end
+
+  defp get_value_for_key(:rounds, container) do
+    container |> Containers.get_container_rounds!()
+  end
+
+  defp get_value_for_key(:tags, container) do
+    assigns = %{container: container}
+
+    {container.tags |> Enum.map(fn %{name: name} -> name end),
+     ~H"""
+     <div class="flex flex-wrap justify-center items-center">
+       <%= unless @container.tags |> Enum.empty?() do %>
+         <%= for tag <- @container.tags do %>
+           <TagCard.simple_tag_card tag={tag} />
+         <% end %>
+       <% end %>
+
+       <div class="mx-4 my-2">
+         <.link
+           patch={Routes.container_index_path(Endpoint, :edit_tags, @container)}
+           class="text-primary-600 link"
+         >
+           <i class="fa-fw fa-lg fas fa-tags"></i>
+         </.link>
+       </div>
+     </div>
+     """}
+  end
+
+  defp get_value_for_key(:actions, container) do
+    assigns = %{container: container}
+
+    ~H"""
+    <.link
+      patch={Routes.container_index_path(Endpoint, :edit, @container)}
+      class="text-primary-600 link"
+      data-qa={"edit-#{@container.id}"}
+    >
+      <i class="fa-fw fa-lg fas fa-edit"></i>
+    </.link>
+
+    <.link
+      href="#"
+      class="text-primary-600 link"
+      phx-click="delete"
+      phx-value-id={@container.id}
+      data-confirm={
+        dgettext("prompts", "Are you sure you want to delete %{name}?", name: @container.name)
+      }
+      data-qa={"delete-#{@container.id}"}
+    >
+      <i class="fa-fw fa-lg fas fa-trash"></i>
+    </.link>
+    """
+  end
+
+  defp get_value_for_key(key, container), do: container |> Map.get(key)
+
+  def return_to(true = _view_table), do: Routes.container_index_path(Endpoint, :table)
+  def return_to(false = _view_table), do: Routes.container_index_path(Endpoint, :index)
 end
--- a/lib/cannery_web/live/container_live/index.html.heex
+++ b/lib/cannery_web/live/container_live/index.html.heex
@@ -16,9 +16,26 @@
    <.link patch={Routes.container_index_path(Endpoint, :new)} class="btn btn-primary">
      <%= dgettext("actions", "New Container") %>
    </.link>
+
+    <div class="flex flex-col justify-center items-center">
+      <.toggle_button action="toggle_table" value={@view_table}>
+        <span class="title text-lg text-primary-600">
+          <%= gettext("View as table") %>
+        </span>
+      </.toggle_button>
+    </div>
  <% end %>

  <div class="max-w-full flex flex-row flex-wrap justify-center items-center">
+    <%= if @view_table do %>
+      <.live_component
+        module={CanneryWeb.Components.TableComponent}
+        id="containers_index_table"
+        action={@live_action}
+        columns={@columns}
+        rows={@rows}
+      />
+    <% else %>
      <%= for container <- @containers do %>
        <.container_card container={container}>
          <:tag_actions>
@@ -53,25 +70,26 @@
          </.link>
        </.container_card>
      <% end %>
+    <% end %>
  </div>
 </div>

 <%= if @live_action in [:new, :edit] do %>
-  <.modal return_to={Routes.container_index_path(Endpoint, :index)}>
+  <.modal return_to={return_to(@view_table)}>
    <.live_component
      module={CanneryWeb.ContainerLive.FormComponent}
      id={@container.id || :new}
      title={@page_title}
      action={@live_action}
      container={@container}
-      return_to={Routes.container_index_path(Endpoint, :index)}
+      return_to={return_to(@view_table)}
      current_user={@current_user}
    />
  </.modal>
 <% end %>

 <%= if @live_action == :edit_tags do %>
-  <.modal return_to={Routes.container_index_path(Endpoint, :index)}>
+  <.modal return_to={return_to(@view_table)}>
    <.live_component
      module={CanneryWeb.ContainerLive.EditTagsComponent}
      id={@container.id}
--- a/lib/cannery_web/router.ex
+++ b/lib/cannery_web/router.ex
@@ -74,6 +74,7 @@ defmodule CanneryWeb.Router do
    live "/catalog/:id/show/edit", AmmoTypeLive.Show, :edit

    live "/containers", ContainerLive.Index, :index
+    live "/containers/table", ContainerLive.Index, :table
    live "/containers/new", ContainerLive.Index, :new
    live "/containers/:id/edit", ContainerLive.Index, :edit
    live "/containers/:id/edit_tags", ContainerLive.Index, :edit_tags
--- a/priv/gettext/de/LC_MESSAGES/default.po
+++ b/priv/gettext/de/LC_MESSAGES/default.po
@@ -124,7 +124,8 @@ msgid "Container"
 msgstr "Behälter"

 #: lib/cannery_web/components/topbar.ex:57
-#: lib/cannery_web/live/container_live/index.ex:36
+#: lib/cannery_web/live/container_live/index.ex:37
+#: lib/cannery_web/live/container_live/index.ex:46
 #: lib/cannery_web/live/container_live/index.html.heex:3
 #, elixir-autogen, elixir-format
 msgid "Containers"
@@ -151,6 +152,7 @@ msgstr "Anzahl:"

 #: lib/cannery_web/live/ammo_type_live/form_component.html.heex:24
 #: lib/cannery_web/live/container_live/form_component.html.heex:27
+#: lib/cannery_web/live/container_live/index.ex:115
 #, elixir-autogen, elixir-format
 msgid "Description"
 msgstr "Beschreibung"
@@ -240,6 +242,7 @@ msgstr "Für 60 Tage eingeloggt bleiben"

 #: lib/cannery_web/components/move_ammo_group_component.ex:69
 #: lib/cannery_web/live/container_live/form_component.html.heex:42
+#: lib/cannery_web/live/container_live/index.ex:116
 #, elixir-autogen, elixir-format
 msgid "Location"
 msgstr "Standort"
@@ -275,6 +278,7 @@ msgstr "Meine coole Munitionskiste"
 #: lib/cannery_web/live/ammo_type_live/form_component.html.heex:20
 #: lib/cannery_web/live/ammo_type_live/index.ex:51
 #: lib/cannery_web/live/container_live/form_component.html.heex:20
+#: lib/cannery_web/live/container_live/index.ex:114
 #: lib/cannery_web/live/invite_live/form_component.html.heex:20
 #: lib/cannery_web/live/tag_live/form_component.ex:75
 #, elixir-autogen, elixir-format
@@ -421,6 +425,7 @@ msgid "Stored in"
 msgstr "Gelagert in"

 #: lib/cannery_web/components/topbar.ex:49
+#: lib/cannery_web/live/container_live/index.ex:120
 #: lib/cannery_web/live/tag_live/index.ex:32
 #: lib/cannery_web/live/tag_live/index.html.heex:3
 #, elixir-autogen, elixir-format
@@ -451,6 +456,7 @@ msgstr "Leuchtspur"

 #: lib/cannery_web/components/move_ammo_group_component.ex:68
 #: lib/cannery_web/live/container_live/form_component.html.heex:35
+#: lib/cannery_web/live/container_live/index.ex:117
 #, elixir-autogen, elixir-format
 msgid "Type"
 msgstr "Art"
@@ -686,7 +692,7 @@ msgstr "Lädt..."
 msgid "Edit %{name}"
 msgstr "%{name} bearbeiten"

-#: lib/cannery_web/live/container_live/index.ex:46
+#: lib/cannery_web/live/container_live/index.ex:58
 #: lib/cannery_web/live/container_live/show.ex:107
 #, elixir-autogen, elixir-format
 msgid "Edit %{name} tags"
@@ -964,3 +970,18 @@ msgstr ""
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Rounds shot: %{count}"
 msgstr "Patronen abgefeuert"
+
+#: lib/cannery_web/live/container_live/index.ex:118
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Packs"
+msgstr ""
+
+#: lib/cannery_web/live/container_live/index.ex:119
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Rounds"
+msgstr "Patronen:"
+
+#: lib/cannery_web/live/container_live/index.html.heex:23
+#, elixir-autogen, elixir-format
+msgid "View as table"
+msgstr ""
--- a/priv/gettext/de/LC_MESSAGES/errors.po
+++ b/priv/gettext/de/LC_MESSAGES/errors.po
@@ -28,13 +28,13 @@ msgstr ""
 msgid "Container must be empty before deleting"
 msgstr "Behälter muss vor dem Löschen leer sein"

-#: lib/cannery_web/live/container_live/index.ex:69
+#: lib/cannery_web/live/container_live/index.ex:81
 #: lib/cannery_web/live/container_live/show.ex:71
 #, elixir-autogen, elixir-format
 msgid "Could not delete %{name}: %{error}"
 msgstr "Konnte %{name} nicht löschen: %{error}"

-#: lib/cannery_web/live/container_live/index.ex:57
+#: lib/cannery_web/live/container_live/index.ex:69
 #, elixir-autogen, elixir-format
 msgid "Could not find that container"
 msgstr "Konnte Behälter nicht finden"
--- a/priv/gettext/de/LC_MESSAGES/prompts.po
+++ b/priv/gettext/de/LC_MESSAGES/prompts.po
@@ -50,7 +50,7 @@ msgstr "%{name} erfolgreich deaktiviert"
 msgid "%{name} enabled succesfully"
 msgstr "%{name} erfolgreich aktiviert"

-#: lib/cannery_web/live/container_live/index.ex:62
+#: lib/cannery_web/live/container_live/index.ex:74
 #: lib/cannery_web/live/container_live/show.ex:61
 #, elixir-autogen, elixir-format
 msgid "%{name} has been deleted"
@@ -87,7 +87,8 @@ msgstr ""
 "Sind Sie sicher, dass sie %{email} löschen möchten? Dies kann nicht "
 "zurückgenommen werden!"

-#: lib/cannery_web/live/container_live/index.html.heex:48
+#: lib/cannery_web/live/container_live/index.ex:208
+#: lib/cannery_web/live/container_live/index.html.heex:65
 #: lib/cannery_web/live/container_live/show.html.heex:51
 #: lib/cannery_web/live/tag_live/index.html.heex:39
 #, elixir-autogen, elixir-format
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -109,7 +109,8 @@ msgid "Container"
 msgstr ""

 #: lib/cannery_web/components/topbar.ex:57
-#: lib/cannery_web/live/container_live/index.ex:36
+#: lib/cannery_web/live/container_live/index.ex:37
+#: lib/cannery_web/live/container_live/index.ex:46
 #: lib/cannery_web/live/container_live/index.html.heex:3
 #, elixir-autogen, elixir-format
 msgid "Containers"
@@ -136,6 +137,7 @@ msgstr ""

 #: lib/cannery_web/live/ammo_type_live/form_component.html.heex:24
 #: lib/cannery_web/live/container_live/form_component.html.heex:27
+#: lib/cannery_web/live/container_live/index.ex:115
 #, elixir-autogen, elixir-format
 msgid "Description"
 msgstr ""
@@ -225,6 +227,7 @@ msgstr ""

 #: lib/cannery_web/components/move_ammo_group_component.ex:69
 #: lib/cannery_web/live/container_live/form_component.html.heex:42
+#: lib/cannery_web/live/container_live/index.ex:116
 #, elixir-autogen, elixir-format
 msgid "Location"
 msgstr ""
@@ -260,6 +263,7 @@ msgstr ""
 #: lib/cannery_web/live/ammo_type_live/form_component.html.heex:20
 #: lib/cannery_web/live/ammo_type_live/index.ex:51
 #: lib/cannery_web/live/container_live/form_component.html.heex:20
+#: lib/cannery_web/live/container_live/index.ex:114
 #: lib/cannery_web/live/invite_live/form_component.html.heex:20
 #: lib/cannery_web/live/tag_live/form_component.ex:75
 #, elixir-autogen, elixir-format
@@ -404,6 +408,7 @@ msgid "Stored in"
 msgstr ""

 #: lib/cannery_web/components/topbar.ex:49
+#: lib/cannery_web/live/container_live/index.ex:120
 #: lib/cannery_web/live/tag_live/index.ex:32
 #: lib/cannery_web/live/tag_live/index.html.heex:3
 #, elixir-autogen, elixir-format
@@ -434,6 +439,7 @@ msgstr ""

 #: lib/cannery_web/components/move_ammo_group_component.ex:68
 #: lib/cannery_web/live/container_live/form_component.html.heex:35
+#: lib/cannery_web/live/container_live/index.ex:117
 #, elixir-autogen, elixir-format
 msgid "Type"
 msgstr ""
@@ -669,7 +675,7 @@ msgstr ""
 msgid "Edit %{name}"
 msgstr ""

-#: lib/cannery_web/live/container_live/index.ex:46
+#: lib/cannery_web/live/container_live/index.ex:58
 #: lib/cannery_web/live/container_live/show.ex:107
 #, elixir-autogen, elixir-format
 msgid "Edit %{name} tags"
@@ -947,3 +953,18 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Rounds shot: %{count}"
 msgstr ""
+
+#: lib/cannery_web/live/container_live/index.ex:118
+#, elixir-autogen, elixir-format
+msgid "Packs"
+msgstr ""
+
+#: lib/cannery_web/live/container_live/index.ex:119
+#, elixir-autogen, elixir-format
+msgid "Rounds"
+msgstr ""
+
+#: lib/cannery_web/live/container_live/index.html.heex:23
+#, elixir-autogen, elixir-format
+msgid "View as table"
+msgstr ""
--- a/priv/gettext/en/LC_MESSAGES/default.po
+++ b/priv/gettext/en/LC_MESSAGES/default.po
@@ -110,7 +110,8 @@ msgid "Container"
 msgstr ""

 #: lib/cannery_web/components/topbar.ex:57
-#: lib/cannery_web/live/container_live/index.ex:36
+#: lib/cannery_web/live/container_live/index.ex:37
+#: lib/cannery_web/live/container_live/index.ex:46
 #: lib/cannery_web/live/container_live/index.html.heex:3
 #, elixir-autogen, elixir-format
 msgid "Containers"
@@ -137,6 +138,7 @@ msgstr ""

 #: lib/cannery_web/live/ammo_type_live/form_component.html.heex:24
 #: lib/cannery_web/live/container_live/form_component.html.heex:27
+#: lib/cannery_web/live/container_live/index.ex:115
 #, elixir-autogen, elixir-format
 msgid "Description"
 msgstr ""
@@ -226,6 +228,7 @@ msgstr ""

 #: lib/cannery_web/components/move_ammo_group_component.ex:69
 #: lib/cannery_web/live/container_live/form_component.html.heex:42
+#: lib/cannery_web/live/container_live/index.ex:116
 #, elixir-autogen, elixir-format
 msgid "Location"
 msgstr ""
@@ -261,6 +264,7 @@ msgstr ""
 #: lib/cannery_web/live/ammo_type_live/form_component.html.heex:20
 #: lib/cannery_web/live/ammo_type_live/index.ex:51
 #: lib/cannery_web/live/container_live/form_component.html.heex:20
+#: lib/cannery_web/live/container_live/index.ex:114
 #: lib/cannery_web/live/invite_live/form_component.html.heex:20
 #: lib/cannery_web/live/tag_live/form_component.ex:75
 #, elixir-autogen, elixir-format
@@ -405,6 +409,7 @@ msgid "Stored in"
 msgstr ""

 #: lib/cannery_web/components/topbar.ex:49
+#: lib/cannery_web/live/container_live/index.ex:120
 #: lib/cannery_web/live/tag_live/index.ex:32
 #: lib/cannery_web/live/tag_live/index.html.heex:3
 #, elixir-autogen, elixir-format
@@ -435,6 +440,7 @@ msgstr ""

 #: lib/cannery_web/components/move_ammo_group_component.ex:68
 #: lib/cannery_web/live/container_live/form_component.html.heex:35
+#: lib/cannery_web/live/container_live/index.ex:117
 #, elixir-autogen, elixir-format
 msgid "Type"
 msgstr ""
@@ -670,7 +676,7 @@ msgstr ""
 msgid "Edit %{name}"
 msgstr ""

-#: lib/cannery_web/live/container_live/index.ex:46
+#: lib/cannery_web/live/container_live/index.ex:58
 #: lib/cannery_web/live/container_live/show.ex:107
 #, elixir-autogen, elixir-format
 msgid "Edit %{name} tags"
@@ -948,3 +954,18 @@ msgstr ""
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Rounds shot: %{count}"
 msgstr ""
+
+#: lib/cannery_web/live/container_live/index.ex:118
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Packs"
+msgstr ""
+
+#: lib/cannery_web/live/container_live/index.ex:119
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Rounds"
+msgstr ""
+
+#: lib/cannery_web/live/container_live/index.html.heex:23
+#, elixir-autogen, elixir-format
+msgid "View as table"
+msgstr ""
--- a/priv/gettext/en/LC_MESSAGES/errors.po
+++ b/priv/gettext/en/LC_MESSAGES/errors.po
@@ -15,13 +15,13 @@ msgstr ""
 msgid "Container must be empty before deleting"
 msgstr ""

-#: lib/cannery_web/live/container_live/index.ex:69
+#: lib/cannery_web/live/container_live/index.ex:81
 #: lib/cannery_web/live/container_live/show.ex:71
 #, elixir-autogen, elixir-format
 msgid "Could not delete %{name}: %{error}"
 msgstr ""

-#: lib/cannery_web/live/container_live/index.ex:57
+#: lib/cannery_web/live/container_live/index.ex:69
 #, elixir-autogen, elixir-format
 msgid "Could not find that container"
 msgstr ""
--- a/priv/gettext/en/LC_MESSAGES/prompts.po
+++ b/priv/gettext/en/LC_MESSAGES/prompts.po
@@ -38,7 +38,7 @@ msgstr ""
 msgid "%{name} enabled succesfully"
 msgstr ""

-#: lib/cannery_web/live/container_live/index.ex:62
+#: lib/cannery_web/live/container_live/index.ex:74
 #: lib/cannery_web/live/container_live/show.ex:61
 #, elixir-autogen, elixir-format
 msgid "%{name} has been deleted"
@@ -73,7 +73,8 @@ msgstr ""
 msgid "Are you sure you want to delete %{email}? This action is permanent!"
 msgstr ""

-#: lib/cannery_web/live/container_live/index.html.heex:48
+#: lib/cannery_web/live/container_live/index.ex:208
+#: lib/cannery_web/live/container_live/index.html.heex:65
 #: lib/cannery_web/live/container_live/show.html.heex:51
 #: lib/cannery_web/live/tag_live/index.html.heex:39
 #, elixir-autogen, elixir-format
--- a/priv/gettext/errors.pot
+++ b/priv/gettext/errors.pot
@@ -15,13 +15,13 @@ msgstr ""
 msgid "Container must be empty before deleting"
 msgstr ""

-#: lib/cannery_web/live/container_live/index.ex:69
+#: lib/cannery_web/live/container_live/index.ex:81
 #: lib/cannery_web/live/container_live/show.ex:71
 #, elixir-autogen, elixir-format
 msgid "Could not delete %{name}: %{error}"
 msgstr ""

-#: lib/cannery_web/live/container_live/index.ex:57
+#: lib/cannery_web/live/container_live/index.ex:69
 #, elixir-autogen, elixir-format
 msgid "Could not find that container"
 msgstr ""
--- a/priv/gettext/es/LC_MESSAGES/default.po
+++ b/priv/gettext/es/LC_MESSAGES/default.po
@@ -124,7 +124,8 @@ msgid "Container"
 msgstr ""

 #: lib/cannery_web/components/topbar.ex:57
-#: lib/cannery_web/live/container_live/index.ex:36
+#: lib/cannery_web/live/container_live/index.ex:37
+#: lib/cannery_web/live/container_live/index.ex:46
 #: lib/cannery_web/live/container_live/index.html.heex:3
 #, elixir-autogen, elixir-format
 msgid "Containers"
@@ -151,6 +152,7 @@ msgstr ""

 #: lib/cannery_web/live/ammo_type_live/form_component.html.heex:24
 #: lib/cannery_web/live/container_live/form_component.html.heex:27
+#: lib/cannery_web/live/container_live/index.ex:115
 #, elixir-autogen, elixir-format
 msgid "Description"
 msgstr ""
@@ -240,6 +242,7 @@ msgstr ""

 #: lib/cannery_web/components/move_ammo_group_component.ex:69
 #: lib/cannery_web/live/container_live/form_component.html.heex:42
+#: lib/cannery_web/live/container_live/index.ex:116
 #, elixir-autogen, elixir-format
 msgid "Location"
 msgstr ""
@@ -275,6 +278,7 @@ msgstr ""
 #: lib/cannery_web/live/ammo_type_live/form_component.html.heex:20
 #: lib/cannery_web/live/ammo_type_live/index.ex:51
 #: lib/cannery_web/live/container_live/form_component.html.heex:20
+#: lib/cannery_web/live/container_live/index.ex:114
 #: lib/cannery_web/live/invite_live/form_component.html.heex:20
 #: lib/cannery_web/live/tag_live/form_component.ex:75
 #, elixir-autogen, elixir-format
@@ -419,6 +423,7 @@ msgid "Stored in"
 msgstr ""

 #: lib/cannery_web/components/topbar.ex:49
+#: lib/cannery_web/live/container_live/index.ex:120
 #: lib/cannery_web/live/tag_live/index.ex:32
 #: lib/cannery_web/live/tag_live/index.html.heex:3
 #, elixir-autogen, elixir-format
@@ -449,6 +454,7 @@ msgstr ""

 #: lib/cannery_web/components/move_ammo_group_component.ex:68
 #: lib/cannery_web/live/container_live/form_component.html.heex:35
+#: lib/cannery_web/live/container_live/index.ex:117
 #, elixir-autogen, elixir-format
 msgid "Type"
 msgstr ""
@@ -684,7 +690,7 @@ msgstr ""
 msgid "Edit %{name}"
 msgstr ""

-#: lib/cannery_web/live/container_live/index.ex:46
+#: lib/cannery_web/live/container_live/index.ex:58
 #: lib/cannery_web/live/container_live/show.ex:107
 #, elixir-autogen, elixir-format
 msgid "Edit %{name} tags"
@@ -962,3 +968,18 @@ msgstr ""
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Rounds shot: %{count}"
 msgstr ""
+
+#: lib/cannery_web/live/container_live/index.ex:118
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Packs"
+msgstr ""
+
+#: lib/cannery_web/live/container_live/index.ex:119
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Rounds"
+msgstr ""
+
+#: lib/cannery_web/live/container_live/index.html.heex:23
+#, elixir-autogen, elixir-format
+msgid "View as table"
+msgstr ""
--- a/priv/gettext/es/LC_MESSAGES/errors.po
+++ b/priv/gettext/es/LC_MESSAGES/errors.po
@@ -28,13 +28,13 @@ msgstr ""
 msgid "Container must be empty before deleting"
 msgstr "el Contenedor debe estar vació antes de borrarlo"

-#: lib/cannery_web/live/container_live/index.ex:69
+#: lib/cannery_web/live/container_live/index.ex:81
 #: lib/cannery_web/live/container_live/show.ex:71
 #, elixir-autogen, elixir-format
 msgid "Could not delete %{name}: %{error}"
 msgstr "No se pudo eliminar %{name}: %{error}"

-#: lib/cannery_web/live/container_live/index.ex:57
+#: lib/cannery_web/live/container_live/index.ex:69
 #, elixir-autogen, elixir-format
 msgid "Could not find that container"
 msgstr ""
--- a/priv/gettext/es/LC_MESSAGES/prompts.po
+++ b/priv/gettext/es/LC_MESSAGES/prompts.po
@@ -50,7 +50,7 @@ msgstr "%{name} desactivado exitosamente"
 msgid "%{name} enabled succesfully"
 msgstr "%{name} activado exitosamente"

-#: lib/cannery_web/live/container_live/index.ex:62
+#: lib/cannery_web/live/container_live/index.ex:74
 #: lib/cannery_web/live/container_live/show.ex:61
 #, elixir-autogen, elixir-format
 msgid "%{name} has been deleted"
@@ -87,7 +87,8 @@ msgstr "Grupo de Munición borrado exitosamente"
 msgid "Are you sure you want to delete %{email}? This action is permanent!"
 msgstr "Está seguro que desea eliminar %{email}? Esta acción es permanente!"

-#: lib/cannery_web/live/container_live/index.html.heex:48
+#: lib/cannery_web/live/container_live/index.ex:208
+#: lib/cannery_web/live/container_live/index.html.heex:65
 #: lib/cannery_web/live/container_live/show.html.heex:51
 #: lib/cannery_web/live/tag_live/index.html.heex:39
 #, elixir-autogen, elixir-format
--- a/priv/gettext/fr/LC_MESSAGES/default.po
+++ b/priv/gettext/fr/LC_MESSAGES/default.po
@@ -124,7 +124,8 @@ msgid "Container"
 msgstr "Conteneur"

 #: lib/cannery_web/components/topbar.ex:57
-#: lib/cannery_web/live/container_live/index.ex:36
+#: lib/cannery_web/live/container_live/index.ex:37
+#: lib/cannery_web/live/container_live/index.ex:46
 #: lib/cannery_web/live/container_live/index.html.heex:3
 #, elixir-autogen, elixir-format
 msgid "Containers"
@@ -151,6 +152,7 @@ msgstr "Quantité :"

 #: lib/cannery_web/live/ammo_type_live/form_component.html.heex:24
 #: lib/cannery_web/live/container_live/form_component.html.heex:27
+#: lib/cannery_web/live/container_live/index.ex:115
 #, elixir-autogen, elixir-format
 msgid "Description"
 msgstr "Description"
@@ -240,6 +242,7 @@ msgstr "Me garder authentifié durant 60 jours"

 #: lib/cannery_web/components/move_ammo_group_component.ex:69
 #: lib/cannery_web/live/container_live/form_component.html.heex:42
+#: lib/cannery_web/live/container_live/index.ex:116
 #, elixir-autogen, elixir-format
 msgid "Location"
 msgstr "Localisation"
@@ -275,6 +278,7 @@ msgstr "Ma superbe boite de munition"
 #: lib/cannery_web/live/ammo_type_live/form_component.html.heex:20
 #: lib/cannery_web/live/ammo_type_live/index.ex:51
 #: lib/cannery_web/live/container_live/form_component.html.heex:20
+#: lib/cannery_web/live/container_live/index.ex:114
 #: lib/cannery_web/live/invite_live/form_component.html.heex:20
 #: lib/cannery_web/live/tag_live/form_component.ex:75
 #, elixir-autogen, elixir-format
@@ -421,6 +425,7 @@ msgid "Stored in"
 msgstr "Est stocké dans"

 #: lib/cannery_web/components/topbar.ex:49
+#: lib/cannery_web/live/container_live/index.ex:120
 #: lib/cannery_web/live/tag_live/index.ex:32
 #: lib/cannery_web/live/tag_live/index.html.heex:3
 #, elixir-autogen, elixir-format
@@ -453,6 +458,7 @@ msgstr "Traceuse"

 #: lib/cannery_web/components/move_ammo_group_component.ex:68
 #: lib/cannery_web/live/container_live/form_component.html.heex:35
+#: lib/cannery_web/live/container_live/index.ex:117
 #, elixir-autogen, elixir-format
 msgid "Type"
 msgstr "Type"
@@ -688,7 +694,7 @@ msgstr "Chargement en cours…"
 msgid "Edit %{name}"
 msgstr "Éditer %{name}"

-#: lib/cannery_web/live/container_live/index.ex:46
+#: lib/cannery_web/live/container_live/index.ex:58
 #: lib/cannery_web/live/container_live/show.ex:107
 #, elixir-autogen, elixir-format
 msgid "Edit %{name} tags"
@@ -967,3 +973,18 @@ msgstr ""
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Rounds shot: %{count}"
 msgstr "Cartouches tirées"
+
+#: lib/cannery_web/live/container_live/index.ex:118
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Packs"
+msgstr "Packages :"
+
+#: lib/cannery_web/live/container_live/index.ex:119
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Rounds"
+msgstr "Cartouches :"
+
+#: lib/cannery_web/live/container_live/index.html.heex:23
+#, elixir-autogen, elixir-format
+msgid "View as table"
+msgstr ""
--- a/priv/gettext/fr/LC_MESSAGES/errors.po
+++ b/priv/gettext/fr/LC_MESSAGES/errors.po
@@ -28,13 +28,13 @@ msgstr ""
 msgid "Container must be empty before deleting"
 msgstr "Le conteneur doit être vide pour être supprimé"

-#: lib/cannery_web/live/container_live/index.ex:69
+#: lib/cannery_web/live/container_live/index.ex:81
 #: lib/cannery_web/live/container_live/show.ex:71
 #, elixir-autogen, elixir-format
 msgid "Could not delete %{name}: %{error}"
 msgstr "Impossible de supprimer %{name} : %{error}"

-#: lib/cannery_web/live/container_live/index.ex:57
+#: lib/cannery_web/live/container_live/index.ex:69
 #, elixir-autogen, elixir-format
 msgid "Could not find that container"
 msgstr "Impossible de trouver ce conteneur"
--- a/priv/gettext/fr/LC_MESSAGES/prompts.po
+++ b/priv/gettext/fr/LC_MESSAGES/prompts.po
@@ -50,7 +50,7 @@ msgstr "%{name} supprimé·e avec succès"
 msgid "%{name} enabled succesfully"
 msgstr "%{name} activé·e avec succès"

-#: lib/cannery_web/live/container_live/index.ex:62
+#: lib/cannery_web/live/container_live/index.ex:74
 #: lib/cannery_web/live/container_live/show.ex:61
 #, elixir-autogen, elixir-format
 msgid "%{name} has been deleted"
@@ -88,7 +88,8 @@ msgid "Are you sure you want to delete %{email}? This action is permanent!"
 msgstr ""
 "Êtes-vous certain·e de supprimer %{email} ? Cette action est définitive !"

-#: lib/cannery_web/live/container_live/index.html.heex:48
+#: lib/cannery_web/live/container_live/index.ex:208
+#: lib/cannery_web/live/container_live/index.html.heex:65
 #: lib/cannery_web/live/container_live/show.html.heex:51
 #: lib/cannery_web/live/tag_live/index.html.heex:39
 #, elixir-autogen, elixir-format
--- a/priv/gettext/ga/LC_MESSAGES/default.po
+++ b/priv/gettext/ga/LC_MESSAGES/default.po
@@ -120,7 +120,8 @@ msgid "Container"
 msgstr ""

 #: lib/cannery_web/components/topbar.ex:57
-#: lib/cannery_web/live/container_live/index.ex:36
+#: lib/cannery_web/live/container_live/index.ex:37
+#: lib/cannery_web/live/container_live/index.ex:46
 #: lib/cannery_web/live/container_live/index.html.heex:3
 #, elixir-autogen, elixir-format
 msgid "Containers"
@@ -147,6 +148,7 @@ msgstr ""

 #: lib/cannery_web/live/ammo_type_live/form_component.html.heex:24
 #: lib/cannery_web/live/container_live/form_component.html.heex:27
+#: lib/cannery_web/live/container_live/index.ex:115
 #, elixir-autogen, elixir-format
 msgid "Description"
 msgstr ""
@@ -236,6 +238,7 @@ msgstr ""

 #: lib/cannery_web/components/move_ammo_group_component.ex:69
 #: lib/cannery_web/live/container_live/form_component.html.heex:42
+#: lib/cannery_web/live/container_live/index.ex:116
 #, elixir-autogen, elixir-format
 msgid "Location"
 msgstr ""
@@ -271,6 +274,7 @@ msgstr ""
 #: lib/cannery_web/live/ammo_type_live/form_component.html.heex:20
 #: lib/cannery_web/live/ammo_type_live/index.ex:51
 #: lib/cannery_web/live/container_live/form_component.html.heex:20
+#: lib/cannery_web/live/container_live/index.ex:114
 #: lib/cannery_web/live/invite_live/form_component.html.heex:20
 #: lib/cannery_web/live/tag_live/form_component.ex:75
 #, elixir-autogen, elixir-format
@@ -415,6 +419,7 @@ msgid "Stored in"
 msgstr ""

 #: lib/cannery_web/components/topbar.ex:49
+#: lib/cannery_web/live/container_live/index.ex:120
 #: lib/cannery_web/live/tag_live/index.ex:32
 #: lib/cannery_web/live/tag_live/index.html.heex:3
 #, elixir-autogen, elixir-format
@@ -445,6 +450,7 @@ msgstr ""

 #: lib/cannery_web/components/move_ammo_group_component.ex:68
 #: lib/cannery_web/live/container_live/form_component.html.heex:35
+#: lib/cannery_web/live/container_live/index.ex:117
 #, elixir-autogen, elixir-format
 msgid "Type"
 msgstr ""
@@ -680,7 +686,7 @@ msgstr ""
 msgid "Edit %{name}"
 msgstr ""

-#: lib/cannery_web/live/container_live/index.ex:46
+#: lib/cannery_web/live/container_live/index.ex:58
 #: lib/cannery_web/live/container_live/show.ex:107
 #, elixir-autogen, elixir-format
 msgid "Edit %{name} tags"
@@ -958,3 +964,18 @@ msgstr ""
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Rounds shot: %{count}"
 msgstr ""
+
+#: lib/cannery_web/live/container_live/index.ex:118
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Packs"
+msgstr ""
+
+#: lib/cannery_web/live/container_live/index.ex:119
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Rounds"
+msgstr ""
+
+#: lib/cannery_web/live/container_live/index.html.heex:23
+#, elixir-autogen, elixir-format
+msgid "View as table"
+msgstr ""
--- a/priv/gettext/ga/LC_MESSAGES/errors.po
+++ b/priv/gettext/ga/LC_MESSAGES/errors.po
@@ -29,13 +29,13 @@ msgstr ""
 msgid "Container must be empty before deleting"
 msgstr "Caithfidh an coimeádán a bheidh follamh roimh scriosadh"

-#: lib/cannery_web/live/container_live/index.ex:69
+#: lib/cannery_web/live/container_live/index.ex:81
 #: lib/cannery_web/live/container_live/show.ex:71
 #, elixir-autogen, elixir-format
 msgid "Could not delete %{name}: %{error}"
 msgstr "Ní feidir %{name} a scriosadh: %{error}"

-#: lib/cannery_web/live/container_live/index.ex:57
+#: lib/cannery_web/live/container_live/index.ex:69
 #, elixir-autogen, elixir-format
 msgid "Could not find that container"
 msgstr "Ní feidir an coimeádán sin a fáil"
--- a/priv/gettext/ga/LC_MESSAGES/prompts.po
+++ b/priv/gettext/ga/LC_MESSAGES/prompts.po
@@ -48,7 +48,7 @@ msgstr ""
 msgid "%{name} enabled succesfully"
 msgstr ""

-#: lib/cannery_web/live/container_live/index.ex:62
+#: lib/cannery_web/live/container_live/index.ex:74
 #: lib/cannery_web/live/container_live/show.ex:61
 #, elixir-autogen, elixir-format
 msgid "%{name} has been deleted"
@@ -83,7 +83,8 @@ msgstr ""
 msgid "Are you sure you want to delete %{email}? This action is permanent!"
 msgstr ""

-#: lib/cannery_web/live/container_live/index.html.heex:48
+#: lib/cannery_web/live/container_live/index.ex:208
+#: lib/cannery_web/live/container_live/index.html.heex:65
 #: lib/cannery_web/live/container_live/show.html.heex:51
 #: lib/cannery_web/live/tag_live/index.html.heex:39
 #, elixir-autogen, elixir-format
--- a/priv/gettext/prompts.pot
+++ b/priv/gettext/prompts.pot
@@ -37,7 +37,7 @@ msgstr ""
 msgid "%{name} enabled succesfully"
 msgstr ""

-#: lib/cannery_web/live/container_live/index.ex:62
+#: lib/cannery_web/live/container_live/index.ex:74
 #: lib/cannery_web/live/container_live/show.ex:61
 #, elixir-autogen, elixir-format
 msgid "%{name} has been deleted"
@@ -72,7 +72,8 @@ msgstr ""
 msgid "Are you sure you want to delete %{email}? This action is permanent!"
 msgstr ""

-#: lib/cannery_web/live/container_live/index.html.heex:48
+#: lib/cannery_web/live/container_live/index.ex:208
+#: lib/cannery_web/live/container_live/index.html.heex:65
 #: lib/cannery_web/live/container_live/show.html.heex:51
 #: lib/cannery_web/live/tag_live/index.html.heex:39
 #, elixir-autogen, elixir-format
--- a/test/cannery_web/live/container_live_test.exs
+++ b/test/cannery_web/live/container_live_test.exs
@@ -55,7 +55,7 @@ defmodule CanneryWeb.ContainerLiveTest do
    %{ammo_group: ammo_group, shot_group: shot_group}
  end

-  describe "Index" do
+  describe "Index regular" do
    setup [:register_and_log_in_user, :create_container]

    test "lists all containers", %{conn: conn, container: container} do
@@ -122,6 +122,73 @@ defmodule CanneryWeb.ContainerLiveTest do
    end
  end

+  describe "Index table" do
+    setup [:register_and_log_in_user, :create_container]
+
+    test "lists all containers", %{conn: conn, container: container} do
+      {:ok, _index_live, html} = live(conn, Routes.container_index_path(conn, :table))
+
+      assert html =~ gettext("Containers")
+      assert html =~ container.location
+    end
+
+    test "saves new container", %{conn: conn, container: container} do
+      {:ok, index_live, _html} = live(conn, Routes.container_index_path(conn, :table))
+
+      assert index_live |> element("a", dgettext("actions", "New Container")) |> render_click() =~
+               gettext("New Container")
+
+      assert_patch(index_live, Routes.container_index_path(conn, :new))
+
+      # assert index_live
+      #        |> form("#container-form", container: @invalid_attrs)
+      #        |> render_change() =~ dgettext("errors", "can't be blank")
+
+      {:ok, _view, html} =
+        index_live
+        |> form("#container-form", container: @create_attrs)
+        |> render_submit()
+        |> follow_redirect(conn, Routes.container_index_path(conn, :table))
+
+      assert html =~ dgettext("prompts", "%{name} created successfully", name: container.name)
+      assert html =~ "some location"
+    end
+
+    test "updates container in listing", %{
+      conn: conn,
+      current_user: current_user,
+      container: container
+    } do
+      {:ok, index_live, _html} = live(conn, Routes.container_index_path(conn, :table))
+
+      assert index_live |> element("[data-qa=\"edit-#{container.id}\"]") |> render_click() =~
+               gettext("Edit %{name}", name: container.name)
+
+      assert_patch(index_live, Routes.container_index_path(conn, :edit, container))
+
+      # assert index_live
+      #        |> form("#container-form", container: @invalid_attrs)
+      #        |> render_change() =~ dgettext("errors", "can't be blank")
+
+      {:ok, _view, html} =
+        index_live
+        |> form("#container-form", container: @update_attrs)
+        |> render_submit()
+        |> follow_redirect(conn, Routes.container_index_path(conn, :table))
+
+      container = container.id |> Containers.get_container!(current_user)
+      assert html =~ dgettext("prompts", "%{name} updated successfully", name: container.name)
+      assert html =~ "some updated location"
+    end
+
+    test "deletes container in listing", %{conn: conn, container: container} do
+      {:ok, index_live, _html} = live(conn, Routes.container_index_path(conn, :table))
+
+      assert index_live |> element("[data-qa=\"delete-#{container.id}\"]") |> render_click()
+      refute has_element?(index_live, "#container-#{container.id}")
+    end
+  end
+
  describe "Show" do
    setup [:register_and_log_in_user, :create_container]