From d75c62a62140c83d5948688be5541553161da10e Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Wed, 23 Mar 2022 22:11:15 +0100 Subject: [PATCH] Add TableHeader component and better columns implementation --- app/components/product_component.rb | 4 +-- .../product_component.html.haml | 16 +++++---- app/components/products_table_component.rb | 36 +++++++++++++++---- .../products_table_component.html.haml | 12 ++----- config/locales/en.yml | 6 ++++ 5 files changed, 49 insertions(+), 25 deletions(-) diff --git a/app/components/product_component.rb b/app/components/product_component.rb index 22dfc885bf..58aaa59a9c 100644 --- a/app/components/product_component.rb +++ b/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 diff --git a/app/components/product_component/product_component.html.haml b/app/components/product_component/product_component.html.haml index 8d36d1bc2e..200d536c4c 100644 --- a/app/components/product_component/product_component.html.haml +++ b/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] diff --git a/app/components/products_table_component.rb b/app/components/products_table_component.rb index 8a7fcf94a4..ebb9983492 100644 --- a/app/components/products_table_component.rb +++ b/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: "" }) diff --git a/app/components/products_table_component/products_table_component.html.haml b/app/components/products_table_component/products_table_component.html.haml index adc9055fa4..14709e16e9 100644 --- a/app/components/products_table_component/products_table_component.html.haml +++ b/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))) diff --git a/config/locales/en.yml b/config/locales/en.yml index d37024ff3c..c56a06ecd7 100644 --- a/config/locales/en.yml +++ b/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