Merge pull request #71 from kubosuke/feat/fix-pagination

Fix pagination logic for not showing many pages
curiosum-dev · Oct 8, 2024 · 2749f0e · 2749f0e
2 parents 62964bd + 5ccbbbe
commit 2749f0e
Showing 1 changed file with 27 additions and 3 deletions.
diff --git a/lib/kanta_web/components/shared/pagination/pagination.ex b/lib/kanta_web/components/shared/pagination/pagination.ex
@@ -24,17 +24,41 @@ defmodule KantaWeb.Components.Shared.Pagination do
           </a>
         </div>
         <div class="hidden md:-mt-px md:flex">
-          <%= for page <- 1..@metadata[:total_pages] do %>
+          <a
+            phx-click={@on_page_change}
+            phx-value-index={1}
+            class={
+              if 1 == @metadata[:page_number], do: "border-primary-dark dark:border-accent-dark text-primary-dark dark:text-accent-dark border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium cursor-pointer", else: "border-transparent text-gray-500 dark:text-content-light/80 hover:text-gray-700 hover:dark:text-white hover:border-gray-300 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium cursor-pointer"
+            }
+          >
+            1
+          </a>
+          <%= if @metadata[:page_number] > 6 do %>
+            <span class="border-transparent text-gray-500 dark:text-content-light/80 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium">...</span>
+          <% end %>
+          <%= for page <- max(2, @metadata[:page_number] - 4)..min(@metadata[:total_pages] - 1, @metadata[:page_number] + 4) do %>
             <a
               phx-click={@on_page_change}
               phx-value-index={page}
               class={
                 if page == @metadata[:page_number], do: "border-primary-dark dark:border-accent-dark text-primary-dark dark:text-accent-dark border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium cursor-pointer", else: "border-transparent text-gray-500 dark:text-content-light/80 hover:text-gray-700 hover:dark:text-white hover:border-gray-300 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium cursor-pointer"
-                }
+              }
             >
-                <%= page %>
+              <%= page %>
             </a>
           <% end %>
+          <%= if @metadata[:page_number] < @metadata[:total_pages] - 5 do %>
+            <span class="border-transparent text-gray-500 dark:text-content-light/80 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium">...</span>
+          <% end %>
+          <a
+            phx-click={@on_page_change}
+            phx-value-index={@metadata[:total_pages]}
+            class={
+              if @metadata[:total_pages] == @metadata[:page_number], do: "border-primary-dark dark:border-accent-dark text-primary-dark dark:text-accent-dark border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium cursor-pointer", else: "border-transparent text-gray-500 dark:text-content-light/80 hover:text-gray-700 hover:dark:text-white hover:border-gray-300 border-t-2 pt-4 px-4 inline-flex items-center text-sm font-medium cursor-pointer"
+            }
+          >
+            <%= @metadata[:total_pages] %>
+          </a>
         </div>
         <div class="-mt-px w-0 flex-1 flex justify-end">
           <a phx-click={@on_page_change} phx-value-index={@metadata[:page_number] + 1}