Add device count, selected count and select all checkbox (#1511)

* Add device count, selected count and select all checkbox

* Add tests for device counts

Author: lawik

lib/nerves_hub_web/live/devices/index.ex

@@ -76,6 +76,7 @@ defmodule NervesHubWeb.Live.Devices.Index do
     |> assign(:target_product, nil)
     |> assign(:valid_tags, true)
     |> assign(:device_tags, "")
+    |> assign(:total_entries, 0)
     |> subscribe_and_refresh_device_list_timer()
     |> ok()
   end
@@ -199,6 +200,19 @@ defmodule NervesHubWeb.Live.Devices.Index do
     {:noreply, assign(socket, :selected_devices, selected_devices)}
   end
 
+  def handle_event("select-all", _, socket) do
+    selected_devices = socket.assigns.selected_devices
+
+    selected_devices =
+      if Enum.count(selected_devices) > 0 do
+        []
+      else
+        Enum.map(socket.assigns.devices, & &1.id)
+      end
+
+    {:noreply, assign(socket, :selected_devices, selected_devices)}
+  end
+
   def handle_event("deselect-all", _, socket) do
     {:noreply, assign(socket, selected_devices: [])}
   end
@@ -378,6 +392,7 @@ defmodule NervesHubWeb.Live.Devices.Index do
 
     socket
     |> assign(:devices, page.entries)
+    |> assign(:total_entries, page.total_entries)
     |> assign(:paginate_opts, paginate_opts)
   end
 

lib/nerves_hub_web/live/devices/index.html.heex

@@ -27,6 +27,9 @@
         </span>
         <span class="button-icon filter"></span>
       </button>
+      <p class="ml-2" style="opacity: 0.7;">
+        <%= @total_entries %> devices found <span :if={Enum.count(@selected_devices) > 0}>(<%= Enum.count(@selected_devices) %> selected)</span>
+      </p>
     </div>
     <div>
       <a class="btn btn-outline-light btn-action" aria-label="Add new device" href={Routes.product_path(@socket, :devices_export, @org.name, @product.name)}>
@@ -39,6 +42,7 @@
       </.link>
     </div>
   </div>
+
   <div class="action-row btn-group-toggle" style="justify-content: flex-end; display: flex; gap: 4px;">
     <%= for size <- @paginate_opts.page_sizes do %>
       <button phx-click="set-paginate-opts" phx-value-page-size={size} class={"btn btn-secondary btn-sm #{if size == @paginate_opts.page_size, do: "active"}"}>
@@ -218,7 +222,9 @@
   <table class="table table-sm table-hover">
     <thead>
       <tr>
-        <th></th>
+        <th>
+          <input class="checkbox" title="Check/uncheck all" {[checked: Enum.count(@selected_devices) == Enum.count(@devices)]} id="toggle-all" name="toggle-all" type="checkbox" phx-click="select-all" />
+        </th>
         <%= devices_table_header("Identifier", "identifier", @current_sort, @sort_direction) %>
         <th>Firmware</th>
         <th>Platform</th>

test/nerves_hub_web/live/devices/index_test.exs

@@ -21,6 +21,7 @@ defmodule NervesHubWeb.Live.Devices.IndexTest do
       change = render_change(view, "update-filters", %{"device_id" => device.identifier})
       assert change =~ device.identifier
       refute change =~ device2.identifier
+      assert change =~ "1 devices found"
     end
 
     test "filters devices by wrong identifier", %{conn: conn, fixture: fixture} do
@@ -35,6 +36,7 @@ defmodule NervesHubWeb.Live.Devices.IndexTest do
       change = render_change(view, "update-filters", %{"device_id" => "foo"})
       refute change =~ device.identifier
       refute change =~ device2.identifier
+      assert change =~ "0 devices found"
     end
 
     test "filters devices by prefix identifier", %{conn: conn, fixture: fixture} do
@@ -128,6 +130,39 @@ defmodule NervesHubWeb.Live.Devices.IndexTest do
       assert change =~ device2.identifier
       refute change =~ device3.identifier
     end
+
+    test "select device", %{conn: conn, fixture: fixture} do
+      %{device: _device, firmware: firmware, org: org, product: product} = fixture
+
+      device2 = Fixtures.device_fixture(org, product, firmware, %{tags: nil})
+      _device3 = Fixtures.device_fixture(org, product, firmware, %{tags: ["foo"]})
+
+      {:ok, view, html} = live(conn, device_index_path(fixture))
+      assert html =~ "3 devices found"
+      refute html =~ "(1 selected)"
+
+      change = render_change(view, "select", %{"id" => device2.id})
+      assert change =~ "3 devices found"
+      assert change =~ "(1 selected)"
+    end
+
+    test "select/deselect all devices", %{conn: conn, fixture: fixture} do
+      %{device: _device, firmware: firmware, org: org, product: product} = fixture
+
+      _device2 = Fixtures.device_fixture(org, product, firmware, %{tags: nil})
+      _device3 = Fixtures.device_fixture(org, product, firmware, %{tags: ["foo"]})
+
+      {:ok, view, html} = live(conn, device_index_path(fixture))
+      assert html =~ "3 devices found"
+
+      change = render_change(view, "select-all", %{})
+      assert change =~ "3 devices found"
+      assert change =~ "(3 selected)"
+
+      change = render_change(view, "select-all", %{})
+      assert change =~ "3 devices found"
+      refute change =~ "selected)"
+    end
   end
 
   describe "bulk actions" do