From 574adb88d2f031a86c2b9bd92ab1a62d41af7a76 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 27 Jun 2023 16:12:44 +0200
Subject: [PATCH] Add a per page component

This is still a WIP.
---
 app/reflexes/products_v3_reflex.rb            | 26 ++++++++++++----
 app/views/admin/products_v3/_sort.html.haml   |  6 +++-
 .../controllers/productsV3_controller.js      | 30 +++++++++++++++----
 app/webpacker/css/admin/products_v3.scss      | 10 +++++++
 config/locales/en.yml                         |  3 ++
 5 files changed, 64 insertions(+), 11 deletions(-)

diff --git a/app/reflexes/products_v3_reflex.rb b/app/reflexes/products_v3_reflex.rb
index 79e7a6055e..c81ef81eba 100644
--- a/app/reflexes/products_v3_reflex.rb
+++ b/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
diff --git a/app/views/admin/products_v3/_sort.html.haml b/app/views/admin/products_v3/_sort.html.haml
index 607d99596b..393c426cb1 100644
--- a/app/views/admin/products_v3/_sort.html.haml
+++ b/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" }
diff --git a/app/webpacker/controllers/productsV3_controller.js b/app/webpacker/controllers/productsV3_controller.js
index 62b653c4db..da2dff341f 100644
--- a/app/webpacker/controllers/productsV3_controller.js
+++ b/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);
-  }
+  };
 }
diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss
index 98a5463499..7eb5a11411 100644
--- a/app/webpacker/css/admin/products_v3.scss
+++ b/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;
+    }
   }
 }
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 30a073dcdf..acc3392d23 100644
--- a/config/locales/en.yml
+++ b/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