From 19fdfbaccb4e63ea56f50f67e6ead4f5106f1586 Mon Sep 17 00:00:00 2001
From: Gaetan Craig-Riou <gaetan.riou@gmail.com>
Date: Wed, 23 Apr 2025 11:42:10 +1000
Subject: [PATCH] Style the select tag filter

---
 .../admin/products_v3/_filters.html.haml      |  5 +++-
 .../css/admin_v3/components/tom_select.scss   | 25 +++++++++++++++++++
 config/locales/en.yml                         |  1 +
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/app/views/admin/products_v3/_filters.html.haml b/app/views/admin/products_v3/_filters.html.haml
index e6db2216cd..f86bfd6248 100644
--- a/app/views/admin/products_v3/_filters.html.haml
+++ b/app/views/admin/products_v3/_filters.html.haml
@@ -19,7 +19,10 @@
       data: { "controller": "tom-select", 'tom-select-placeholder-value': t('.search_for_categories')}
   .tags
     = label_tag :tags_name_in, t('.tags.label')
-    = select_tag :tags_name_in, options_for_select(ActsAsTaggableOn::Tag.for_context("variant_tag").distinct.order(:name).pluck(:name), @tags), { class: "fullwidth", multiple: true }
+    - select_tag_options = { class: "fullwidth",
+                             multiple: true ,
+                             data: { controller: "tom-select", "tom-select-placeholder-value": t(".select_tag"), "tom-select-options-value": '{ "maxItems": 5 , "plugins": { "remove_button": {} , "no_active_items": {},  "checkbox_options": { "checkedClassNames": ["ts-checked"], "uncheckedClassNames": ["ts-unchecked"] } } }' } }
+    = select_tag :tags_name_in, options_for_select(ActsAsTaggableOn::Tag.for_context("variant_tag").distinct.order(:name).pluck(:name), @tags), select_tag_options
   .submit
     .search-button
       = button_tag t(".search"), class: "secondary icon-search relaxed", name: nil
diff --git a/app/webpacker/css/admin_v3/components/tom_select.scss b/app/webpacker/css/admin_v3/components/tom_select.scss
index b1335e796a..b8fe640c64 100644
--- a/app/webpacker/css/admin_v3/components/tom_select.scss
+++ b/app/webpacker/css/admin_v3/components/tom_select.scss
@@ -70,6 +70,31 @@
   }
 }
 
+// Style the select tags filter
+.ts-wrapper {
+  &.multi {
+    &.has-items {
+      .ts-control {
+        [data-value] {
+          background-image: none;
+          background-color: $teal;
+          box-shadow: none;
+          border: none;
+        }
+      }
+    }
+  }
+
+  &.plugin-remove_button:not(.rtl) {
+    .item {
+      .remove {
+        border-left: 1px solid darken($teal, 5);
+        margin-left: 6px;
+      }
+    }
+  }
+}
+
 .plugin-dropdown_input {
   .ts-dropdown {
     // Cover up the control with the input
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 6441105f08..0e3732fcbb 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -969,6 +969,7 @@ en:
         search_for_categories: Search for categories
         select_category: Select category
         all_categories: All categories
+        select_tag: Select tag 
         producers:
           label: Producers
         categories: