use stimulus values in table component

ontoportal-lirmm · Jan 16, 2024 · 98a1188 · 98a1188
1 parent 7a7b6c2
commit 98a1188
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 33 deletions.
diff --git a/app/components/table_component.rb b/app/components/table_component.rb
@@ -5,7 +5,7 @@ class TableComponent < ViewComponent::Base
   renders_one :header, TableRowComponent
   renders_many :rows, TableRowComponent
 
-  def initialize(id: '', stripped: true, borderless: false, layout_fixed: false, small_text: false, outline: false, sort: false, default_sort_column: '0')
+  def initialize(id: '', stripped: true, borderless: false, layout_fixed: false, small_text: false, outline: false, sort: false, default_sort_column: '0', paging: false, searching: false)
     super
     @id = id
     @stripped = stripped
@@ -15,6 +15,8 @@ def initialize(id: '', stripped: true, borderless: false, layout_fixed: false, s
     @outline = outline
     @sort = sort
     @default_sort_column = default_sort_column
+    @paging = paging
+    @searching =searching
   end
 
   def stripped_class

diff --git a/app/components/table_component/table_component.html.haml b/app/components/table_component/table_component.html.haml
@@ -1,5 +1,5 @@
-%div{'data-controller': 'table-component'}
-  %table.table-content{id: @id ,'data-sort': @sort.to_s, 'data-defaultSortColumn': @default_sort_column,class: stripped_class + ' ' + borderless_class + ' ' + layout_fixed_class + ' ' + mini_class + ' ' + outline_class}
+%div{'data-controller': 'table-component', 'data-table-component-sort-value': @sort.to_s, 'data-table-component-defaultsortcolumn-value': @default_sort_column, 'data-table-component-paging-value': @paging.to_s, 'data-table-component-searching-value': @searching.to_s}
+  %table.table-content{id: @id ,class: stripped_class + ' ' + borderless_class + ' ' + layout_fixed_class + ' ' + mini_class + ' ' + outline_class}
     %thead
       = header
     %tbody{id: "#{@id}_table_body"}

diff --git a/app/components/table_component/table_component_controller.js b/app/components/table_component/table_component_controller.js
@@ -4,16 +4,22 @@ import DataTable from 'datatables.net-dt';
 
 // Connects to data-controller="table-component"
 export default class extends Controller {
+    static values = {
+        sort: String,
+        defaultsortcolumn: String,
+        paging: String,
+        Searching: String
+    }
     connect(){    
         let table_component
         table_component = this.element.childNodes[1]
         let default_sort_column
-        default_sort_column = parseInt(table_component.dataset.defaultsortcolumn, 10)
-        if (table_component.dataset.sort === 'true'){
+        default_sort_column = parseInt(this.defaultsortcolumnValue, 10)
+        if (this.sortValue === 'true'){
             let table = new DataTable('#'+table_component.id, {
-                paging: false,
+                paging: this.pagingValue === 'true',
                 info: false,
-                searching: false,
+                searching: this.searchingValue === 'true',
                 autoWidth: true,
                 order: [[default_sort_column, 'desc']]
             });

diff --git a/app/helpers/inputs_helper.rb b/app/helpers/inputs_helper.rb
@@ -71,29 +71,4 @@ def attribute_error(attr)
   def input_error_message(name)
     attribute_error(method_name(name))
   end
-
-  def table_content(t)
-    headers = 5.times.map { |i| "header #{i}" }
-    rows = 6.times.map { |row| 5.times.map { |i| "line #{row} :#{i} " } }
-
-    t.header do |h|
-      headers.each do |header|
-        h.th { header }
-      end
-      h.th { 'Action' }
-    end
-
-    rows.each do |row|
-      t.row do |r|
-        row.each do |col|
-          r.td { col }
-        end
-
-        r.td do
-          link_to('Edit', '', class: 'mr-3') + link_to('Delete', '')
-        end
-      end
-    end
-
-  end
 end
diff --git a/app/views/recommender/index.html.haml b/app/views/recommender/index.html.haml
@@ -1,3 +1,4 @@
+- @title=  t('recommender.title')
 .recommender-page-container{'data-controller': 'recommender'}
   .recommender-page-subcontainer
     .recommender-page-title

diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "@hotwired/turbo-rails": "^7.1.1",
     "@triply/yasgui": "^4.2.28",
     "chart.js": "^4.4.1",
+    "datatables.net-dt": "^1.13.8",
     "debounce": "^1.2.1",
     "esbuild": "^0.14.41",
     "flatpickr": "^4.6.13",

diff --git a/yarn.lock b/yarn.lock
@@ -261,7 +261,7 @@ cookiejar@^2.1.2:
   resolved "https://registry.yarnpkg.com/cookiejar/-/cookiejar-2.1.4.tgz#ee669c1fea2cf42dc31585469d193fef0d65771b"
   integrity sha512-LDx6oHrK+PhzLKJU9j5S7/Y3jM/mUHvD/DeI1WQmJn652iPC5Y4TBzC9l+5OMOXlyTTA+SmVUPm0HQUwpD5Jqw==
 
-datatables.net-dt@^1.10.24:
+datatables.net-dt@^1.10.24, datatables.net-dt@^1.13.8:
   version "1.13.8"
   resolved "https://registry.yarnpkg.com/datatables.net-dt/-/datatables.net-dt-1.13.8.tgz#6e875d97407cc605f0dadb3452cf477361000176"
   integrity sha512-/ZPzr1hQ+domerlg/MbcQHqeeqxK9fsZmpRs1YeKxsdfr+UyHQTUiiOO7RqekppSLc7MPqxGnzKkCX9vAgqm0w==