From 7516872bed018c12993a0f872e9b6787a809ce8f Mon Sep 17 00:00:00 2001
From: Sascha Karnatz <68833+kulturbande@users.noreply.github.com>
Date: Mon, 27 May 2024 17:20:36 +0200
Subject: [PATCH 1/3] Fix variant select ingredient

The Variant select didn't showed any result, because the text and frontend_display are not available on the variant entity. It is now replaced by a multiline output to make it easier to find the correct product variant.
---
 .../alchemy/solidus/admin/variant_select.js   | 32 +++++++++++++------
 .../_spree_variant_editor.html.erb            | 22 ++++++++++++-
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/alchemy/solidus/admin/variant_select.js b/app/assets/javascripts/alchemy/solidus/admin/variant_select.js
index 160452a..c9f573b 100644
--- a/app/assets/javascripts/alchemy/solidus/admin/variant_select.js
+++ b/app/assets/javascripts/alchemy/solidus/admin/variant_select.js
@@ -1,7 +1,25 @@
 //= require alchemy/solidus/admin/select2_config
 
 $.fn.alchemyVariantSelect = function(options) {
-  var config = Alchemy.Solidus.getSelect2Config(options)
+  const config = Alchemy.Solidus.getSelect2Config(options)
+
+  function formatSelection(variant) {
+    return variant.options_text ? `${variant.name} - ${variant.options_text}` : variant.name
+  }
+
+  function formatResult(variant) {
+    return `
+      <div class="variant-select-result">  
+        <div>
+          <span>${variant.name}</span>
+        </div>
+        <div>
+          <span>${variant.options_text}</span>
+          <span>${variant.sku}</span>
+        </div>
+      </div>       
+    `
+  }
 
   this.select2($.extend(true, config, {
     ajax: {
@@ -15,18 +33,12 @@ $.fn.alchemyVariantSelect = function(options) {
       },
       results: function(data, page) {
         return {
-          results: data.variants.map(function(variant) {
-            return {
-              id: variant.id,
-              text: variant.frontend_display
-            }
-          }),
+          results: data.variants,
           more: page * data.per_page < data.total_count
         }
       }
     },
-    formatSelection: function(variant) {
-      return variant.text || variant.frontend_display
-    }
+    formatSelection,
+    formatResult
   }))
 }
diff --git a/app/views/alchemy/ingredients/_spree_variant_editor.html.erb b/app/views/alchemy/ingredients/_spree_variant_editor.html.erb
index 5a4ebf4..b87d227 100644
--- a/app/views/alchemy/ingredients/_spree_variant_editor.html.erb
+++ b/app/views/alchemy/ingredients/_spree_variant_editor.html.erb
@@ -10,6 +10,25 @@
   <% end %>
 <% end %>
 
+<style>
+  .variant-select-result > * {
+    display: flex;
+    justify-content: space-between;
+    min-height: 16px;
+
+    > span {
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &:last-child {
+      color: hsl(224, 8%, 63%);
+    }
+  }
+</style>
+
 <script>
   $('#<%= spree_variant_editor.form_field_id(:variant_id) %>').alchemyVariantSelect({
     placeholder: "<%= Alchemy.t(:search_variant, scope: 'solidus') %>",
@@ -19,7 +38,8 @@
     <% if spree_variant_editor.variant %>
     initialSelection: {
       id: <%= spree_variant_editor.variant.id %>,
-      text: "<%= spree_variant_editor.variant.name %>"
+      name: "<%= spree_variant_editor.variant.name %>",
+      options_text: "<%= spree_variant_editor.variant.options_text %>"
     }
     <% end %>
   })

From 0e4d6de0e203fa0cbfa2ea07fb6b9ebea988941b Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Tue, 28 May 2024 09:33:34 +0200
Subject: [PATCH 2/3] Format variant_select with prettier

---
 .../alchemy/solidus/admin/variant_select.js   | 53 +++++++++++--------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/alchemy/solidus/admin/variant_select.js b/app/assets/javascripts/alchemy/solidus/admin/variant_select.js
index c9f573b..c5e894d 100644
--- a/app/assets/javascripts/alchemy/solidus/admin/variant_select.js
+++ b/app/assets/javascripts/alchemy/solidus/admin/variant_select.js
@@ -1,15 +1,17 @@
 //= require alchemy/solidus/admin/select2_config
 
-$.fn.alchemyVariantSelect = function(options) {
+$.fn.alchemyVariantSelect = function (options) {
   const config = Alchemy.Solidus.getSelect2Config(options)
 
   function formatSelection(variant) {
-    return variant.options_text ? `${variant.name} - ${variant.options_text}` : variant.name
+    return variant.options_text
+      ? `${variant.name} - ${variant.options_text}`
+      : variant.name
   }
 
   function formatResult(variant) {
     return `
-      <div class="variant-select-result">  
+      <div class="variant-select-result">
         <div>
           <span>${variant.name}</span>
         </div>
@@ -17,28 +19,33 @@ $.fn.alchemyVariantSelect = function(options) {
           <span>${variant.options_text}</span>
           <span>${variant.sku}</span>
         </div>
-      </div>       
+      </div>
     `
   }
 
-  this.select2($.extend(true, config, {
-    ajax: {
-      data: function(term, page) {
-        return {
-          q: $.extend({
-            product_name_or_sku_cont: term
-          }, options.query_params),
-          page: page
-        }
+  this.select2(
+    $.extend(true, config, {
+      ajax: {
+        data: function (term, page) {
+          return {
+            q: $.extend(
+              {
+                product_name_or_sku_cont: term,
+              },
+              options.query_params
+            ),
+            page: page,
+          }
+        },
+        results: function (data, page) {
+          return {
+            results: data.variants,
+            more: page * data.per_page < data.total_count,
+          }
+        },
       },
-      results: function(data, page) {
-        return {
-          results: data.variants,
-          more: page * data.per_page < data.total_count
-        }
-      }
-    },
-    formatSelection,
-    formatResult
-  }))
+      formatSelection,
+      formatResult,
+    })
+  )
 }

From ca4d0339c8ba88b61cfd609d861f59793c107591 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Tue, 28 May 2024 09:36:39 +0200
Subject: [PATCH 3/3] Highlight search term in variant select

---
 .../alchemy/solidus/admin/variant_select.js            | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/alchemy/solidus/admin/variant_select.js b/app/assets/javascripts/alchemy/solidus/admin/variant_select.js
index c5e894d..acbdc73 100644
--- a/app/assets/javascripts/alchemy/solidus/admin/variant_select.js
+++ b/app/assets/javascripts/alchemy/solidus/admin/variant_select.js
@@ -9,15 +9,19 @@ $.fn.alchemyVariantSelect = function (options) {
       : variant.name
   }
 
-  function formatResult(variant) {
+  function formatResult(variant, _el, query) {
+    const matchTerm = new RegExp(query.term, "gi")
+    const formatMatch = (match) => `<em>${match}</em>`
+    const name = variant.name.replace(matchTerm, formatMatch)
+    const sku = variant.sku.replace(matchTerm, formatMatch)
     return `
       <div class="variant-select-result">
         <div>
-          <span>${variant.name}</span>
+          <span>${name}</span>
         </div>
         <div>
           <span>${variant.options_text}</span>
-          <span>${variant.sku}</span>
+          <span>${sku}</span>
         </div>
       </div>
     `