From 1a4a33227ef0fa8882e9badb5bd0650acb3bf2c0 Mon Sep 17 00:00:00 2001
From: cyrillefr <cyrille.vasseur@gmail.com>
Date: Mon, 27 May 2024 16:37:41 +0200
Subject: [PATCH] Producers selects are to be populated on focus

 - added a new Stimulus controller to display one line selects
 - that are to be populated when getting focus to avoid repeating
 - 10 times same option lists
 - on focus, select is populated by the data stored in template.
 - data that used to be source for each select (and so repeated) is
 - now stored once in a template
---
 .../admin/products_v3/_product_row.html.haml  | 15 +++++---
 .../producers_select_controller.js            | 37 +++++++++++++++++++
 2 files changed, 46 insertions(+), 6 deletions(-)
 create mode 100644 app/webpacker/controllers/producers_select_controller.js

diff --git a/app/views/admin/products_v3/_product_row.html.haml b/app/views/admin/products_v3/_product_row.html.haml
index 0908652009..269fa03a17 100644
--- a/app/views/admin/products_v3/_product_row.html.haml
+++ b/app/views/admin/products_v3/_product_row.html.haml
@@ -1,3 +1,5 @@
+%template{ id: "producer_options"}
+  = options_for_select(producer_options, product.supplier_id)
 %td.with-image{ id: "image-#{product.id}" }
   = render partial: "product_image", locals: { product: }
 %td.field.align-left.header.naked_inputs
@@ -26,12 +28,13 @@
 %td.align-right
   -# empty
 %td.naked_inputs
-  = render(SearchableDropdownComponent.new(form: f,
-      name: :supplier_id,
-      aria_label: t('.producer_field_name'),
-      options: producer_options,
-      selected_option: product.supplier_id,
-      placeholder_value: t('admin.products_v3.filters.search_for_producers')))
+  = f.select :supplier_id,
+    options_for_select([producer_options.find{ |option| option[1] == product.supplier_id }], product.supplier_id),
+    {},
+    class: "fullwidth no-input",
+    'aria-label': t('.producer_field_name'),
+    data: { "controller": "producers-select",
+      "producers-select-placeholder-value": t('admin.products_v3.filters.search_for_producers')}
 %td.align-left
   -# empty
 %td.align-left
diff --git a/app/webpacker/controllers/producers_select_controller.js b/app/webpacker/controllers/producers_select_controller.js
new file mode 100644
index 0000000000..304848c2c6
--- /dev/null
+++ b/app/webpacker/controllers/producers_select_controller.js
@@ -0,0 +1,37 @@
+import TomSelect from "./tom_select_controller";
+
+const minimumOptionsForSearchField = 11;
+
+export default class extends TomSelect {
+  static values = { options: Object, placeholder: String };
+
+  connect(options = {}) {
+    const template = this.template();
+    let additional_options = {};
+    const lines_of_option = template.content.children.length; 
+
+    if (lines_of_option < minimumOptionsForSearchField) {
+      additional_options.plugins = [];  
+    }
+
+    super.connect(additional_options);
+    this.control.on('focus', this.fetchProducers.bind(this));
+  }
+
+  disconnect() {
+    if (this.control) this.control.destroy();
+  }
+  
+  fetchProducers() {
+    if ((Object.keys(this.control.options).length) > 1) return false;
+
+    const template = this.template();
+    Array.from(template.content.children).forEach((option) => {
+      this.control.addOption({value: option.value, text: option.text});
+    }); 
+  }
+  
+  template() {
+    return document.querySelector("#producer_options");
+  }
+}