Add TableHeader component and better columns implementation

app/components/product_component.rb

@@ -8,8 +8,8 @@ class ProductComponent < ViewComponentReflex::Component
     @name = @product.name
     @columns = columns.map { |c|
       {
-        id: c,
-        value: column_value(c)
+        id: c[:value],
+        value: column_value(c[:value])
       }
     }
   end

app/components/product_component/product_component.html.haml

@@ -1,9 +1,11 @@
 %tr
-  %td.products_column.title
-    - if @image
-      .image
-        = image_tag @image.url(:mini)
-    = @name
   - @columns.each do |column|
-    %td.products_column{class: column[:id]}
-      = column[:value]
+    - if column[:id] == "name"
+      %td.products_column.title
+        - if @image
+          .image
+          = image_tag @image.url(:mini)
+        = @name
+    - else
+      %td.products_column{class: column[:id]}
+        = column[:value]

app/components/products_table_component.rb

@@ -3,15 +3,21 @@
 class ProductsTableComponent < ViewComponentReflex::Component
   include Pagy::Backend
 
+  SORTABLE_COLUMNS = ["name"].freeze
+
   def initialize(user:)
     super
     @user = user
-    @columns = [{ label: I18n.t("admin.products_page.columns_selector.price"), value: "price" },
-                { label: I18n.t("admin.products_page.columns_selector.unit"), value: "unit" },
-                { label: I18n.t("admin.products_page.columns_selector.producer"),
-                  value: "producer" },
-                { label: I18n.t("admin.products_page.columns_selector.category"),
-                  value: "category" }].sort { |a, b| a[:label] <=> b[:label] }
+    @selectable_columns = [{ label: I18n.t("admin.products_page.columns_selector.price"),
+                             value: "price" },
+                           { label: I18n.t("admin.products_page.columns_selector.unit"),
+                             value: "unit" },
+                           { label: I18n.t("admin.products_page.columns_selector.producer"),
+                             value: "producer" },
+                           { label: I18n.t("admin.products_page.columns_selector.category"),
+                             value: "category" }].sort { |a, b|
+      a[:label] <=> b[:label]
+    }
     @columns_selected = ["price", "unit"]
     @per_page = [{ label: "10", value: 10 }, { label: "25", value: 25 }, { label: "50", value: 50 },
                  { label: "100", value: 100 }]
@@ -26,10 +32,12 @@ class ProductsTableComponent < ViewComponentReflex::Component
                    .map { |producer| { label: producer.name, value: producer.id.to_s } }
     @producers_selected = ["all"]
     @page = 1
+    @sort = { column: "name", direction: "asc" }
   end
 
   def before_render
     fetch_products
+    refresh_columns
   end
 
   def toggle_column
@@ -41,6 +49,11 @@ class ProductsTableComponent < ViewComponentReflex::Component
                         end
   end
 
+  def click_sort
+    @sort = { column: element.dataset['sort-value'],
+              direction: element.dataset['sort-direction'] == "asc" ? "desc" : "asc" }
+  end
+
   def toggle_per_page
     selected = element.dataset['value'].to_i
     @per_page_selected = [selected] if [10, 25, 50, 100].include?(selected)
@@ -70,6 +83,15 @@ class ProductsTableComponent < ViewComponentReflex::Component
 
   private
 
+  def refresh_columns
+    @columns = @columns_selected.map { |column|
+      { label: I18n.t("admin.products_page.columns.#{column}"), value: column,
+        sortable: SORTABLE_COLUMNS.include?(column) }
+    }.sort! { |a, b| a[:label] <=> b[:label] }
+    @columns.unshift({ label: I18n.t("admin.products_page.columns.name"), value: "name",
+                       sortable: SORTABLE_COLUMNS.include?("name") })
+  end
+
   def toggle_super_selector(clicked, selected)
     selected = if selected.include?(clicked)
                  selected - [clicked]
@@ -102,7 +124,7 @@ class ProductsTableComponent < ViewComponentReflex::Component
   end
 
   def ransack_query
-    query = { s: 'created_at desc' }
+    query = { s: "#{@sort[:column]} #{@sort[:direction]}" }
 
     query = if @producers_selected.include?("all")
               query.merge({ supplier_id_eq: "" })

app/components/products_table_component/products_table_component.html.haml

@@ -12,18 +12,12 @@
     #per-page_selector
       = render(SelectorComponent.new(title: "#{@per_page_selected[0]} items per page", selected: @per_page_selected, items: @per_page, data: reflex_data_attributes(:toggle_per_page)))
     #columns_selector
-      = render(SelectorComponent.new(title: "Columns", selected: @columns_selected, items: @columns, data: reflex_data_attributes(:toggle_column)))
+      = render(SelectorComponent.new(title: "Columns", selected: @columns_selected, items: @selectable_columns, data: reflex_data_attributes(:toggle_column)))
 
   #products_table
     %table
-      %thead
-        %tr
-          %th
-            Name
-          - @columns_selected.each do |column|
-            %th
-              = @columns.find{ |c| c[:value] == column }[:label]
+      = render(TableHeaderComponent.new(columns: @columns, sort: @sort, data: reflex_data_attributes(:click_sort)))
       %tbody
-        = render(ProductComponent.with_collection(@products, columns: @columns_selected))
+        = render(ProductComponent.with_collection(@products, columns: @columns))
   #pagination
     = render(PaginationComponent.new(pagy: @pagy, data: reflex_data_attributes(:change_page)))

config/locales/en.yml

@@ -459,6 +459,12 @@ en:
 #
   admin:
     products_page:
+      columns:
+        name: Name
+        unit: Unit
+        price: Price
+        producer: Producer
+        category: Category
       columns_selector:
         unit: Unit
         price: Price