feat(explorer): add first and last buttons to pagination (yetanotherco#737)

Author: glpecile

explorer/lib/explorer/models/batches.ex

@@ -87,6 +87,12 @@ defmodule Batches do
     Explorer.Repo.all(query)
   end
 
+  def get_last_page(page_size) do
+    total_batches = Explorer.Repo.aggregate(Batches, :count, :merkle_root)
+    last_page = div(total_batches, page_size)
+    if rem(total_batches, page_size) > 0, do: last_page + 1, else: last_page
+  end
+
   def get_amount_of_verified_batches() do
     query = from(b in Batches,
       where: b.is_verified == true,

explorer/lib/explorer_web/live/pages/batches/index.ex

@@ -13,18 +13,22 @@ defmodule ExplorerWeb.Batches.Index do
 
     PubSub.subscribe(Explorer.PubSub, "update_views")
 
-    {:ok, assign(socket, current_page: current_page, batches: batches, page_title: "Batches")}
+    {:ok,
+     assign(socket,
+       current_page: current_page,
+       batches: batches,
+       last_page: Batches.get_last_page(@page_size),
+       page_title: "Batches"
+     )}
   end
 
   @impl true
   def handle_info(_, socket) do
-    IO.puts("Received update for batches from PubSub")
-
     current_page = socket.assigns.current_page
 
     batches = Batches.get_paginated_batches(%{page: current_page, page_size: @page_size})
 
-    {:noreply, assign(socket, batches: batches)}
+    {:noreply, assign(socket, batches: batches, last_page: Batches.get_last_page(@page_size))}
   end
 
   @impl true

explorer/lib/explorer_web/live/pages/batches/index.html.heex

@@ -1,7 +1,7 @@
 <div class="flex flex-col space-y-3 text-foreground px-1 sm:max-w-lg md:max-w-3xl lg:max-w-5xl mx-auto capitalize">
   <.card_preheding>Latest Batches</.card_preheding>
   <%= if @batches != :empty and @batches != [] do %>
-    <.card_background class="overflow-x-auto">
+    <.card_background class="overflow-x-auto min-h-[38.45rem]">
       <table class={[
         "table-auto border-collapse w-full"
       ]}>
@@ -49,7 +49,14 @@
       <p class="text-lg text-muted-foreground">No batches found.</p>
     </.card_background>
   <% end %>
-  <div class="flex gap-x-2 items-center justify-center md:justify-start w-full">
+  <div class="flex gap-x-2 items-center justify-center w-full">
+    <%= if @current_page >= 2 do %>
+      <.link navigate={~p"/batches?page=#{1}"}>
+        <.button class="text-muted-foreground group">
+          First
+        </.button>
+      </.link>
+    <% end %>
     <%= if @current_page > 1 do %>
       <.link navigate={~p"/batches?page=#{@current_page - 1}"}>
         <.button
@@ -77,14 +84,21 @@
         min="1"
       />
     </form>
-    <.link navigate={~p"/batches?page=#{@current_page + 1}"}>
-      <.button
-        icon="arrow-right-solid"
-        icon_class="group-hover:translate-x-1 transition-all duration-150"
-        class="text-muted-foreground size-10 group"
-      >
-        <span class="sr-only">Next Page</span>
-      </.button>
-    </.link>
+    <%= if @current_page != @last_page do %>
+      <.link navigate={~p"/batches?page=#{@current_page + 1}"}>
+        <.button
+          icon="arrow-right-solid"
+          icon_class="group-hover:translate-x-1 transition-all duration-150"
+          class="text-muted-foreground size-10 group"
+        >
+          <span class="sr-only">Next Page</span>
+        </.button>
+      </.link>
+      <.link navigate={~p"/batches?page=#{@last_page}"}>
+        <.button class="text-muted-foreground group">
+          Last
+        </.button>
+      </.link>
+    <% end %>
   </div>
 </div>