Add a per page component

This is still a WIP.

app/reflexes/products_v3_reflex.rb

@@ -4,8 +4,26 @@ class ProductsV3Reflex < ApplicationReflex
   include Pagy::Backend
 
   def fetch
-    fetch_products(element.dataset.page || 1, element.dataset.per_page || 15)
+    @page = element.dataset.page || 1
+    @per_page ||= 15
 
+    fetch_products
+
+    render_products
+  end
+
+  def change_per_page
+    @per_page = element.value.to_i
+    @page = 1
+
+    fetch_products
+
+    render_products
+  end
+
+  private
+
+  def render_products
     cable_ready.replace(
       selector: "#products-content",
       html: render(partial: "admin/products_v3/content",
@@ -15,13 +33,11 @@ class ProductsV3Reflex < ApplicationReflex
     morph :nothing
   end
 
-  private
-
   # copied from ProductsTableComponent
-  def fetch_products(page, per_page)
+  def fetch_products
     product_query = OpenFoodNetwork::Permissions.new(current_user)
       .editable_products.merge(product_scope)
-    @pagy, @products = pagy(product_query.order(:name), items: per_page, page:)
+    @pagy, @products = pagy(product_query.order(:name), items: @per_page, page: @page)
   end
 
   def product_scope

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

@@ -1,2 +1,6 @@
 #sort
-  = t(".pagination.total_html", total: pagy.count, from: pagy.from, to: pagy.to)
+  %div
+    = t(".pagination.total_html", total: pagy.count, from: pagy.from, to: pagy.to)
+  %div.with-dropdown
+    = t(".pagination.per_page.show")
+    = select_tag :per_page, options_for_select([15, 25, 50, 100].collect{|i| [t('.pagination.per_page.per_page', num: i), i]}, pagy.items), data: { action: "change->productsV3#changePerPage" }

app/webpacker/controllers/productsV3_controller.js

@@ -15,13 +15,33 @@ export default class extends ApplicationController {
     this.stimulate("ProductsV3#fetch");
   };
 
-  beforeFetch(element, reflex, noop, reflexId) {
-    const event = new CustomEvent("show-loading");
-    document.dispatchEvent(event);
+  changePerPage = (event) => {
+    this.stimulate("ProductsV3#change_per_page", event.target);
+  };
+
+  beforeChangePerPage() {
+    this.showLoading();
   }
 
-  afterFetch(element, reflex, noop, reflexId) {
+  afterChangePerPage() {
+    this.hideLoading();
+  }
+
+  beforeFetch() {
+    this.showLoading();
+  }
+
+  afterFetch() {
+    this.hideLoading();
+  }
+
+  showLoading = () => {
+    const event = new CustomEvent("show-loading");
+    document.dispatchEvent(event);
+  };
+
+  hideLoading = () => {
     const event = new CustomEvent("hide-loading");
     document.dispatchEvent(event);
-  }
+  };
 }

app/webpacker/css/admin/products_v3.scss

@@ -85,5 +85,15 @@
 
   #sort {
     margin-bottom: 1em;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .with-dropdown {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 10px;
+    }
   }
 }

config/locales/en.yml

@@ -770,6 +770,9 @@ en:
       sort:
         pagination:
           total_html: "<strong>%{total} products</strong> in your catalogue. Showing %{from} to %{to}."
+          per_page:
+            show: Show
+            per_page: "%{num} per page"
       content:
         no_products_found: No products found
         import_products: Import multiple products