Add search query input to search for product by name

app/components/products_table_component.rb

@@ -37,6 +37,7 @@ class ProductsTableComponent < ViewComponentReflex::Component
     @producers_selected = ["all"]
     @page = 1
     @sort = { column: "name", direction: "asc" }
+    @search_term = ""
   end
 
   def before_render
@@ -44,6 +45,10 @@ class ProductsTableComponent < ViewComponentReflex::Component
     refresh_columns
   end
 
+  def search_term
+    @search_term = element.dataset['value']
+  end
+
   def toggle_column
     column = element.dataset['value']
     @columns_selected = if @columns_selected.include?(column)
@@ -128,6 +133,8 @@ class ProductsTableComponent < ViewComponentReflex::Component
               query.merge({ supplier_id_in: @producers_selected })
             end
 
+    query = query.merge({ name_cont: @search_term }) if @search_term.present?
+
     if @categories_selected.include?("all")
       query.merge({ primary_taxon_id_eq: "" })
     else

app/components/products_table_component/products_table_component.html.haml

@@ -1,10 +1,7 @@
 = 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
-
+      = render(SearchInputComponent.new(value: @search_term, data: reflex_data_attributes(:search_term)))
     #categories_selector
       = render(SuperSelectorComponent.new(title: "Categories", selected: @categories_selected, items: @categories, data: reflex_data_attributes(:toggle_category)))
     #producers_selector