From 4491c8d2081d37ff452ba9a844fe26e1a34a8b96 Mon Sep 17 00:00:00 2001 From: Claudio Ortolina Date: Wed, 20 Aug 2025 20:17:53 +0300 Subject: [PATCH] Migrate pagination to fluxon components --- .../components/pagination_component.ex | 87 ++++++------------- 1 file changed, 26 insertions(+), 61 deletions(-) diff --git a/lib/music_library_web/components/pagination_component.ex b/lib/music_library_web/components/pagination_component.ex index 2aabb408..697862ec 100644 --- a/lib/music_library_web/components/pagination_component.ex +++ b/lib/music_library_web/components/pagination_component.ex @@ -1,8 +1,5 @@ defmodule MusicLibraryWeb.PaginationComponent do - use Phoenix.Component - use Gettext, backend: MusicLibraryWeb.Gettext - - alias Phoenix.LiveView.JS + use MusicLibraryWeb, :html attr :pagination_params, :map, required: true attr :id, :atom, required: true @@ -23,38 +20,24 @@ defmodule MusicLibraryWeb.PaginationComponent do "flex flex-1 sm:hidden", justify_content(@page_links.prev_page, @page_links.next_page) ]}> - <.link + <.button :if={@page_links.prev_page} patch={"?" <> encode_query(page: @page_links.prev_page, page_size: @pagination_params.page_size, query: @pagination_params.query, order: @pagination_params.order)} phx-click={JS.dispatch("music_library:scroll_top")} - class={[ - "relative inline-flex items-center rounded-md border", - "px-3 py-2 text-sm font-medium", - "bg-zinc-900 hover:bg-zinc-700 dark:bg-zinc-100 dark:hover:bg-zinc-400", - "text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80", - "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600" - ]} > {gettext("Previous")} - - <.link + + <.button :if={@page_links.next_page} patch={"?" <> encode_query(page: @page_links.next_page, page_size: @pagination_params.page_size, query: @pagination_params.query, order: @pagination_params.order)} phx-click={JS.dispatch("music_library:scroll_top")} - class={[ - "relative ml-3 inline-flex items-center rounded-md border", - "px-3 py-2 text-sm font-medium", - "bg-zinc-900 hover:bg-zinc-700 dark:bg-zinc-100 dark:hover:bg-zinc-400", - "text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80", - "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600" - ]} > {gettext("Next")} - + @@ -111,23 +94,13 @@ defmodule MusicLibraryWeb.PaginationComponent do defp next_link(assigns) do ~H""" - <.link - class={[ - "relative inline-flex items-center rounded-r-md px-2 py-2", - "text-zinc-400 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-50 focus:z-20 focus:outline-offset-0" - ]} + <.button phx-click={JS.dispatch("music_library:scroll_top")} patch={"?" <> encode_query(page: @page_number, page_size: @page_size, query: @query, order: @order)} > {gettext("Next")} - - + <.icon name="hero-chevron-right" class="icon" aria-hidden="true" data-slot="icon" /> + """ end @@ -138,28 +111,21 @@ defmodule MusicLibraryWeb.PaginationComponent do defp prev_link(assigns) do ~H""" - <.link - class="relative inline-flex items-center rounded-l-md px-2 py-2 text-zinc-400 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-50 focus:z-20 focus:outline-offset-0" + <.button phx-click={JS.dispatch("music_library:scroll_top")} patch={"?" <> encode_query(page: @page_number, page_size: @page_size, query: @query, order: @order)} > {gettext("Previous")} - - + <.icon name="hero-chevron-left" class="icon" aria-hidden="true" data-slot="icon" /> + """ end - defp separator(assigns) do + defp ellipsis(assigns) do ~H""" - + """ end @@ -171,21 +137,20 @@ defmodule MusicLibraryWeb.PaginationComponent do defp numbered_link(assigns) when assigns.active do ~H""" - + <.button class="!bg-zinc-100 dark:!bg-zinc-700"> {@page_number} - + """ 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-zinc-900 dark:text-zinc-400 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-300 hover:text-zinc-500 focus:z-20 focus:outline-offset-0 md:inline-flex" + <.button phx-click={JS.dispatch("music_library:scroll_top")} patch={"?" <> encode_query(page: @page_number, page_size: @page_size, query: @query, order: @order)} > {@page_number} - + """ end @@ -244,8 +209,8 @@ defmodule MusicLibraryWeb.PaginationComponent do 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 + left_ellipsis = if Enum.count(left_pages) > @visible_left_pages, do: @middle + right_ellipsis = 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) @@ -255,9 +220,9 @@ defmodule MusicLibraryWeb.PaginationComponent do total_pages: total_pages, prev_page: prev_page, visible_left_pages: visible_left_pages, - left_separator: left_separator, + left_ellipsis: left_ellipsis, middle_pages: middle_pages, - right_separator: right_separator, + right_ellipsis: right_ellipsis, visible_right_pages: visible_right_pages, next_page: next_page }