Show windowed page list in live_table footer

Previously rendered only the current page button. Now renders 1…(current-2)..(current+1)
using just has_next_page, collapsing with an ellipsis past page 4.

lib/microwaveprop_web/live_table_footer.ex

@@ -7,12 +7,15 @@ defmodule MicrowavepropWeb.LiveTableFooter do
     table_options = assigns.table_options
     paginate? = get_in(options, ["pagination", "paginate?"])
     mode = get_in(table_options, [:pagination, :mode])
+    page = parse_page(get_in(options, ["pagination", "page"]))
+    has_next? = get_in(options, ["pagination", :has_next_page]) || false
 
     assigns =
       assigns
       |> assign(:show_pagination?, paginate? && mode != :infinite_scroll)
-      |> assign(:page, parse_page(get_in(options, ["pagination", "page"])))
-      |> assign(:has_next_page?, get_in(options, ["pagination", :has_next_page]) || false)
+      |> assign(:page, page)
+      |> assign(:has_next_page?, has_next?)
+      |> assign(:page_items, page_items(page, has_next?))
 
     ~H"""
     <nav
@@ -35,9 +38,27 @@ defmodule MicrowavepropWeb.LiveTableFooter do
         >
           «
         </button>
-        <button type="button" class="btn btn-sm join-item btn-active pointer-events-none">
-          {@page}
-        </button>
+        <%= for item <- @page_items do %>
+          <%= if item == :ellipsis do %>
+            <button type="button" class="btn btn-sm join-item btn-disabled pointer-events-none">
+              …
+            </button>
+          <% else %>
+            <button
+              type="button"
+              class={[
+                "btn btn-sm join-item",
+                item == @page && "btn-active pointer-events-none"
+              ]}
+              phx-click="sort"
+              phx-value-page={item}
+              aria-label={"Page #{item}"}
+              aria-current={item == @page && "page"}
+            >
+              {item}
+            </button>
+          <% end %>
+        <% end %>
         <button
           type="button"
           class="btn btn-sm join-item"
@@ -53,6 +74,23 @@ defmodule MicrowavepropWeb.LiveTableFooter do
     """
   end
 
+  # Without a total count from live_table we can only show pages we know exist:
+  # everything up to and including `page` (we got here), plus `page + 1` when
+  # `has_next?` is true. Collapses a gap to "…" once we're past page 4.
+  @doc false
+  @spec page_items(pos_integer(), boolean()) :: [pos_integer() | :ellipsis]
+  def page_items(page, has_next?) when page >= 1 do
+    window_start = max(1, page - 2)
+    window_end = if has_next?, do: page + 1, else: page
+    window = Enum.to_list(window_start..window_end)
+
+    cond do
+      window_start == 1 -> window
+      window_start == 2 -> [1 | window]
+      true -> [1, :ellipsis | window]
+    end
+  end
+
   defp parse_page(page) when is_integer(page), do: page
   defp parse_page(page) when is_binary(page), do: String.to_integer(page)
   defp parse_page(_), do: 1

test/microwaveprop_web/live_table_footer_test.exs

@@ -0,0 +1,35 @@
+defmodule MicrowavepropWeb.LiveTableFooterTest do
+  use ExUnit.Case, async: true
+
+  alias MicrowavepropWeb.LiveTableFooter
+
+  describe "page_items/2" do
+    test "page 1 with next page shows 1 and 2" do
+      assert LiveTableFooter.page_items(1, true) == [1, 2]
+    end
+
+    test "page 1 without next page shows only 1" do
+      assert LiveTableFooter.page_items(1, false) == [1]
+    end
+
+    test "page 3 with next page shows contiguous window without ellipsis" do
+      assert LiveTableFooter.page_items(3, true) == [1, 2, 3, 4]
+    end
+
+    test "page 4 with next page still contiguous (window_start == 2)" do
+      assert LiveTableFooter.page_items(4, true) == [1, 2, 3, 4, 5]
+    end
+
+    test "page 5 with next page collapses with ellipsis" do
+      assert LiveTableFooter.page_items(5, true) == [1, :ellipsis, 3, 4, 5, 6]
+    end
+
+    test "page 10 without next page omits trailing page" do
+      assert LiveTableFooter.page_items(10, false) == [1, :ellipsis, 8, 9, 10]
+    end
+
+    test "page 2 with next page shows 1, 2, 3" do
+      assert LiveTableFooter.page_items(2, true) == [1, 2, 3]
+    end
+  end
+end