chore: pagy 8 support (avo-hq#2752)

.ruby-version

@@ -0,0 +1 @@
+3.3.0

Gemfile

@@ -174,3 +174,6 @@ gem "avo-money_field"
 # Avo record_link field
 # gem "avo-record_link_field", path: "./../avo-record_link_field"
 gem "avo-record_link_field"
+
+# gem "pagy", "< 8.0.0"
+gem "pagy", "> 8"

Gemfile.lock

@@ -371,7 +371,7 @@ GEM
     nokogiri (1.16.3-x86_64-linux)
       racc (~> 1.4)
     orm_adapter (0.5.0)
-    pagy (7.0.6)
+    pagy (8.4.0)
     parallel (1.24.0)
     parser (3.3.0.5)
       ast (~> 2.4.1)
@@ -671,6 +671,7 @@ DEPENDENCIES
   meta-tags
   money-rails (~> 1.12)
   net-smtp
+  pagy (> 8)
   pg (>= 0.18, < 2.0)
   pluggy!
   prefixed_ids

app/assets/stylesheets/css/pagination.css

@@ -1,63 +1,103 @@
-.pagy-nav,
-.pagy-nav-js,
-.pagy-combo-nav-js {
-  @apply relative z-0 flex;
-}
-
-.pagy-nav.pagination,
-.pagy-nav-js.pagination,
-.pagy-combo-nav-js.pagination {
-  @apply space-x-2;
-}
+.pagy-gem-version-7 {
+  .pagy-nav,
+  .pagy-nav-js,
+  .pagy-combo-nav-js {
+    @apply relative z-0 flex;
+  }
 
-.pagy-nav .page a{
-  @apply block;
-}
+  .pagy-nav.pagination,
+  .pagy-nav-js.pagination,
+  .pagy-combo-nav-js.pagination {
+    @apply space-x-2;
+  }
 
-.pagy-nav .page a,
-.pagy-nav .page.active a,
-.pagy-nav .page.prev.disabled a,
-.pagy-nav .page.next.disabled a,
-.pagy-nav-js .page a,
-.pagy-combo-nav-js .page a,
-.pagy-combo-nav-js .pagy-combo-input a {
-  @apply rounded px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300;
-
-  &:hover{
-    @apply bg-gray-150;
+  .pagy-nav .page a{
+    @apply block;
   }
 
-  &:active{
-    @apply bg-gray-200;
+  .pagy-nav .page a,
+  .pagy-nav .page.active a,
+  .pagy-nav .page.prev.disabled a,
+  .pagy-nav .page.next.disabled a,
+  .pagy-nav-js .page a,
+  .pagy-combo-nav-js .page a,
+  .pagy-combo-nav-js .pagy-combo-input a {
+    @apply rounded px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300;
+
+    &:hover{
+      @apply bg-gray-150;
+    }
+
+    &:active{
+      @apply bg-gray-200;
+    }
   }
-}
 
-.pagy-nav .page.prev.disabled a,
-.pagy-nav-js .page.prev.disabled a,
-.pagy-combo-nav-js .page.prev.disabled a,
-.pagy-nav .page.next.disabled a,
-.pagy-nav-js .page.next.disabled a,
-.pagy-combo-nav-js .page.next.disabled a {
-  @apply text-gray-300 cursor-default;
+  .pagy-nav .page.prev.disabled a,
+  .pagy-nav-js .page.prev.disabled a,
+  .pagy-combo-nav-js .page.prev.disabled a,
+  .pagy-nav .page.next.disabled a,
+  .pagy-nav-js .page.next.disabled a,
+  .pagy-combo-nav-js .page.next.disabled a {
+    @apply text-gray-300 cursor-default;
+
+    &:hover {
+      @apply text-gray-300 bg-white;
+    }
 
-  &:hover {
-    @apply text-gray-300 bg-white;
+    &:active {
+      @apply text-gray-300 bg-white;
+    }
   }
 
-  &:active {
-    @apply text-gray-300 bg-white;
+  .pagy-nav .page.active a,
+  .pagy-nav-js .page.active a {
+    @apply text-white cursor-default bg-gray-500 border-gray-500;
+
+    &:hover {
+      @apply text-white bg-gray-500;
+    }
+
+    &:active {
+      @apply bg-gray-500 text-white;
+    }
   }
 }
 
-.pagy-nav .page.active a,
-.pagy-nav-js .page.active a {
-  @apply text-white cursor-default bg-gray-500 border-gray-500;
+.pagy-gem-version-8-or-more {
+  .pagy.nav {
+    @apply relative z-0 flex space-x-2;
 
-  &:hover {
-    @apply text-white bg-gray-500;
-  }
+    a.gap {
+      @apply text-gray-500;
+    }
+
+    & a:not(.gap) {
+      @apply block rounded px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300;
+
+      &:hover{
+        @apply bg-gray-150;
+      }
+
+      &:active{
+        @apply bg-gray-200;
+      }
+
+      &.current {
+        @apply text-white cursor-default bg-gray-500 border-gray-500;
+
+        &:hover {
+          @apply text-white bg-gray-500;
+        }
+
+        &:active {
+          @apply bg-gray-500 text-white;
+        }
+      }
 
-  &:active {
-    @apply bg-gray-500 text-white;
+      &[aria-disabled="true"]:not(.current) {
+        @apply bg-gray-100 text-gray-300 cursor-default;
+      }
+    }
   }
 }

app/components/avo/paginator_component.html.erb

@@ -22,7 +22,7 @@
     </div>
   </div>
   <div class="flex">
-    <div class="flex-2 sm:flex sm:items-center sm:justify-between space-y-2 sm:space-y-0 text-center sm:text-left">
+    <div class="flex-2 sm:flex sm:items-center sm:justify-between space-y-2 sm:space-y-0 text-center sm:text-left pagy-gem-version-<%= pagy_major_version %>">
       <% if @resource.pagination_type.default? %>
         <div class="text-sm text-slate-600 mr-4"><%== helpers.pagy_info @pagy %></div>
       <% end %>

app/components/avo/paginator_component.rb

@@ -42,4 +42,13 @@ def per_page_options
       options.sort.uniq
     end
   end
+
+  def pagy_major_version
+    return nil unless defined?(Pagy::VERSION)
+    version = Pagy::VERSION&.split(".")&.first&.to_i
+
+    return "8-or-more" if version >= 8
+
+    version
+  end
 end

lib/avo/concerns/pagination.rb

@@ -38,7 +38,8 @@ def apply_pagination(index_params:, query:)
         send PAGINATION_METHOD[pagination_type.to_sym],
           query,
           items: index_params[:per_page],
-          link_extra: "data-turbo-frame=\"#{params[:turbo_frame]}\"",
+          link_extra: "data-turbo-frame=\"#{params[:turbo_frame]}\"", # Add extra arguments in pagy 7.
+          anchor_string: "data-turbo-frame=\"#{params[:turbo_frame]}\"", # Add extra arguments in pagy 8.
           params: extra_pagy_params,
           size: pagination_hash[:size]
       end

spec/dummy/db/seeds.rb

@@ -43,6 +43,7 @@
   users.push(FactoryBot.create(:user, team_id: teams.sample.id))
 end
 
+# Login with this one
 User.create(
   first_name: "Avo",
   last_name: "Cado",