Implement basic transaction pagination (#531)

* install pagy

* add pagy to controller, display default pagy UI

* display hardcoded custom UI to confirm styling

* implement custom UI with pagy methods

* move pagination into partial

* use lucide icons

* only display pagination if 2 or more pages are available

* add mobile pagination placeholder

* use link_to and display greyed out buttons when no prev or next needed

* sort transactions by date so grouping works appropriately with pagination

* add space between mobile view buttons

* remove debugging

Gemfile

@@ -31,6 +31,7 @@ gem "bcrypt", "~> 3.1.7"
 gem "inline_svg"
 gem "tzinfo-data", platforms: %i[ windows jruby ]
 gem "faraday"
+gem "pagy"
 
 group :development, :test do
   gem "debug", platforms: %i[ mri windows ]

Gemfile.lock

@@ -239,6 +239,7 @@ GEM
       racc (~> 1.4)
     nokogiri (1.16.2-x86_64-linux)
       racc (~> 1.4)
+    pagy (7.0.10)
     parallel (1.24.0)
     parser (3.3.0.5)
       ast (~> 2.4.1)
@@ -403,6 +404,7 @@ DEPENDENCIES
   inline_svg
   letter_opener
   lucide-rails!
+  pagy
   pg (~> 1.5)
   propshaft
   puma (>= 5.0)

app/controllers/application_controller.rb

@@ -1,5 +1,6 @@
 class ApplicationController < ActionController::Base
   include Authentication
+  include Pagy::Backend
 
   default_form_builder ApplicationFormBuilder
 

app/controllers/transactions_controller.rb

@@ -3,7 +3,7 @@ class TransactionsController < ApplicationController
   before_action :set_transaction, only: %i[ show edit update destroy ]
 
   def index
-    @transactions = Current.family.transactions
+    @pagy, @transactions = pagy(Current.family.transactions.order(date: :desc), items: 50)
   end
 
   def show

app/helpers/application_helper.rb

@@ -1,4 +1,6 @@
 module ApplicationHelper
+  include Pagy::Frontend
+
   def title(page_title)
     content_for(:title) { page_title }
   end

app/views/transactions/_pagination.html.erb

@@ -0,0 +1,57 @@
+<!-- start mobile pagination -->
+  <div class="flex flex-1 justify-center md:hidden">
+    <% if pagy.prev %>
+      <%= link_to 'Previous', pagy_url_for(pagy, pagy.prev), class: "relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50" %>
+    <% else %>
+      <div class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-200" >Previous</div>
+    <% end %>
+
+    <% if pagy.next %>
+      <%= link_to 'Next', pagy_url_for(pagy, pagy.next), 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-500 hover:bg-gray-50" %>
+    <% else %>
+      <div 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-200" >Next</div>
+    <% end %>
+  </div>
+<!-- end mobile pagination -->
+
+<!-- start desktop pagination -->
+<div class="hidden md:-mt-px md:flex">
+  <div>
+    <% if pagy.prev %>
+      <%= link_to pagy_url_for(pagy, pagy.prev), class: "inline-flex items-center  px-3 py-3 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" do %>
+        <%= lucide_icon("chevron-left", class: "w-5 h-5 text-gray-500") %>
+      <% end %>
+    <% else %>
+      <div class="inline-flex items-center px-3 py-3 text-sm font-medium hover:border-gray-300" >
+        <%= lucide_icon("chevron-left", class: "w-5 h-5 text-gray-200") %>
+      </div>
+    <% end %>
+  </div>
+  <div class="bg-gray-25 rounded-xl">
+    <% pagy.series.each do |series_item| %>
+      <% if series_item.is_a?(Integer) %>
+        <%= link_to pagy_url_for(pagy, series_item), class: "inline-flex items-center  px-3 py-3 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" do %>
+          <%= series_item %>
+        <% end %>
+      <% elsif series_item.is_a?(String) %>
+        <%= link_to pagy_url_for(pagy, series_item), class: "shadow-lg ring-2 ring-inset ring-gray-200 rounded-xl bg-white inline-flex items-center m-1 px-4 py-2 text-sm font-medium text-gray-900" do %>
+          <%= series_item %>
+        <% end %>
+      <% elsif series_item == :gap %>
+        <span class="inline-flex items-center  px-3 py-3 text-sm font-medium text-gray-500">...</span>
+      <% end %>
+    <% end %>
+  </div>
+    <div>
+      <% if pagy.next %>
+        <%= link_to pagy_url_for(pagy, pagy.next), class: "inline-flex items-center  px-3 py-3 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" do %>
+          <%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-500") %>
+        <% end %>
+      <% else %>
+        <div class="inline-flex items-center px-3 py-3 text-sm font-medium hover:border-gray-300" >
+          <%= lucide_icon("chevron-right", class: "w-5 h-5 text-gray-200") %>
+        </div>
+      <% end %>
+    </div>
+</div>
+<!-- end desktop pagination -->

app/views/transactions/index.html.erb

@@ -70,6 +70,11 @@
           <%= render partial: "transactions/transaction_group", locals: { date: date, transactions: grouped_transactions } %>
         <% end %>
       </div>
+      <% if @pagy.pages > 1 %>
+        <nav class="flex items-center justify-center px-4 sm:px-0">
+          <%= render partial: "transactions/pagination", locals: { pagy: @pagy } %>
+        </nav>
+      <% end %>
     <% end %>
   </div>
 </div>