Merge pull request #11407 from jibees/10878-buu-pagination-tweaks

🚧 BUU: Pagination tweaks

app/reflexes/products_reflex.rb

@@ -82,7 +82,8 @@ class ProductsReflex < ApplicationReflex
   def fetch_products
     product_query = OpenFoodNetwork::Permissions.new(current_user)
       .editable_products.merge(product_scope).ransack(ransack_query).result
-    @pagy, @products = pagy(product_query.order(:name), items: @per_page, page: @page)
+    @pagy, @products = pagy(product_query.order(:name), items: @per_page, page: @page,
+                                                        size: [1, 2, 2, 1])
   end
 
   def product_scope

app/views/admin/products_v3/_content.html.haml

@@ -11,7 +11,8 @@
       .sixteen.columns
         = render partial: 'sort', locals: { pagy: pagy, search_term: search_term, producer_id: producer_id, category_id: category_id }
     = render partial: 'table', locals: { products: products }
-    = render partial: 'admin/shared/v3/pagy', locals: { pagy: pagy, reflex: "click->Products#fetch" }
+    - if pagy.pages > 1
+      = render partial: 'admin/shared/v3/pagy', locals: { pagy: pagy, reflex: "click->Products#fetch" }
   - else
     #no-products
       = render partial: "no_products", locals: { search_term: search_term, producer_id: producer_id, category_id: category_id }

app/views/admin/shared/v3/_pagy.html.haml

@@ -2,9 +2,6 @@
   - if pagy.prev
     %a.page.prev{ href: "#", id: "pagy-prev", "data-reflex": reflex, "data-perPage": pagy.items, "data-page": pagy.prev || 1, "aria-label": "previous"}
       %i.icon-chevron-left
-  - else
-    %span.page.prev.disabled
-      %i.icon-chevron-left
   - pagy.series.each do |item|       # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
     - if item.is_a?(Integer)         # page link
       %a.page{ href: "#", id:"pagy-#{item}", "data-reflex": reflex, "data-perPage": pagy.items, "data-page": item, "aria-label": "page #{item}"}
@@ -16,6 +13,3 @@
   - if pagy.next
     %a.page.next{ href: "#", id:"pagy-next", "data-reflex": reflex, "data-perPage": pagy.items, "data-page": pagy.next || pagy.last, "aria-label": "next"}
       %i.icon-chevron-right
-  - else
-    %span.page.next.disabled
-      %i.icon-chevron-right

app/webpacker/css/admin_v3/components/pagination.scss

@@ -1,10 +1,14 @@
 .pagination {
   text-align: center;
   margin: 0 0 1em;
-  padding: 10px 0;
+  padding: 20px 0 28px 0;
 
   background-color: $color-7;
 
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+
   .page {
     width: 40px;
     line-height: 40px;
@@ -14,7 +18,13 @@
     background-color: $color-1;
     @include defaultBoxShadow;
     border-radius: 4px;
-    color: $color-9;
+    color: $color-8;
+    font-weight: 600;
+
+    &.current,
+    &.gap {
+      cursor: default;
+    }
 
     &.current {
       background-color: $color-5;
@@ -22,15 +32,28 @@
     }
 
     &.prev {
-      margin-right: 20px;
+      margin-right: 28px; // 28+8 (the gap) = 36px : the space between the arrows and the numbers
+      & > i {
+        padding-left: 2px;
+      }
     }
 
     &.next {
-      margin-left: 20px;
+      margin-left: 28px; // 28+8 (the gap) = 36px : the space between the arrows and the numbers
+      & > i {
+        padding-left: 6px;
+      }
     }
 
-    &.disabled {
-      cursor: default;
+    &[href]:hover {
+      background-color: $color-5;
+      color: $white;
+    }
+
+    &.gap {
+      background-color: transparent;
+      box-shadow: none;
+      width: auto;
     }
   }
 
@@ -46,9 +69,5 @@
       background-color: $red;
       cursor: default;
     }
-
-    &.disabled {
-      display: none;
-    }
   }
 }

spec/system/admin/products_v3/products_spec.rb

@@ -73,7 +73,6 @@ describe 'As an admin, I can see the new product page' do
         search_for "searchable product"
 
         expect(page).to have_field "search_term", with: "searchable product"
-        expect_page_to_be 1
         expect_products_count_to_be 1
       end
 
@@ -85,14 +84,12 @@ describe 'As an admin, I can see the new product page' do
         expect_per_page_to_be 15
         expect_products_count_to_be 15
         search_for "searchable product"
-        expect_page_to_be 1
         expect_products_count_to_be 1
       end
 
       it "can clear filters" do
         search_for "searchable product"
         expect(page).to have_field "search_term", with: "searchable product"
-        expect_page_to_be 1
         expect_products_count_to_be 1
         expect(page).to have_selector "table.products tbody tr td", text: product_by_name.name
 
@@ -118,7 +115,6 @@ describe 'As an admin, I can see the new product page' do
         search_by_producer "Producer 1"
 
         expect(page).to have_select "producer_id", selected: "Producer 1"
-        expect_page_to_be 1
         expect_products_count_to_be 1
       end
     end
@@ -133,7 +129,6 @@ describe 'As an admin, I can see the new product page' do
         search_by_category "Category 1"
 
         expect(page).to have_select "category_id", selected: "Category 1"
-        expect_page_to_be 1
         expect_products_count_to_be 1
         expect(page).to have_selector "table.products tbody tr td", text: product_by_category.name
       end