migrate notes table to use Table component

app/assets/stylesheets/components/index.scss

@@ -11,3 +11,4 @@
 @import 'file_input_loader';
 @import 'text_area_field';
 @import "table";
+@import "concept_details";

app/components/table_cell_component.rb

@@ -2,15 +2,17 @@
 
 class TableCellComponent < ViewComponent::Base
 
-  def initialize(width: nil, type: 'td')
+  def initialize(width: nil, colspan: nil,type: 'td')
     super
     @width = width
     @type = type
+    @colspan = colspan
   end
 
   def call
     options = {}
     options[:width] = @width if @width
+    options[:colspan] = @colspan if @colspan
     content_tag(@type, content&.html_safe, options)
   end
 end

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: false)
+  def initialize(id: '', stripped: true)
     super
     @id = id
     @stripped = stripped

app/components/table_component/table_component.html.haml

@@ -1,6 +1,6 @@
 %table.table-content{id: @id, class: stripped_class}
   %thead
     = header
-  %tbody
+  %tbody{id: "#{@id}_table_body"}
     - rows.each do |row|
       = row

app/components/table_row_component.rb

@@ -4,6 +4,11 @@ class TableRowComponent < ViewComponent::Base
 
   renders_many :cells, TableCellComponent
 
+  def initialize(id: '')
+    super
+    @id = id
+  end
+
   def create(*array, &block)
     array.each do |key_value|
       key, value = key_value.to_a.first
@@ -12,11 +17,11 @@ def create(*array, &block)
     block.call(self) if block_given?
   end
 
-  def th(width: nil, &block)
-    self.cell(type: 'th', width: width, &block)
+  def th(width: nil, colspan: nil, &block)
+    self.cell(type: 'th', width: width, colspan: colspan, &block)
   end
 
-  def td(width: nil, &block)
-    self.cell(type: 'td', width: width, &block)
+  def td(width: nil, colspan: nil, &block)
+    self.cell(type: 'td', width: width, colspan: colspan, &block)
   end
 end

app/components/table_row_component/table_row_component.html.haml

@@ -1,4 +1,4 @@
-%tr
+%tr{id: @id}
   - cells.each do |cell|
     = cell
   = content

app/controllers/notes_controller.rb

@@ -103,7 +103,7 @@ def create
       success_message = 'New comment added successfully'
       locals =  { note: new_note, ontology_acronym: ontology_acronym, parent_type: parent_type }
       partial = 'notes/note_line'
-      container_id = "#{parent_type}_notes_table_content"
+      container_id = "#{parent_type}_notes_table_body"
       alerts_container_id = nil
     end
 

app/views/notes/_note_line.html.haml

@@ -1,29 +1,26 @@
-%tr{id: "#{note.id}_tr_#{parent_type}"}
-  %td
+= render TableRowComponent.new(id: "#{note.id}_tr_#{parent_type}") do |row|
+  - row.td do
     - if current_user_admin?
       - alert_text = "Are you sure you want to delete the note <span style='color:red;font-weight:bold;'> ''" + (note.subject || '') + "''</span> created by  <span style='color:red;font-weight:bold;'>" + note.creator.split('/')[-1] + "</span>?<br/><b>This action CAN NOT be undone!!!</b>"
       = button_to "Delete", notes_path(noteid: note.id, parent_type: parent_type), method: :delete, class:'btn btn-sm btn-link',  form: {data: { turbo: true, turbo_confirm: alert_text, turbo_frame: '_top'}}
-  %td
+  - row.td do
     - note_link = "/ontologies/#{ontology_acronym}/notes/"
     - note_link =  "#{note_link}?noteid=#{CGI.escape(note.id)}"
     = link_to_modal note.subject || note_link , note_link, id:"row_#{note.id}",
-                                class: "ont_notes_list_link notes_list_link",
-                                data: { show_modal_title_value: ""}
+                                  class: "ont_notes_list_link notes_list_link",
+                                  data: { show_modal_title_value: ""}
     &nbsp;&nbsp;&nbsp;
     %span{:id => "#{note.id}_row_archived", :style => "font-size: x-small; color: grey;"}
       - if note.archived
         archived
-  %td.d-none
-    = note.subject
-  %td.d-none
-    = note.archived || "false"
-  %td
+  - row.td do
     = note.creator.split('/')[-1]
-  %td
+
+  - row.td do
     = note.proposal ? get_note_type_text(note.proposal.type) : "Comment"
   - if parent_type.eql?('ontology')
-    %td
+    - row.td do
       - if note.relatedClass && note.relatedClass.length > 0
-        %a{href: "/ontologies/#{ontology_acronym}?p=classes&conceptid=#{CGI.escape(note.relatedClass.first)}"}= note.relatedClass.first
-  %td
+        %a{href: "/ontologies/#{ontology_acronym}?p=classes&conceptid=#{CGI.escape(note.relatedClass.first)}", 'data-turbo': 'false'}= note.relatedClass.first
+  - row.td do
     = DateTime.parse(note.created).strftime("%Y-%m-%d")

app/views/notes/_notes.html.haml

@@ -17,35 +17,21 @@
   = render_alerts_container("notes_#{parent_type}_list_table_alerts")
 
   .ont_notes_table_container
-    %table.zebra.notes_ont_list_table{:id => "#{notes_table_id}", :style => "width: 100%;", :width => "100%"}
-      %thead
-        %tr
-          %th
-            Delete
-          %th
-            Subject
-          %th.d-none
-            Subject Sort
-          %th.d-none
-            Archive Sort
-          %th
-            Author
-          %th
-            Type
-          - if parent_type.eql?('ontology')
-            %th
-              Class
-          %th
-            Created
-      %tbody{id: "#{parent_type}_notes_table_content"}
-        - if @notes.nil? || @notes.empty?
-          %tr#ont_no_notes
-            %td{colspan: colspan} No notes to display
-            - (colspan-1).times.each do
-              %td
-        - else
-          - @notes.each do |note|
-            = render partial: 'notes/note_line', locals: {note: note, ontology_acronym: @ontology.acronym, parent_type: parent_type}
+    - cols = ['Action', 'Subject', 'Author', 'Type', (parent_type.eql?('ontology') ? 'Class' : nil),'Created'].compact
+    = render TableComponent.new(id:"#{parent_type}_notes") do |t|
+      - t.header do |row|
+        - row.create(*cols.map{|col| {th: col}})
+
+      - if @notes.nil? || @notes.empty?
+        - t.row do |row|
+          - row.td(colspan: colspan) do
+            %div.text-center
+              No notes to display
+
+      - else
+        - @notes.each do |note|
+          = render partial: 'notes/note_line', locals: {note: note, ontology_acronym: @ontology.acronym, parent_type: parent_type}
+
 :javascript
   jQuery(".ontologies.show").ready(function(){
     jQuery("#hide_archived_ont").click(function(){