Adds record pagination

2024-09-17 10:16:24 +01:00
parent 5623a5239f
commit 99960832c8
4 changed files with 226 additions and 88 deletions
@@ -4,109 +4,215 @@ defmodule MusicLibraryWeb.Pagination do
  # alias Phoenix.LiveView.JS
  use Gettext, backend: MusicLibraryWeb.Gettext

-  attr :entries, :list, required: true
+  attr :pagination_params, :map, required: true

-  def card_footer(assigns) do
-    assigns = assign(assigns, page_size: Enum.count(assigns.entries))
+  def pagination(assigns) do
+    page_links = generate_page_links(assigns.pagination_params)
+    assigns = assign(assigns, :page_links, page_links)

    ~H"""
    <div class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6">
+      <%!-- Only on smallest viewport --%>
      <div class="flex flex-1 justify-between sm:hidden">
        <a
+          :if={@page_links.prev_page}
          href="#"
          class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
        >
          Previous
        </a>
        <a
+          :if={@page_links.next_page}
          href="#"
          class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
        >
          Next
        </a>
      </div>
-      <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
-        <div>
-          <p class="text-sm text-gray-700">
-            Showing <span class="font-medium">1</span>
-            to <span class="font-medium">10</span>
-            of <span class="font-medium"><%= @page_size %></span>
-            results
-          </p>
-        </div>
+      <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-items-center sm:justify-center">
        <div>
          <nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
-            <a
-              href="#"
-              class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
-            >
-              <span class="sr-only">Previous</span>
-              <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path
-                  fill-rule="evenodd"
-                  d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-            </a>
-            <!-- Current: "z-10 bg-indigo-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600", Default: "text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-offset-0" -->
-            <a
-              href="#"
-              aria-current="page"
-              class="relative z-10 inline-flex items-center bg-indigo-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-            >
-              1
-            </a>
-            <a
-              href="#"
-              class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
-            >
-              2
-            </a>
-            <a
-              href="#"
-              class="relative hidden items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 md:inline-flex"
-            >
-              3
-            </a>
-            <span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 focus:outline-offset-0">
-              ...
-            </span>
-            <a
-              href="#"
-              class="relative hidden items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 md:inline-flex"
-            >
-              8
-            </a>
-            <a
-              href="#"
-              class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
-            >
-              9
-            </a>
-            <a
-              href="#"
-              class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
-            >
-              10
-            </a>
-            <a
-              href="#"
-              class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
-            >
-              <span class="sr-only">Next</span>
-              <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path
-                  fill-rule="evenodd"
-                  d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-            </a>
+            <.prev_link
+              :if={@page_links.prev_page}
+              page_number={@page_links.prev_page}
+              page_size={@pagination_params.page_size}
+            />
+            <.numbered_link
+              :for={page_number <- @page_links.visible_left_pages}
+              page_number={page_number}
+              page_size={@pagination_params.page_size}
+            />
+            <.separator :if={@page_links.left_separator} />
+            <.numbered_link
+              :for={page_number <- @page_links.middle_pages}
+              page_number={page_number}
+              active={page_number == @pagination_params.page}
+              page_size={@pagination_params.page_size}
+            />
+            <.separator :if={@page_links.right_separator} />
+            <.numbered_link
+              :for={page_number <- @page_links.visible_right_pages}
+              page_number={page_number}
+              page_size={@pagination_params.page_size}
+            />
+            <.next_link
+              :if={@page_links.next_page}
+              page_number={@page_links.next_page}
+              page_size={@pagination_params.page_size}
+            />
          </nav>
        </div>
      </div>
    </div>
    """
  end
+
+  attr :page_number, :integer, required: true
+  attr :page_size, :integer, required: true
+
+  defp next_link(assigns) do
+    ~H"""
+    <.link
+      class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
+      patch={"?" <> URI.encode_query(page: @page_number, page_size: @page_size)}
+    >
+      <span class="sr-only">Next</span>
+      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path
+          fill-rule="evenodd"
+          d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </.link>
+    """
+  end
+
+  attr :page_number, :integer, required: true
+  attr :page_size, :integer, required: true
+
+  defp prev_link(assigns) do
+    ~H"""
+    <.link
+      class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
+      patch={"?" <> URI.encode_query(page: @page_number, page_size: @page_size)}
+    >
+      <span class="sr-only">Previous</span>
+      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path
+          fill-rule="evenodd"
+          d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </.link>
+    """
+  end
+
+  defp separator(assigns) do
+    ~H"""
+    <span class="relative hidden items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 md:inline-flex">
+      ...
+    </span>
+    """
+  end
+
+  attr :page_number, :integer, required: true
+  attr :page_size, :integer, required: true
+  attr :active, :boolean, default: false
+
+  defp numbered_link(assigns) when assigns.active do
+    ~H"""
+    <span class="relative z-10 inline-flex items-center first:rounded-l-md last:rounded-r-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+      <%= @page_number %>
+    </span>
+    """
+  end
+
+  defp numbered_link(assigns) do
+    ~H"""
+    <.link
+      class="relative hidden items-center first:rounded-l-md last:rounded-r-md px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 md:inline-flex"
+      patch={"?" <> URI.encode_query(page: @page_number, page_size: @page_size)}
+    >
+      <%= @page_number %>
+    </.link>
+    """
+  end
+
+  def get_pagination_params(params, total_records) do
+    %{
+      total_entries: total_records,
+      page: parse_int_or_default(params["page"], 1),
+      page_size: parse_int_or_default(params["page_size"], 20)
+    }
+  end
+
+  def page_to_offset(page, per_page) do
+    (page - 1) * per_page
+  end
+
+  defp parse_int_or_default(nil, default), do: default
+
+  defp parse_int_or_default(value, _default) when is_binary(value) do
+    String.to_integer(value)
+  end
+
+  defp total_pages(total_entries, page_size) do
+    without_remainder = div(total_entries, page_size)
+
+    if rem(total_entries, page_size) == 0 do
+      without_remainder
+    else
+      without_remainder + 1
+    end
+  end
+
+  @visible_left_pages 3
+  @visible_right_pages 3
+  @middle "..."
+  defp generate_page_links(pagination_params) do
+    %{
+      total_entries: total_entries,
+      page: page,
+      page_size: page_size
+    } = pagination_params
+
+    total_pages = total_pages(total_entries, page_size)
+    all_pages = Enum.to_list(1..total_pages)
+
+    {left_pages, middle_pages, right_pages} =
+      Enum.reduce(all_pages, {[], [], []}, fn p, {left_p, middle_p, right_p} ->
+        cond do
+          p < page - 2 ->
+            {left_p ++ [p], middle_p, right_p}
+
+          p > page + 2 ->
+            {left_p, middle_p, right_p ++ [p]}
+
+          true ->
+            {left_p, middle_p ++ [p], right_p}
+        end
+      end)
+
+    prev_page = if page > 1, do: page - 1
+    next_page = if page < total_pages, do: page + 1
+
+    left_separator = if Enum.count(left_pages) > @visible_left_pages, do: @middle
+    right_separator = if Enum.count(right_pages) > @visible_right_pages, do: @middle
+
+    visible_left_pages = Enum.take(left_pages, @visible_left_pages)
+    visible_right_pages = Enum.take(right_pages, -@visible_right_pages)
+
+    %{
+      total_pages: total_pages,
+      prev_page: prev_page,
+      visible_left_pages: visible_left_pages,
+      left_separator: left_separator,
+      middle_pages: middle_pages,
+      right_separator: right_separator,
+      visible_right_pages: visible_right_pages,
+      next_page: next_page
+    }
+  end
 end
@@ -6,8 +6,17 @@ defmodule MusicLibraryWeb.RecordLive.Index do
  alias MusicLibrary.Records.Record

  @impl true
-  def mount(_params, _session, socket) do
-    {:ok, stream(socket, :records, Records.list_records())}
+  def mount(params, _session, socket) do
+    total_records = Records.count_records()
+
+    pagination_params = get_pagination_params(params, total_records)
+    offset = page_to_offset(pagination_params.page, pagination_params.page_size)
+    records = Records.list_records(limit: pagination_params.page_size, offset: offset)
+
+    {:ok,
+     socket
+     |> assign(:pagination_params, pagination_params)
+     |> stream(:records, records)}
  end

  @impl true
@@ -27,10 +36,25 @@ defmodule MusicLibraryWeb.RecordLive.Index do
    |> assign(:record, %Record{})
  end

-  defp apply_action(socket, :index, _params) do
-    socket
-    |> assign(:page_title, "Listing Records")
-    |> assign(:record, nil)
+  defp apply_action(socket, :index, params) do
+    new_socket =
+      socket
+      |> assign(:page_title, "Listing Records")
+      |> assign(:record, nil)
+
+    total_records = Records.count_records()
+    pagination_params = get_pagination_params(params, total_records)
+
+    if pagination_params != socket.assigns.pagination_params do
+      offset = page_to_offset(pagination_params.page, pagination_params.page_size)
+      records = Records.list_records(limit: pagination_params.page_size, offset: offset)
+
+      new_socket
+      |> assign(:pagination_params, pagination_params)
+      |> stream(:records, records, reset: true)
+    else
+      new_socket
+    end
  end

  @impl true
@@ -55,4 +55,4 @@
  />
 </.modal>

-<.card_footer entries={@streams.records} />
+<.pagination pagination_params={@pagination_params} />