Create Selector component

Add a onClickOutside behavior that close the component if clicked outside

Selector component doesn't handle its state but receive props from parent

u

app/components/selector_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class SelectorComponent < ViewComponentReflex::Component
+  def initialize(title:, selected:, items:, data: {})
+    @title = title
+    @items = items.map do |item|
+      {
+        id: item,
+        name: I18n.t("admin.products_page.columns_selector.#{item}"),
+        selected: selected.include?(item)
+      }
+    end
+    @state = :close
+    @data = data
+  end
+
+  def toggle
+    @state = @state == :open ? :close : :open
+  end
+
+  def close
+    @state = :close
+  end
+end

app/components/selector_component/selector_component.html.haml

@@ -0,0 +1,10 @@
+= component_controller do
+  .selector{ class: ("selector_close" if @state == :close) }
+    .selector_main 
+      .selector_main_title 
+        = @title
+      .selector_arrow{data: reflex_data_attributes(:toggle)}
+    .selector_items
+      - @items.each do |item|
+        .selector_item{id: item[:id], class: ("selected" if item[:selected]), data: @data, "data-value": item[:id]}
+          = item[:name]

app/views/admin/products/index.html.haml

@@ -1,14 +1,19 @@
+
 - content_for :page_title do
   New Products Page
 
 = render partial: 'spree/admin/shared/product_sub_menu'
 
+#products_page
+  #products_page_form
+    #filter_results
+      %input.search{type: 'text', placeholder: 'Search', id: 'search_query'}
+      %button.btn.btn-primary{type: 'submit'}
+        Filter results
 
-%div
-  %input.search{type: 'text', placeholder: 'Search', id: 'search_query'}
-  %button.btn.btn-primary{type: 'submit'}
-    Filter results
+    #columns_selector
+      = render(SelectorComponent.new(title: "Columns", selected: [:price], items: [:price, :unit]))
 
-#new_products
-  %table.products_table
-    = render(ProductComponent.with_collection(@products, columns: [:price, :unit]))
+  #products_table
+    %table
+      = render(ProductComponent.with_collection(@products, columns: [:price]))

app/webpacker/controllers/selector_controller.js

@@ -0,0 +1,18 @@
+import ApplicationController from "./application_controller";
+
+export default class extends ApplicationController {
+  connect() {
+    super.connect();
+    window.addEventListener("click", this.closeOnClickOutside);
+  }
+  disconnect() {
+    super.disconnect();
+    window.removeEventListener("click", this.closeOnClickOutside);
+  }
+
+  closeOnClickOutside = (event) => {
+    if (!this.element.contains(event.target)) {
+      this.stimulate("SelectorComponent#close", this.element);
+    }
+  };
+}

config/locales/en.yml

@@ -458,6 +458,10 @@ en:
 # Admin
 #
   admin:
+    products_page:
+      columns_selector:
+        unit: Unit
+        price: Price
     adjustments:
       skipped_changing_canceled_order: "You can't change a cancelled order."
     # Common properties / models