From 461d31bef17e49706ca0007be101e9e174b612f7 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 21 Mar 2022 16:08:08 +0100
Subject: [PATCH] Create ProductsTable component that handle the table + all
 filters

---
 .../product_component.html.haml               |  4 ++--
 app/components/products_table_component.rb    | 22 +++++++++++++++++++
 .../products_table_component.html.haml        | 13 +++++++++++
 .../products_table_component.scss             | 16 ++++++++++++++
 app/views/admin/products/index.html.haml      | 13 +----------
 app/webpacker/css/admin/all.scss              |  1 +
 6 files changed, 55 insertions(+), 14 deletions(-)
 create mode 100644 app/components/products_table_component.rb
 create mode 100644 app/components/products_table_component/products_table_component.html.haml
 create mode 100644 app/components/products_table_component/products_table_component.scss

diff --git a/app/components/product_component/product_component.html.haml b/app/components/product_component/product_component.html.haml
index 93d671c30f..e9110779b8 100644
--- a/app/components/product_component/product_component.html.haml
+++ b/app/components/product_component/product_component.html.haml
@@ -4,9 +4,9 @@
       .image
         = image_tag @image.url(:mini)
     = @name
-  - if @columns.include?(:unit)
+  - if @columns.include?("unit")
     %td.products_column.unit
       = @unit
-  - if @columns.include?(:price)
+  - if @columns.include?("price")
     %td.products_column.price
       = @price
diff --git a/app/components/products_table_component.rb b/app/components/products_table_component.rb
new file mode 100644
index 0000000000..08450cd505
--- /dev/null
+++ b/app/components/products_table_component.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class ProductsTableComponent < ViewComponentReflex::Component
+  def initialize(user:)
+    super
+    @columns = ["price", "unit"]
+    @selected = ["price", "unit"]
+    @user = user
+
+    fetch_products
+  end
+
+  def toggle_column
+    column = element.dataset['value']
+    @selected = @selected.include?(column) ? @selected - [column] : @selected + [column]
+  end
+  private
+
+  def fetch_products
+    @products = Spree::Product.managed_by(@user).order('name asc').limit(@per_page_selected.first)
+  end
+end
diff --git a/app/components/products_table_component/products_table_component.html.haml b/app/components/products_table_component/products_table_component.html.haml
new file mode 100644
index 0000000000..7b26a021d4
--- /dev/null
+++ b/app/components/products_table_component/products_table_component.html.haml
@@ -0,0 +1,13 @@
+= component_controller do
+  #products_page_form
+    #filter_results
+      %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: @selected, items: @columns, data: { key: key, reflex: "click->ProductsTableComponent#toggle_column" }))
+
+  #products_table
+    %table
+      = render(ProductComponent.with_collection(@products, columns: @selected))
diff --git a/app/components/products_table_component/products_table_component.scss b/app/components/products_table_component/products_table_component.scss
new file mode 100644
index 0000000000..1eb4890bb8
--- /dev/null
+++ b/app/components/products_table_component/products_table_component.scss
@@ -0,0 +1,16 @@
+#products_page_form {
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+  grid-gap: 10px;
+  margin-bottom: 10px;
+  
+  #filter_results {
+
+  }
+  #columns_selector {
+
+  }
+}
+
+#products_table {
+}
diff --git a/app/views/admin/products/index.html.haml b/app/views/admin/products/index.html.haml
index d61e0681b8..ffb1dc1fc1 100644
--- a/app/views/admin/products/index.html.haml
+++ b/app/views/admin/products/index.html.haml
@@ -5,15 +5,4 @@
 = 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
-
-    #columns_selector
-      = render(SelectorComponent.new(title: "Columns", selected: [:price], items: [:price, :unit]))
-
-  #products_table
-    %table
-      = render(ProductComponent.with_collection(@products, columns: [:price]))
+  = render(ProductsTableComponent.new(user: spree_current_user))
diff --git a/app/webpacker/css/admin/all.scss b/app/webpacker/css/admin/all.scss
index 3bbe056ffc..75d5e4a88e 100644
--- a/app/webpacker/css/admin/all.scss
+++ b/app/webpacker/css/admin/all.scss
@@ -122,5 +122,6 @@
 @import 'app/components/help_modal_component/help_modal_component';
 @import "app/components/product_component/product_component";
 @import "app/components/selector_component/selector_component";
+@import "app/components/products_table_component/products_table_component";
 
 @import "v2/main.scss";