From 68915c78a5fb75485973a53bfda322f0d57506cd Mon Sep 17 00:00:00 2001
From: Rainer Dema <rainer.dema@gmail.com>
Date: Wed, 20 Sep 2023 13:14:14 +0200
Subject: [PATCH 01/15] Remove order promotions promotion code value from
 search key

Removing "_or_order_promotions_promotion_code_value" from the `order_search_key`
preference.
This part of the search key was causing exceptions during pagination due
to missing columns in the SQLite database.
Specifically, the exception was :
"ActiveRecord::StatementInvalid (SQLite3::SQLException: no such column: order_promotions_spree_orders.promotion_code_id)".

Note: This bug fix will be evaluated in a separate PR.
---
 admin/lib/solidus_admin/configuration.rb | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/admin/lib/solidus_admin/configuration.rb b/admin/lib/solidus_admin/configuration.rb
index 4a745cb7d8c..cdb8fc9ad4b 100644
--- a/admin/lib/solidus_admin/configuration.rb
+++ b/admin/lib/solidus_admin/configuration.rb
@@ -75,10 +75,10 @@ class Configuration < Spree::Preferences::Configuration
     #   The key that specifies the attributes for searching orders within the admin interface.
     #   This preference controls which attributes of an order are used in search queries.
     #   By default, it is set to
-    #   'number_shipments_number_or_bill_address_name_or_email_order_promotions_promotion_code_value_cont',
-    #   enabling a search across order number, shipment number, billing address name, email, and promotion code value.
+    #   'number_or_shipments_number_or_bill_address_name_or_email_cont',
+    #   enabling a search across order number, shipment number, billing address name, email.
     #   @return [String] The search key used to determine order attributes for search.
-    preference :order_search_key, :string, default: :number_or_shipments_number_or_bill_address_name_or_email_or_order_promotions_promotion_code_value_cont
+    preference :order_search_key, :string, default: :number_or_shipments_number_or_bill_address_name_or_email_cont
 
     # @!attribute [rw] products_per_page
     #   @return [Integer] The number of products to display per page in the admin interface.

From 679001cf2e1f31cdbbf922ef11b461c3e0804bb4 Mon Sep 17 00:00:00 2001
From: Rainer Dema <rainer.dema@gmail.com>
Date: Thu, 28 Sep 2023 17:35:15 +0200
Subject: [PATCH 02/15] Include search_param in `ui/table` component

The ransack search param can now be dynamically set through the `ui/table`
component with a default value of `:q`.
---
 .../app/components/solidus_admin/ui/table/component.html.erb | 4 ++--
 admin/app/components/solidus_admin/ui/table/component.rb     | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/admin/app/components/solidus_admin/ui/table/component.html.erb b/admin/app/components/solidus_admin/ui/table/component.html.erb
index d391bab0648..fe2d7f758ec 100644
--- a/admin/app/components/solidus_admin/ui/table/component.html.erb
+++ b/admin/app/components/solidus_admin/ui/table/component.html.erb
@@ -27,8 +27,8 @@
         <label class="items-center gap-1 p-0 inline-flex w-full justify-start relative">
           <%= render component("ui/icon").new(name: 'search-line', class: "w-[1.4em] h-[1.4em] fill-gray-500 absolute ml-3") %>
           <input
-            name="q[<%= @search_key %>]"
-            value="<%= params.dig(:q, @search_key) %>"
+            name="<%= "#{@search_param}[#{@search_key}]" %>"
+            value="<%= params.dig(@search_param, @search_key) %>"
             type="search"
             placeholder="<%= t('.search_placeholder', resources: resource_plural_name) %>"
             class="peer w-full placeholder:text-gray-400 py-1.5 px-10 bg-white rounded border border-gray-300 search-cancel:appearance-none"
diff --git a/admin/app/components/solidus_admin/ui/table/component.rb b/admin/app/components/solidus_admin/ui/table/component.rb
index f9f576461c7..a1b262955f4 100644
--- a/admin/app/components/solidus_admin/ui/table/component.rb
+++ b/admin/app/components/solidus_admin/ui/table/component.rb
@@ -5,6 +5,7 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
   # @param model_class [ActiveModel::Translation] The model class used for translations.
   # @param rows [Array] The collection of objects that will be passed to columns for display.
   # @param fade_row_proc [Proc, nil] A proc determining if a row should have a faded appearance.
+  # @param search_param [Symbol] The param for searching.
   # @param search_key [Symbol] The key for searching.
   # @param search_url [String] The base URL for searching.
   #
@@ -31,8 +32,7 @@ def initialize(
     id:,
     model_class:,
     rows:,
-    search_key:,
-    search_url:,
+    search_key:, search_url:, search_param: :q,
     fade_row_proc: nil,
     columns: [],
     batch_actions: [],
@@ -47,6 +47,7 @@ def initialize(
     @model_class = model_class
     @rows = rows
     @fade_row_proc = fade_row_proc
+    @search_param = search_param
     @search_key = search_key
     @search_url = search_url
     @prev_page_link = prev_page_link

From c3744d4397ddd3e42ed6f8adbe739697cdb3daa8 Mon Sep 17 00:00:00 2001
From: Rainer Dema <rainer.dema@gmail.com>
Date: Thu, 28 Sep 2023 17:36:10 +0200
Subject: [PATCH 03/15] Update Stimulus actions for improved search behavior

In this way, the search will be triggered if there is any change in
the form and all the other internal data actions can be removed.
---
 admin/app/components/solidus_admin/ui/table/component.html.erb | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/admin/app/components/solidus_admin/ui/table/component.html.erb b/admin/app/components/solidus_admin/ui/table/component.html.erb
index fe2d7f758ec..81bf86ba1eb 100644
--- a/admin/app/components/solidus_admin/ui/table/component.html.erb
+++ b/admin/app/components/solidus_admin/ui/table/component.html.erb
@@ -21,7 +21,7 @@
           "data-turbo-frame": table_frame_id,
           "data-turbo-action": "replace",
           "data-#{stimulus_id}-target": "searchForm",
-          "data-action": "reset->#{stimulus_id}#search",
+          "data-action": "input->#{stimulus_id}#search change->#{stimulus_id}#search",
         },
       ) do |form| %>
         <label class="items-center gap-1 p-0 inline-flex w-full justify-start relative">
@@ -33,7 +33,6 @@
             placeholder="<%= t('.search_placeholder', resources: resource_plural_name) %>"
             class="peer w-full placeholder:text-gray-400 py-1.5 px-10 bg-white rounded border border-gray-300 search-cancel:appearance-none"
             data-<%= stimulus_id %>-target="searchField"
-            data-action="<%= stimulus_id %>#search"
             aria-label="<%= t('.search_placeholder', resources: resource_plural_name) %>"
           >
           <button

From 1850b996fd53c5121256c5399203ef1e38b3f38d Mon Sep 17 00:00:00 2001
From: Elia Schito <elia@schito.me>
Date: Tue, 10 Oct 2023 12:54:43 +0200
Subject: [PATCH 04/15] Round table borders directly instead of relying
 overflow:hidden

---
 .../solidus_admin/ui/table/component.html.erb  | 18 ++++++++++++------
 .../solidus_admin/ui/table/component.rb        | 15 +++++++--------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/admin/app/components/solidus_admin/ui/table/component.html.erb b/admin/app/components/solidus_admin/ui/table/component.html.erb
index 81bf86ba1eb..bb10ccbe83a 100644
--- a/admin/app/components/solidus_admin/ui/table/component.html.erb
+++ b/admin/app/components/solidus_admin/ui/table/component.html.erb
@@ -3,13 +3,16 @@
     rounded-lg
     border
     border-gray-100
-    overflow-hidden
   "
   data-controller="<%= stimulus_id %>"
   data-<%= stimulus_id %>-selected-row-class="bg-gray-15"
 >
-  <% toolbar_classes = "h-14 p-2 bg-white border-b border-gray-100 justify-start items-center gap-2 visible:flex hidden:hidden" %>
-
+  <% toolbar_classes = "
+    h-14 p-2 bg-white border-b border-gray-100
+    justify-start items-center gap-2
+    visible:flex hidden:hidden
+    rounded-t-lg
+  " %>
   <div role="search">
     <div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="searchToolbar">
       <%= form_with(
@@ -130,7 +133,10 @@
 
       <tbody class="bg-white text-3.5 line-[150%] text-black">
         <% @rows.each do |row| %>
-          <tr class="<%= row_class_for(row) %>">
+          <tr class="
+            border-b border-gray-100 last:border-0
+            <%= 'bg-gray-15 text-gray-700' if @fade_row_proc&.call(row) %>
+          ">
             <% @columns.each do |column| %>
               <%= render_data_cell(column.data, row) %>
             <% end %>
@@ -141,7 +147,7 @@
           <tr>
             <td
               colspan="<%= @columns.size %>"
-              class="text-center py-4 text-3.5 line-[150%] text-black bg-white"
+              class="text-center py-4 text-3.5 line-[150%] text-black bg-white rounded-b-lg"
             >
               <%= t('.no_resources_found', resources: resource_plural_name) %>
             </td>
@@ -152,7 +158,7 @@
       <% if @prev_page_link || @next_page_link %>
         <tfoot>
           <tr>
-            <td colspan="<%= @columns.size %>" class="py-4 bg-white">
+            <td colspan="<%= @columns.size %>" class="py-4 bg-white rounded-b-lg border-t border-gray-100">
               <div class="flex justify-center">
                 <%= render component('ui/table/pagination').new(
                   prev_link: @prev_page_link,
diff --git a/admin/app/components/solidus_admin/ui/table/component.rb b/admin/app/components/solidus_admin/ui/table/component.rb
index a1b262955f4..bbf5748469c 100644
--- a/admin/app/components/solidus_admin/ui/table/component.rb
+++ b/admin/app/components/solidus_admin/ui/table/component.rb
@@ -134,14 +134,13 @@ def render_data_cell(cell, data)
     cell = data.public_send(cell) if cell.is_a?(Symbol)
     cell = cell.render_in(self) if cell.respond_to?(:render_in)
 
-    content_tag(:td, content_tag(:div, cell, class: "flex items-center gap-1.5"), class: "py-2 px-4 h-10 vertical-align-middle leading-none")
-  end
-
-  def row_class_for(row)
-    classes = ['border-b', 'border-gray-100']
-    classes << ['bg-gray-15', 'text-gray-700'] if @fade_row_proc&.call(row)
-
-    classes.join(' ')
+    tag.td(
+      tag.div(cell, class: "flex items-center gap-1.5"),
+      class: "
+        py-2 px-4 h-10 vertical-align-middle leading-none
+        [tr:last-child_&:first-child]:rounded-bl-lg [tr:last-child_&:last-child]:rounded-br-lg
+      ",
+    )
   end
 
   Column = Struct.new(:header, :data, :class_name, keyword_init: true)

From 53e5b45864fda5d421e1ae5886d29a5f0be4c646 Mon Sep 17 00:00:00 2001
From: Elia Schito <elia@schito.me>
Date: Tue, 10 Oct 2023 12:06:09 +0200
Subject: [PATCH 05/15] Introduce dynamic ransack filter component for complex
 queries

Introduces a new Ransack filter component to dynamically generate advanced,
grouped query parameters.

Suppose you have a dropdown for: 'State', 'Variants', and 'Promotions',
And checkboxes for: 'state_eq', 'line_items_variant_id' and 'promotions_id'.

The component will dynamically create the following query parameters:
q[g][0][c][0][a][]: state
q[g][0][c][0][p]: eq
q[g][0][c][0][v][]: checkout
...
q[g][1][c][31][a][]: line_items_variant_id
q[g][1][c][31][p]: in
q[g][1][c][31][v][]: 2
...
q[g][2][c][42][a][]: promotions_id
q[g][2][c][42][p]: in
q[g][2][c][42][v][]: 8

This provides greater flexibility when configuring filters for the table component.

Usage in table component:

The `filters` method within the table component can be used to define the
attributes, predicates, and options for the dynamic filter.
This makes it convenient to set up intricate filters directly from the table
component's configuration.

For instance:
```
<%= render component('ui/table').new(
    ...
    filters: [
      {
        presentation: t('.filters.status'),
        combinator: 'or',
        attribute: "state",
        predicate: "eq",
        options: Spree::Order.state_machines[:state].states.map { |state| [state.value.titleize, state.value] }
      }
    ]
    ...
  ) %>
```
---
 .../solidus_admin/ui/table/component.html.erb | 15 +----
 .../solidus_admin/ui/table/component.rb       | 28 +++++++--
 .../table/ransack_filter/component.html.erb   | 57 +++++++++++++++++++
 .../ui/table/ransack_filter/component.js      |  8 +++
 .../ui/table/ransack_filter/component.rb      | 57 +++++++++++++++++++
 .../ui/table/ransack_filter/component.yml     |  4 ++
 .../table/ransack_filter/component_preview.rb | 24 ++++++++
 .../component_preview/overview.html.erb       | 21 +++++++
 .../ui/table/ransack_filter/component_spec.rb |  9 +++
 9 files changed, 205 insertions(+), 18 deletions(-)
 create mode 100644 admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb
 create mode 100644 admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
 create mode 100644 admin/app/components/solidus_admin/ui/table/ransack_filter/component.rb
 create mode 100644 admin/app/components/solidus_admin/ui/table/ransack_filter/component.yml
 create mode 100644 admin/spec/components/previews/solidus_admin/ui/table/ransack_filter/component_preview.rb
 create mode 100644 admin/spec/components/previews/solidus_admin/ui/table/ransack_filter/component_preview/overview.html.erb
 create mode 100644 admin/spec/components/solidus_admin/ui/table/ransack_filter/component_spec.rb

diff --git a/admin/app/components/solidus_admin/ui/table/component.html.erb b/admin/app/components/solidus_admin/ui/table/component.html.erb
index bb10ccbe83a..8815f515428 100644
--- a/admin/app/components/solidus_admin/ui/table/component.html.erb
+++ b/admin/app/components/solidus_admin/ui/table/component.html.erb
@@ -6,6 +6,7 @@
   "
   data-controller="<%= stimulus_id %>"
   data-<%= stimulus_id %>-selected-row-class="bg-gray-15"
+  data-action="<%= component("ui/table/ransack_filter").stimulus_id %>:search-><%= stimulus_id %>#search"
 >
   <% toolbar_classes = "
     h-14 p-2 bg-white border-b border-gray-100
@@ -59,18 +60,8 @@
 
     <% if @filters.any? %>
       <div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="filterToolbar">
-        <div class="font-semibold text-gray-700 text-sm px-2"><%= t('.refine_search') %>:</div>
-        <% @filters.each do |filter| %>
-          <label class="flex gap-2 px-2">
-            <%= render component('ui/forms/checkbox').new(
-              name: filter[:name],
-              value: filter[:value],
-              size: :s,
-              form: search_form_id,
-              'data-action': "#{stimulus_id}#search",
-            ) %>
-            <span class="text-gray-700 leading-none text-sm self-center"><%= filter[:label] %></span>
-          </label>
+        <% @filters.each_with_index do |filter, index| %>
+          <%= render_ransack_filter_dropdown(filter, index) %>
         <% end %>
       </div>
     <% end %>
diff --git a/admin/app/components/solidus_admin/ui/table/component.rb b/admin/app/components/solidus_admin/ui/table/component.rb
index bbf5748469c..a850c423f68 100644
--- a/admin/app/components/solidus_admin/ui/table/component.rb
+++ b/admin/app/components/solidus_admin/ui/table/component.rb
@@ -20,11 +20,14 @@ class SolidusAdmin::UI::Table::Component < SolidusAdmin::BaseComponent
   # @option batch_actions [String] :action The batch action path.
   # @option batch_actions [String] :method The batch action HTTP method for the provided path.
   #
-  #
-  # @param filters [Array<Hash>] The array of filter definitions.
-  # @option filters [String] :name The filter's name.
-  # @option filters [Any] :value The filter's value.
-  # @option filters [String] :label The filter's label.
+  # @param filters [Array<Hash>] The list of filter configurations to render.
+  # @option filters [String] :presentation The display name of the filter dropdown.
+  # @option filters [String] :combinator The combining logic of the filter dropdown.
+  # @option filters [String] :attribute The database attribute this filter modifies.
+  # @option filters [String] :predicate The predicate used for this filter (e.g., "eq" for equals).
+  # @option filters [Array<Array>] :options An array of arrays, each containing two elements:
+  #     1. A human-readable presentation of the filter option (e.g., "Active").
+  #     2. The actual value used for filtering (e.g., "active").
   #
   # @param prev_page_link [String, nil] The link to the previous page.
   # @param next_page_link [String, nil] The link to the next page.
@@ -113,6 +116,19 @@ def render_batch_action_button(batch_action)
     )
   end
 
+  def render_ransack_filter_dropdown(filter, index)
+    render component("ui/table/ransack_filter").new(
+      presentation: filter.presentation,
+      search_param: @search_param,
+      combinator: filter.combinator,
+      attribute: filter.attribute,
+      predicate: filter.predicate,
+      options: filter.options,
+      form: search_form_id,
+      index: index,
+    )
+  end
+
   def render_header_cell(cell, **attrs)
     cell = cell.call if cell.respond_to?(:call)
     cell = @model_class.human_attribute_name(cell) if cell.is_a?(Symbol)
@@ -145,6 +161,6 @@ def render_data_cell(cell, data)
 
   Column = Struct.new(:header, :data, :class_name, keyword_init: true)
   BatchAction = Struct.new(:display_name, :icon, :action, :method, keyword_init: true) # rubocop:disable Lint/StructNewOverride
-  Filter = Struct.new(:name, :value, :label, keyword_init: true)
+  Filter = Struct.new(:presentation, :combinator, :attribute, :predicate, :options, keyword_init: true)
   private_constant :Column, :BatchAction, :Filter
 end
diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb
new file mode 100644
index 00000000000..48a34333a89
--- /dev/null
+++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb
@@ -0,0 +1,57 @@
+<div class="<%= stimulus_id %>" data-controller="<%= stimulus_id %>">
+  <input type="hidden" form="<%= @form %>"
+         name="<%= @combinator.name %>"
+         value="<%= @combinator.value %>">
+
+  <details class="relative inline-block text-left" data-<%= stimulus_id %>-target="details">
+    <summary class="
+      inline-flex justify-center
+      rounded-full border border-gray-300
+      shadow-sm
+      px-3 py-2
+      text-sm font-medium text-gray-700
+      hover:bg-gray-50
+      focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500
+      [&::marker]:hidden
+      [&::-webkit-details-marker]:hidden
+      cursor-default
+    " data-<%= stimulus_id %>-target="summary">
+      <%= @presentation %>
+      <%= render component("ui/icon").new(name: 'arrow-down-s-fill', class: "w-[1.4em] h-[1.4em]") %>
+    </summary>
+
+    <div class="
+      absolute
+      left-0 mt-2 w-56
+      rounded-md shadow-lg
+      bg-white
+      ring-1 ring-black ring-opacity-5
+    ">
+      <div class="relative">
+        <div class="py-1 max-h-[240px] overflow-y-auto" role="menu" aria-orientation="vertical" aria-labelledby="options-menu" data-<%= stimulus_id %>-target="menu">
+          <% @selections.each do |selection| %>
+            <div class="px-4 py-2" data-<%= stimulus_id %>-target="option">
+              <input type="hidden" form="<%= @form %>"
+                     name="<%= selection.attribute.name %>"
+                     value="<%= selection.attribute.value %>">
+              <input type="hidden" form="<%= @form %>"
+                     name="<%= selection.predicate.name %>"
+                     value="<%= selection.predicate.value %>">
+
+              <%= render component('ui/forms/checkbox').new(
+                   name: selection.option.name,
+                   value: selection.option.value,
+                   size: :s,
+                   form: @form,
+                   "data-action": "#{stimulus_id}#search",
+                   "data-#{stimulus_id}-target": "checkbox"
+                 ) %>
+
+              <%= label_tag nil, selection.presentation, class: "ml-2 text-sm text-gray-700" %>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </details>
+</div>
diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
new file mode 100644
index 00000000000..c50f9442f09
--- /dev/null
+++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
@@ -0,0 +1,8 @@
+import { Controller } from '@hotwired/stimulus'
+export default class extends Controller {
+  static targets = ['details', 'summary', 'option', 'checkbox', 'menu']
+
+  search() {
+    this.dispatch('search')
+  }
+}
diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.rb b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.rb
new file mode 100644
index 00000000000..9012a18f7ab
--- /dev/null
+++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.rb
@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Table::RansackFilter::Component < SolidusAdmin::BaseComponent
+  # @param presentation [String] The label for the filter.
+  # @param search_param [String] The search parameter for the filter query.
+  # @param combinator [String] The combining logic for filter options.
+  # @param attribute [String] The database attribute the filter is based on.
+  # @param predicate [String] The comparison logic for the filter (e.g., "eq" for equals).
+  # @param options [Proc] A callable that returns filter options.
+  # @param index [Integer] The index of the filter.
+  # @param form [String] The form in which the filter resides.
+  def initialize(
+    presentation:,
+    combinator:, attribute:, predicate:, options:, form:, index:, search_param: :q
+)
+    @presentation = presentation
+    @group = "#{search_param}[g][#{index}]"
+    @combinator = build(:combinator, combinator)
+    @attribute = attribute
+    @predicate = predicate
+    @options = options
+    @form = form
+    @index = index
+  end
+
+  def before_render
+    @selections = @options.map.with_index do |(label, value), opt_index|
+      Selection.new(
+        label,
+        build(:attribute, @attribute, opt_index),
+        build(:predicate, @predicate, opt_index),
+        build(:option, value, opt_index)
+      )
+    end
+  end
+
+  # Builds form attributes for filter options.
+  #
+  # @param type [Symbol] The type of the form attribute.
+  # @param value [String] The value of the form attribute.
+  # @param opt_index [Integer] The index of the option, if applicable.
+  # @return [FormAttribute] The built form attribute.
+  def build(type, value, opt_index = nil)
+    suffix = SUFFIXES[type] % { index: opt_index || @index }
+    Attribute.new("#{@group}#{suffix}", value)
+  end
+
+  SUFFIXES = {
+    combinator: '[m]',
+    attribute: '[c][%<index>s][a][]',
+    predicate: '[c][%<index>s][p]',
+    option: '[c][%<index>s][v][]'
+  }
+
+  Selection = Struct.new(:presentation, :attribute, :predicate, :option, :checked)
+  Attribute = Struct.new(:name, :value)
+end
diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.yml b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.yml
new file mode 100644
index 00000000000..4dfdd7561c1
--- /dev/null
+++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.yml
@@ -0,0 +1,4 @@
+# Add your component translations here.
+# Use the translation in the example in your template with `t(".hello")`.
+en:
+  search: Search
diff --git a/admin/spec/components/previews/solidus_admin/ui/table/ransack_filter/component_preview.rb b/admin/spec/components/previews/solidus_admin/ui/table/ransack_filter/component_preview.rb
new file mode 100644
index 00000000000..7db9b1a0d76
--- /dev/null
+++ b/admin/spec/components/previews/solidus_admin/ui/table/ransack_filter/component_preview.rb
@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+# @component "ui/table/ransack_filter"
+class SolidusAdmin::UI::Table::RansackFilter::ComponentPreview < ViewComponent::Preview
+  include SolidusAdmin::Preview
+
+  def overview
+    render_with_template
+  end
+
+  # @param presentation
+  # @param search_bar select { choices: [[ Yes, 10], [ No, 3]] }
+  def playground(presentation: "Filter", search_bar: 10)
+    render current_component.new(
+      presentation: presentation,
+      combinator: 'or',
+      attribute: "attribute",
+      predicate: "eq",
+      options: Array.new(search_bar.to_i) { |o| [o, 0] },
+      index: 0,
+      form: "id"
+    )
+  end
+end
diff --git a/admin/spec/components/previews/solidus_admin/ui/table/ransack_filter/component_preview/overview.html.erb b/admin/spec/components/previews/solidus_admin/ui/table/ransack_filter/component_preview/overview.html.erb
new file mode 100644
index 00000000000..98ab773a6dd
--- /dev/null
+++ b/admin/spec/components/previews/solidus_admin/ui/table/ransack_filter/component_preview/overview.html.erb
@@ -0,0 +1,21 @@
+<table>
+  <tr>
+    <% {
+      'Colors': ['red', 'green', 'blue', 'white'],
+      'Sizes': ["XS", "S", "M", "L", "XL", "XXL", "XXXL"],
+    }.each do |presentation, options| %>
+      <td class="font-bold px-3 py-1"><%= presentation %></td>
+      <td class="px-3 py-1 text-center">
+        <%= render current_component.new(
+          presentation: presentation,
+          combinator: 'or',
+          attribute: "attribute",
+          predicate: "eq",
+          options: options.map {|o| [o, 0]},
+          index: 0,
+          form: "id"
+        )  %>
+      </td>
+    <% end %>
+  </tr>
+</table>
diff --git a/admin/spec/components/solidus_admin/ui/table/ransack_filter/component_spec.rb b/admin/spec/components/solidus_admin/ui/table/ransack_filter/component_spec.rb
new file mode 100644
index 00000000000..56b2de840c7
--- /dev/null
+++ b/admin/spec/components/solidus_admin/ui/table/ransack_filter/component_spec.rb
@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe SolidusAdmin::UI::Table::RansackFilter::Component, type: :component do
+  it "renders the overview preview" do
+    render_preview(:overview)
+  end
+end

From 01f75cf44018fe646b7c8eaa8aef5501908f9f53 Mon Sep 17 00:00:00 2001
From: Rainer Dema <rainer.dema@gmail.com>
Date: Thu, 28 Sep 2023 17:57:14 +0200
Subject: [PATCH 06/15] Implement dynamic checkboxes sorting within options

Sorts checkboxes based on their checked state, moving selected checkboxes to the top.
Improves user experience by making it easier to see active filters.
---
 .../ui/table/ransack_filter/component.html.erb       |  2 +-
 .../ui/table/ransack_filter/component.js             | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb
index 48a34333a89..d38424dd41d 100644
--- a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb
+++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb
@@ -43,7 +43,7 @@
                    value: selection.option.value,
                    size: :s,
                    form: @form,
-                   "data-action": "#{stimulus_id}#search",
+                   "data-action": "#{stimulus_id}#search #{stimulus_id}#sortCheckboxes",
                    "data-#{stimulus_id}-target": "checkbox"
                  ) %>
 
diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
index c50f9442f09..8dd75de1386 100644
--- a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
+++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
@@ -5,4 +5,16 @@ export default class extends Controller {
   search() {
     this.dispatch('search')
   }
+
+  sortCheckboxes() {
+    const checkboxes = this.checkboxTargets
+
+    checkboxes.sort((a, b) => {
+      if (a.checked && !b.checked) return -1
+      if (!a.checked && b.checked) return 1
+      return 0
+    }).forEach(checkbox => {
+      this.menuTarget.appendChild(checkbox.closest('div'))
+    })
+  }
 }

From 5f9aad19c952e2e1924be4186a1056af3d5043a2 Mon Sep 17 00:00:00 2001
From: Rainer Dema <rainer.dema@gmail.com>
Date: Thu, 28 Sep 2023 17:58:39 +0200
Subject: [PATCH 07/15] Add click outside to close details

Implements a click-outside event with `stimulus-use` to automatically close
the filter details dropdown.
---
 .../solidus_admin/ui/table/ransack_filter/component.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
index 8dd75de1386..d6234cb79f2 100644
--- a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
+++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
@@ -1,7 +1,17 @@
 import { Controller } from '@hotwired/stimulus'
+import { useClickOutside } from 'stimulus-use'
+
 export default class extends Controller {
   static targets = ['details', 'summary', 'option', 'checkbox', 'menu']
 
+  connect() {
+    useClickOutside(this)
+  }
+
+  clickOutside(event) {
+    this.detailsTarget.removeAttribute("open")
+  }
+
   search() {
     this.dispatch('search')
   }

From 2f41a2bb52115b606090c7d0058f6f45ebc269a3 Mon Sep 17 00:00:00 2001
From: Rainer Dema <rainer.dema@gmail.com>
Date: Thu, 28 Sep 2023 17:59:17 +0200
Subject: [PATCH 08/15] Introduce dynamic search bar when selections are more
 than 6

Adds a search input field inside the details dropdown whenever the number
of selections exceeds 6.
The search input allows for quick filtering of available options.
---
 .../ui/table/ransack_filter/component.html.erb            | 8 ++++++++
 .../solidus_admin/ui/table/ransack_filter/component.js    | 7 +++++++
 2 files changed, 15 insertions(+)

diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb
index d38424dd41d..77c8ae320af 100644
--- a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb
+++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb
@@ -28,6 +28,14 @@
       ring-1 ring-black ring-opacity-5
     ">
       <div class="relative">
+        <% if @selections.size > 6 %>
+          <div class="px-4 py-2 sticky top-0 z-50">
+            <input type="text"
+                   placeholder="<%= t('.search') %>"
+                   class="w-full px-2 py-1 border border-gray-300 rounded focus:border-indigo-500 focus:ring-indigo-500"
+                   data-action="input-><%= stimulus_id %>#filterOptions">
+          </div>
+        <% end %>
         <div class="py-1 max-h-[240px] overflow-y-auto" role="menu" aria-orientation="vertical" aria-labelledby="options-menu" data-<%= stimulus_id %>-target="menu">
           <% @selections.each do |selection| %>
             <div class="px-4 py-2" data-<%= stimulus_id %>-target="option">
diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
index d6234cb79f2..4810372b217 100644
--- a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
+++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
@@ -12,6 +12,13 @@ export default class extends Controller {
     this.detailsTarget.removeAttribute("open")
   }
 
+  filterOptions(event) {
+    const query = event.currentTarget.value.toLowerCase()
+    this.optionTargets.forEach((option) => {
+      option.style.display = option.textContent.toLowerCase().includes(query) ? 'block' : 'none'
+    })
+  }
+
   search() {
     this.dispatch('search')
   }

From f48eef8a609951d1e5782b6607bb20f7a39ddcc7 Mon Sep 17 00:00:00 2001
From: Rainer Dema <rainer.dema@gmail.com>
Date: Thu, 28 Sep 2023 18:02:14 +0200
Subject: [PATCH 09/15] Initialize checkboxes based on URL parameters

Uses URL query parameters to automatically check or uncheck checkboxes when
the component loads.
This is useful for sharing URLs with pre-applied filters.
---
 .../solidus_admin/ui/table/component.html.erb   |  5 ++++-
 .../ui/table/ransack_filter/component.html.erb  |  1 +
 .../ui/table/ransack_filter/component.js        | 17 ++++++++++++++++-
 .../ui/table/ransack_filter/component.rb        | 12 +++++++++++-
 4 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/admin/app/components/solidus_admin/ui/table/component.html.erb b/admin/app/components/solidus_admin/ui/table/component.html.erb
index 8815f515428..f8a9ba4f99a 100644
--- a/admin/app/components/solidus_admin/ui/table/component.html.erb
+++ b/admin/app/components/solidus_admin/ui/table/component.html.erb
@@ -6,7 +6,10 @@
   "
   data-controller="<%= stimulus_id %>"
   data-<%= stimulus_id %>-selected-row-class="bg-gray-15"
-  data-action="<%= component("ui/table/ransack_filter").stimulus_id %>:search-><%= stimulus_id %>#search"
+  data-action="
+    <%= component("ui/table/ransack_filter").stimulus_id %>:search-><%= stimulus_id %>#search
+    <%= component("ui/table/ransack_filter").stimulus_id %>:showSearch-><%= stimulus_id %>#showSearch
+  "
 >
   <% toolbar_classes = "
     h-14 p-2 bg-white border-b border-gray-100
diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb
index 77c8ae320af..b714f942bf1 100644
--- a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb
+++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb
@@ -49,6 +49,7 @@
               <%= render component('ui/forms/checkbox').new(
                    name: selection.option.name,
                    value: selection.option.value,
+                   checked: selection.checked,
                    size: :s,
                    form: @form,
                    "data-action": "#{stimulus_id}#search #{stimulus_id}#sortCheckboxes",
diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
index 4810372b217..6e955ede2cd 100644
--- a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
+++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
@@ -1,17 +1,28 @@
 import { Controller } from '@hotwired/stimulus'
-import { useClickOutside } from 'stimulus-use'
+import { useClickOutside, useDebounce } from 'stimulus-use'
 
 export default class extends Controller {
   static targets = ['details', 'summary', 'option', 'checkbox', 'menu']
+  static debounces = ['init']
 
   connect() {
+    useDebounce(this, { wait: 50 })
     useClickOutside(this)
+    this.init()
   }
 
   clickOutside(event) {
     this.detailsTarget.removeAttribute("open")
   }
 
+  init() {
+    this.showSearch()
+  }
+
+  showSearch() {
+    if (this.isAnyCheckboxChecked()) this.dispatch('showSearch')
+  }
+
   filterOptions(event) {
     const query = event.currentTarget.value.toLowerCase()
     this.optionTargets.forEach((option) => {
@@ -34,4 +45,8 @@ export default class extends Controller {
       this.menuTarget.appendChild(checkbox.closest('div'))
     })
   }
+
+  isAnyCheckboxChecked() {
+    return this.checkboxTargets.some(checkbox => checkbox.checked)
+  }
 }
diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.rb b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.rb
index 9012a18f7ab..e146b3c75e2 100644
--- a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.rb
+++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.rb
@@ -29,7 +29,8 @@ def before_render
         label,
         build(:attribute, @attribute, opt_index),
         build(:predicate, @predicate, opt_index),
-        build(:option, value, opt_index)
+        build(:option, value, opt_index),
+        checked?(value)
       )
     end
   end
@@ -45,6 +46,15 @@ def build(type, value, opt_index = nil)
     Attribute.new("#{@group}#{suffix}", value)
   end
 
+  # Determines if a given value should be checked based on the params.
+  #
+  # @param value [String] The value of the checkbox.
+  # @return [Boolean] Returns true if the checkbox should be checked, false otherwise.
+  def checked?(value)
+    conditions = params.dig(:q, :g, @index.to_s, :c)
+    conditions && conditions.values.any? { |c| c[:v]&.include?(value.to_s) }
+  end
+
   SUFFIXES = {
     combinator: '[m]',
     attribute: '[c][%<index>s][a][]',

From 983dcc9beb484c70e6d597c20e9d2e6159e0977e Mon Sep 17 00:00:00 2001
From: Rainer Dema <rainer.dema@gmail.com>
Date: Thu, 28 Sep 2023 18:02:52 +0200
Subject: [PATCH 10/15] Highlight the filter if there are selected options

---
 .../solidus_admin/ui/table/ransack_filter/component.js   | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
index 6e955ede2cd..e75c8425731 100644
--- a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
+++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
@@ -1,6 +1,8 @@
 import { Controller } from '@hotwired/stimulus'
 import { useClickOutside, useDebounce } from 'stimulus-use'
 
+const BG_GRAY = 'bg-gray-100'
+
 export default class extends Controller {
   static targets = ['details', 'summary', 'option', 'checkbox', 'menu']
   static debounces = ['init']
@@ -16,9 +18,15 @@ export default class extends Controller {
   }
 
   init() {
+    this.highlightFilter()
     this.showSearch()
   }
 
+  highlightFilter() {
+    const optionIsSelected = this.isAnyCheckboxChecked()
+    this.summaryTarget.classList.toggle(BG_GRAY, optionIsSelected)
+  }
+
   showSearch() {
     if (this.isAnyCheckboxChecked()) this.dispatch('showSearch')
   }
@@ -32,6 +40,7 @@ export default class extends Controller {
 
   search() {
     this.dispatch('search')
+    this.highlightFilter()
   }
 
   sortCheckboxes() {

From ca9e9f8cd7895c7b9bdcbd8a308288f27cb0b566 Mon Sep 17 00:00:00 2001
From: Rainer Dema <rainer.dema@gmail.com>
Date: Thu, 28 Sep 2023 18:03:22 +0200
Subject: [PATCH 11/15] Introduce new filters for the products index

---
 .../solidus_admin/products/index/component.rb | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/admin/app/components/solidus_admin/products/index/component.rb b/admin/app/components/solidus_admin/products/index/component.rb
index 0a0c744d7d4..b0ddcea548b 100644
--- a/admin/app/components/solidus_admin/products/index/component.rb
+++ b/admin/app/components/solidus_admin/products/index/component.rb
@@ -41,13 +41,20 @@ def batch_actions
   end
 
   def filters
-    [
+    Spree::OptionType.all.map do |option_type|
       {
-        name: 'q[with_discarded]',
-        value: true,
-        label: t('.filters.with_deleted'),
-      },
-    ]
+        presentation: option_type.presentation,
+        combinator: 'or',
+        attribute: "variants_option_values",
+        predicate: "in",
+        options: option_type.option_values.map do |option_value|
+          [
+            option_value.name,
+            option_value.id
+          ]
+        end
+      }
+    end
   end
 
   def columns

From 58d4bda910df3b6ee4e6b860ba45057306bb51fd Mon Sep 17 00:00:00 2001
From: Rainer Dema <rainer.dema@gmail.com>
Date: Thu, 28 Sep 2023 18:03:39 +0200
Subject: [PATCH 12/15] Introduce new filters for the orders index

---
 .../solidus_admin/orders/index/component.rb   | 62 ++++++++++++++++++-
 .../solidus_admin/orders/index/component.yml  |  6 +-
 2 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/admin/app/components/solidus_admin/orders/index/component.rb b/admin/app/components/solidus_admin/orders/index/component.rb
index 6f15d11dd9b..3872c65fe08 100644
--- a/admin/app/components/solidus_admin/orders/index/component.rb
+++ b/admin/app/components/solidus_admin/orders/index/component.rb
@@ -26,9 +26,65 @@ def batch_actions
   def filters
     [
       {
-        name: 'q[completed_at_not_null]',
-        value: 1,
-        label: t('.filters.only_show_complete_orders'),
+        presentation: t('.filters.status'),
+        combinator: 'or',
+        attribute: "state",
+        predicate: "eq",
+        options: Spree::Order.state_machines[:state].states.map do |state|
+          [
+            state.value.titleize,
+            state.value
+          ]
+        end
+      },
+
+      {
+        presentation: t('.filters.shipment_state'),
+        combinator: 'or',
+        attribute: "shipment_state",
+        predicate: "eq",
+        options: %i[backorder canceled partial pending ready shipped].map do |option|
+          [
+            option.to_s.capitalize,
+            option
+          ]
+        end
+      },
+      {
+        presentation: t('.filters.payment_state'),
+        combinator: 'or',
+        attribute: "payment_state",
+        predicate: "eq",
+        options: %i[balance_due checkout completed credit_owed invalid paid pending processing void].map do |option|
+          [
+            option.to_s.titleize,
+            option
+          ]
+        end
+      },
+      {
+        presentation: t('.filters.variants'),
+        combinator: 'or',
+        attribute: "line_items_variant_id",
+        predicate: "in",
+        options: Spree::Variant.all.map do |variant|
+          [
+            variant.descriptive_name,
+            variant.id
+          ]
+        end
+      },
+      {
+        presentation: t('.filters.promotions'),
+        combinator: 'or',
+        attribute: "promotions_id",
+        predicate: "in",
+        options: Spree::Promotion.all.map do |promotion|
+          [
+            promotion.name,
+            promotion.id
+          ]
+        end
       },
     ]
   end
diff --git a/admin/app/components/solidus_admin/orders/index/component.yml b/admin/app/components/solidus_admin/orders/index/component.yml
index 370e0d25504..a94a884aa5e 100644
--- a/admin/app/components/solidus_admin/orders/index/component.yml
+++ b/admin/app/components/solidus_admin/orders/index/component.yml
@@ -7,7 +7,11 @@ en:
       one: 1 Item
       other: '%{count} Items'
   filters:
-    only_show_complete_orders: Only show complete orders
+    status: Status
+    shipment_state: Shipment State
+    payment_state: Payment State
+    variants: Variants
+    promotions: Promotions
   date:
     formats:
       short: '%d %b %y'

From 0d54847d6545002ce49a58c11474df937c9d3ccd Mon Sep 17 00:00:00 2001
From: Rainer Dema <rainer.dema@gmail.com>
Date: Thu, 28 Sep 2023 18:50:48 +0200
Subject: [PATCH 13/15] Refactor event dispatching in Stimulus controllers

Switched from using `stimulus-use` dispatch to explicit bubbling.
While using `stimulus-use`, targeting an upstream controller without
specifying the controller's name wasn't feasible in this context.
I've reverted to explicitly setting the event's bubbling property.
---
 .../solidus_admin/ui/table/ransack_filter/component.js       | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
index e75c8425731..ac9489cea99 100644
--- a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
+++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.js
@@ -28,7 +28,8 @@ export default class extends Controller {
   }
 
   showSearch() {
-    if (this.isAnyCheckboxChecked()) this.dispatch('showSearch')
+    if (this.isAnyCheckboxChecked())
+      this.dispatch("showSearch")
   }
 
   filterOptions(event) {
@@ -39,7 +40,7 @@ export default class extends Controller {
   }
 
   search() {
-    this.dispatch('search')
+    this.dispatch("search")
     this.highlightFilter()
   }
 

From ef86996df98aa0eabe6aaa8cdeef2c9d54b0ca39 Mon Sep 17 00:00:00 2001
From: Rainer Dema <rainer.dema@gmail.com>
Date: Tue, 10 Oct 2023 17:30:35 +0200
Subject: [PATCH 14/15] Enable clickable filter labels for checkboxes

Enable functionality to allow users to toggle checkboxes by clicking
associated labels.
---
 .../solidus_admin/ui/table/ransack_filter/component.html.erb   | 3 ++-
 .../solidus_admin/ui/table/ransack_filter/component.rb         | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb
index b714f942bf1..1444c661ef7 100644
--- a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb
+++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb
@@ -47,6 +47,7 @@
                      value="<%= selection.predicate.value %>">
 
               <%= render component('ui/forms/checkbox').new(
+                   id: selection.id,
                    name: selection.option.name,
                    value: selection.option.value,
                    checked: selection.checked,
@@ -56,7 +57,7 @@
                    "data-#{stimulus_id}-target": "checkbox"
                  ) %>
 
-              <%= label_tag nil, selection.presentation, class: "ml-2 text-sm text-gray-700" %>
+              <%= label_tag selection.id, selection.presentation, class: "ml-2 text-sm text-gray-700" %>
             </div>
           <% end %>
         </div>
diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.rb b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.rb
index e146b3c75e2..46c485b7f1f 100644
--- a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.rb
+++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.rb
@@ -26,6 +26,7 @@ def initialize(
   def before_render
     @selections = @options.map.with_index do |(label, value), opt_index|
       Selection.new(
+        "#{stimulus_id}--#{label}-#{value}",
         label,
         build(:attribute, @attribute, opt_index),
         build(:predicate, @predicate, opt_index),
@@ -62,6 +63,6 @@ def checked?(value)
     option: '[c][%<index>s][v][]'
   }
 
-  Selection = Struct.new(:presentation, :attribute, :predicate, :option, :checked)
+  Selection = Struct.new(:id, :presentation, :attribute, :predicate, :option, :checked)
   Attribute = Struct.new(:name, :value)
 end

From 6e78e0af0e24d752654578ddad20035f6a3a268a Mon Sep 17 00:00:00 2001
From: Rainer Dema <rainer.dema@gmail.com>
Date: Tue, 10 Oct 2023 17:38:00 +0200
Subject: [PATCH 15/15] Add no-options message for empty filter

---
 .../table/ransack_filter/component.html.erb   | 44 +++++++++++--------
 .../ui/table/ransack_filter/component.yml     |  1 +
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb
index 1444c661ef7..1a6492f0e30 100644
--- a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb
+++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.html.erb
@@ -37,27 +37,33 @@
           </div>
         <% end %>
         <div class="py-1 max-h-[240px] overflow-y-auto" role="menu" aria-orientation="vertical" aria-labelledby="options-menu" data-<%= stimulus_id %>-target="menu">
-          <% @selections.each do |selection| %>
-            <div class="px-4 py-2" data-<%= stimulus_id %>-target="option">
-              <input type="hidden" form="<%= @form %>"
-                     name="<%= selection.attribute.name %>"
-                     value="<%= selection.attribute.value %>">
-              <input type="hidden" form="<%= @form %>"
-                     name="<%= selection.predicate.name %>"
-                     value="<%= selection.predicate.value %>">
+          <% if @selections.any? %>
+            <% @selections.each do |selection| %>
+              <div class="px-4 py-2" data-<%= stimulus_id %>-target="option">
+                <input type="hidden" form="<%= @form %>"
+                       name="<%= selection.attribute.name %>"
+                       value="<%= selection.attribute.value %>">
+                <input type="hidden" form="<%= @form %>"
+                       name="<%= selection.predicate.name %>"
+                       value="<%= selection.predicate.value %>">
 
-              <%= render component('ui/forms/checkbox').new(
-                   id: selection.id,
-                   name: selection.option.name,
-                   value: selection.option.value,
-                   checked: selection.checked,
-                   size: :s,
-                   form: @form,
-                   "data-action": "#{stimulus_id}#search #{stimulus_id}#sortCheckboxes",
-                   "data-#{stimulus_id}-target": "checkbox"
-                 ) %>
+                <%= render component('ui/forms/checkbox').new(
+                     id: selection.id,
+                     name: selection.option.name,
+                     value: selection.option.value,
+                     checked: selection.checked,
+                     size: :s,
+                     form: @form,
+                     "data-action": "#{stimulus_id}#search #{stimulus_id}#sortCheckboxes",
+                     "data-#{stimulus_id}-target": "checkbox"
+                   ) %>
 
-              <%= label_tag selection.id, selection.presentation, class: "ml-2 text-sm text-gray-700" %>
+                <%= label_tag selection.id, selection.presentation, class: "ml-2 text-sm text-gray-700" %>
+              </div>
+            <% end %>
+          <% else %>
+            <div class="px-4 py-2 text-sm text-gray-700">
+              <%= t('.no_filter_options') %>
             </div>
           <% end %>
         </div>
diff --git a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.yml b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.yml
index 4dfdd7561c1..cac8d2c2b8f 100644
--- a/admin/app/components/solidus_admin/ui/table/ransack_filter/component.yml
+++ b/admin/app/components/solidus_admin/ui/table/ransack_filter/component.yml
@@ -2,3 +2,4 @@
 # Use the translation in the example in your template with `t(".hello")`.
 en:
   search: Search
+  no_filter_options: No options available