Set Product Taxon and Option Type autocomplete dropdowns to use Platf…

…orm API (#11244)
spree · Aug 15, 2021 · d7daa2d · d7daa2d
1 parent f352861
commit d7daa2d
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 10 deletions.
diff --git a/backend/app/assets/javascripts/spree/backend/global/select2_autocomplete.es6 b/backend/app/assets/javascripts/spree/backend/global/select2_autocomplete.es6
@@ -34,11 +34,16 @@
 //  data-autocomplete-additional-term-value="Spree::Cms::Pages::Homepage"   <- Additional hard coded term | DEFAULT: null (not used)
 
 document.addEventListener('DOMContentLoaded', function() {
-  const select2Autocompletes = document.querySelectorAll('select.select2autocomplete')
-  select2Autocompletes.forEach(element => buildParamsFromDataAttrs(element))
+  loadAutoCompleteParams()
 })
 
-function buildParamsFromDataAttrs (element) {
+// eslint-disable-next-line no-unused-vars
+function loadAutoCompleteParams() {
+  const select2Autocompletes = document.querySelectorAll('select[data-autocomplete-url-value]')
+  select2Autocompletes.forEach(element => buildParamsFromDataAttrs(element))
+}
+
+function buildParamsFromDataAttrs(element) {
   $(element).select2Autocomplete({
     // Required Attributes
     apiUrl: Spree.routes[element.dataset.autocompleteUrlValue],
@@ -62,6 +67,8 @@ function buildParamsFromDataAttrs (element) {
 $.fn.select2Autocomplete = function(params) {
   // Required params
   const apiUrl = params.apiUrl || null
+  const resourcePlural = apiUrl.match(/([^/]*)\/*$/)[1]
+  const resourceSingular = resourcePlural.slice(0, -1)
 
   // Optional Params
   const select2placeHolder = params.placeholder || Spree.translations.search
@@ -76,14 +83,14 @@ $.fn.select2Autocomplete = function(params) {
 
   function formatList(values) {
     if (customReturnId) {
-      return values.map(function (obj) {
+      return values.map(function(obj) {
         return {
           id: obj.attributes[customReturnId],
           text: obj.attributes[returnAttribute]
         }
       })
     } else {
-      return values.map(function (obj) {
+      return values.map(function(obj) {
         return {
           id: obj.id,
           text: obj.attributes[returnAttribute]
@@ -101,8 +108,11 @@ $.fn.select2Autocomplete = function(params) {
       ajax: {
         url: apiUrl,
         headers: Spree.apiV2Authentication(),
-        data: function (params) {
+        data: function(params) {
           return {
+            fields: {
+              [resourceSingular]: returnAttribute
+            },
             filter: {
               [searchQuery]: params.term
             }
@@ -124,8 +134,11 @@ $.fn.select2Autocomplete = function(params) {
       ajax: {
         url: apiUrl,
         headers: Spree.apiV2Authentication(),
-        data: function (params) {
+        data: function(params) {
           return {
+            fields: {
+              [resourceSingular]: returnAttribute
+            },
             filter: {
               [searchQuery]: params.term,
               [additionalQuery]: additionalTerm

diff --git a/backend/app/assets/javascripts/spree/backend/option_type_autocomplete.js b/backend/app/assets/javascripts/spree/backend/option_type_autocomplete.js
@@ -1,6 +1,8 @@
 $.fn.optionTypeAutocomplete = function () {
   'use strict'
 
+  console.warn('optionTypeAutocomplete is deprecated and will be removed in Spree 5.0')
+
   this.select2({
     minimumInputLength: 2,
     multiple: true,
@@ -23,5 +25,9 @@ $.fn.optionTypeAutocomplete = function () {
 }
 
 $(document).ready(function () {
+  var productOptionTypeSelector = document.getElementById('product_option_type_ids')
+  if (productOptionTypeSelector == null) return
+  if (productOptionTypeSelector.hasAttribute('data-autocomplete-url-value')) return
+
   $('#product_option_type_ids').optionTypeAutocomplete()
 })
diff --git a/backend/app/assets/javascripts/spree/backend/taxon_autocomplete.js b/backend/app/assets/javascripts/spree/backend/taxon_autocomplete.js
@@ -2,6 +2,8 @@ $.fn.taxonAutocomplete = function() {
   'use strict'
 
   function formatTaxonList(values) {
+    console.warn('taxonAutocomplete is deprecated and will be removed in Spree 5.0')
+
     return values.map(function (obj) {
       return {
         id: obj.id,
@@ -20,7 +22,7 @@ $.fn.taxonAutocomplete = function() {
       data: function (params) {
         return {
           q: {
-            name_cont: params.term,
+            name_cont: params.term
           },
           token: Spree.api_key
         }
@@ -35,5 +37,9 @@ $.fn.taxonAutocomplete = function() {
 }
 
 $(document).ready(function () {
+  var productTaxonSelector = document.getElementById('product_taxon_ids')
+  if (productTaxonSelector == null) return
+  if (productTaxonSelector.hasAttribute('data-autocomplete-url-value')) return
+
   $('#product_taxon_ids').taxonAutocomplete()
 })
diff --git a/backend/app/views/spree/admin/products/_form.html.erb b/backend/app/views/spree/admin/products/_form.html.erb
@@ -204,7 +204,12 @@
       <%= f.label :taxon_ids, Spree.t(:taxons) %>
 
       <% if can? :modify, Spree::Classification %>
-        <%= f.select :taxon_ids, options_from_collection_for_select(@product.taxons, :id, :pretty_name, @product.taxon_ids), { include_hidden: true }, multiple: true, class: 'select2-hidden-accessible' %>
+        <%= f.select :taxon_ids, options_from_collection_for_select(@product.taxons, :id, :pretty_name, @product.taxon_ids),
+                                  { include_hidden: true },
+                                    multiple: true,
+                                    data: { autocomplete_url_value: 'taxons_api_v2',
+                                            autocomplete_return_attr_value: 'pretty_name',
+                                            autocomplete_multiple_value: true } %>
       <% elsif @product.taxons.any? %>
         <ul class="text_list">
           <% @product.taxons.each do |taxon| %>
@@ -223,7 +228,13 @@
       <%= f.label :option_type_ids, Spree.t(:option_types) %>
 
       <% if can? :modify, Spree::ProductOptionType %>
-        <%= f.select :option_type_ids, options_from_collection_for_select(@product.option_types, :id, :name, @product.option_type_ids), { include_hidden: true }, multiple: true, class: 'select2-hidden-accessible' %>
+      <%= f.select :option_type_ids, options_from_collection_for_select(@product.option_types, :id, :name, @product.option_type_ids),
+                                      { include_hidden: true },
+                                        multiple: true,
+                                        class: 'select2-hidden-accessible',
+                                        data: { autocomplete_url_value: 'option_types_api_v2',
+                                                autocomplete_return_attr_value: 'name',
+                                                autocomplete_multiple_value: true } %>
       <% elsif @product.option_types.any? %>
         <ul class="text_list">
           <% @product.option_types.each do |type| %>