Feature: Add table component & Migrate the views to use it

app/assets/stylesheets/components/concept_details.scss

@@ -0,0 +1,11 @@
+
+.concept_details_component .raw-table .dropdown-title-bar p {
+  padding: 10px 0px;
+  color: rgb(136, 136, 136);
+  font-weight: 400;
+}
+
+
+.concept_details_component table th {
+  width: 220px;
+}

app/assets/stylesheets/components/dropdown.scss

@@ -6,12 +6,12 @@
   font-size: 16px;
   color: #000000;
   cursor: pointer;
+  padding: 14px 20px;
 }
 
 .dropdown-container {
   border: 1px solid #dfdfdf;
   border-radius: 5px;
-  padding: 14px 20px;
   margin-bottom: 20px;
   margin-top: 20px;
 }

app/assets/stylesheets/components/index.scss

@@ -10,4 +10,5 @@
 @import 'input_field';
 @import 'file_input_loader';
 @import 'text_area_field';
-
+@import "table";
+@import "concept_details";

app/assets/stylesheets/components/table.scss

@@ -0,0 +1,30 @@
+.table-content{
+  border-collapse: collapse;
+  width: 100%;
+  border-spacing: 0;
+}
+
+.table-content thead th{
+  background-color: hsl(0, 0%, 100%);
+  border-bottom: 1px solid hsl(240, 4%, 85%);
+  font-weight: 700;
+  color: hsl(230, 13%, 9%);
+}
+
+
+.table-content td, .table-content th{
+  padding: 12px 24px;
+  vertical-align: top;
+}
+
+
+.table-content-stripped tbody tr:nth-child(odd) {
+  background-color: #FAFAFA;
+}
+
+.table-content tbody th:first-child {
+  color: #888888;
+  font-weight: 400;
+}
+
+

app/assets/stylesheets/concepts.scss

@@ -97,32 +97,7 @@ div.synonym-change-request button {
 .concepts-json:hover svg path{
   fill: white;
 }
-.concepts-content{
-  border-collapse: collapse;
-  width: 100%;
-  border-spacing: 0;
-
-}
-.concepts-content td{
-  padding: 12px 24px;
-  vertical-align: top;
-}
-.concepts-content tr:nth-child(odd) {
-  background-color: #FAFAFA;
-}
 
-.concepts-content td:first-child {
-  color: #888888;
-  width: 220px;
-}
-.concepts-content td:first-child {
-  color: #888888;
-  width: 220px;
-}
-.concepts-content a{
-  text-decoration: underline;
-  color: #888888;
-}
 .concepts-content div{
   margin-bottom: 5px;
 }

app/components/concept_details_component.rb

@@ -3,8 +3,8 @@
 class ConceptDetailsComponent < ViewComponent::Base
   include ApplicationHelper
 
-  renders_one :header
-  renders_many :sections
+  renders_one :header, TableComponent
+  renders_many :sections, TableRowComponent
 
   attr_reader :concept_properties
 
@@ -19,8 +19,20 @@ def initialize(id:, acronym:, properties:, top_keys:, bottom_keys:, exclude_keys
     @concept_properties = concept_properties2hash(@properties) if @properties
   end
 
-  def render_properties(properties_set, ontology_acronym, &block)
-    out = ''
+  def add_sections(keys, &block)
+    scheme_set = properties_set_by_keys(keys, concept_properties)
+    rows = row_hash_properties(scheme_set, concept_properties, &block)
+
+    rows.each do |row|
+      section do |table_row|
+        table_row.create(*row)
+      end
+    end
+
+  end
+
+  def row_hash_properties(properties_set, ontology_acronym, &block)
+    out = []
     properties_set&.each do |key, data|
       next if exclude_relation?(key) || !data[:values]
 
@@ -35,17 +47,12 @@ def render_properties(properties_set, ontology_acronym, &block)
         end
       end
 
-      line = <<-EOS
-              <tr>
-                <td nowrap= "" style="width:30%" >
-                    <span title=#{url} data-controller="tooltip">#{remove_owl_notation(key)}</span>
-                </td>
-                <td class="d-flex flex-wrap">#{"<p class='mx-1'>#{ajax_links.join('</p><p class="mx-1">')}".html_safe}</td>
-              </tr>
-      EOS
-      out += line
+      out << [
+        { th: "<span title=#{url} data-controller='tooltip'>#{remove_owl_notation(key)}</span>".html_safe },
+        { td: "<div class='d-flex flex-wrap'> #{"<p class='mx-1'>#{ajax_links.join('</p><p class="mx-1">')}"}</div>".html_safe }
+      ]
     end
-    raw out
+    out
   end
 
   def properties_set_by_keys(keys, concept_properties, exclude_keys = [])
@@ -64,10 +71,11 @@ def filter_properties(top_keys, bottom_keys, exclude_keys, concept_properties)
   end
 
   private
+
   def concept_properties2hash(properties)
     # NOTE: example properties
     #
-    #properties
+    # properties
     #=> #<struct
     #  http://www.w3.org/2000/01/rdf-schema#label=
     #    [#<struct
@@ -124,7 +132,7 @@ def concept_properties2hash(properties)
   end
 
   def exclude_relation?(relation_to_check, ontology = nil)
-    excluded_relations = [ "type", "rdf:type", "[R]", "SuperClass", "InstanceCount" ]
+    excluded_relations = ["type", "rdf:type", "[R]", "SuperClass", "InstanceCount"]
 
     # Show or hide property based on the property and ontology settings
     if ontology

app/components/concept_details_component/concept_details_component.html.haml

@@ -1,20 +1,23 @@
-- require 'cgi'
-%div.hide-if-loading
+%div.hide-if-loading.concept_details_component
   %div.card
-    %table.concepts-content
-      = header
+    = header
   %div.my-3
-  .accordion.concepts-raw-data{id: "accordion-#{@id}"}
-    %div{id: "heading-#{@id}"}
-      %h2.mb-0.text-right
-        .concepts-raw-title{"data-target" => "#collapse-#{@id}", "data-toggle" => "collapse"}
-          %div Raw data
-          %img{src: asset_path("arrow-down.svg")}
-    .collapse{id: "collapse-#{@id}", "data-parent" => "#accordion-#{@id}"}
-      %table#concepts-content.concepts-content
-        - top_set, leftover_set, bottom_set = filter_properties(@top_keys, @bottom_keys, @exclude_keys, @concept_properties)
-        = render_properties(top_set, @acronym)
-        = render_properties(leftover_set, @acronym)
-        - sections&.each do |section|
-          = section
-        = render_properties(bottom_set, @acronym)
+  %div.raw-table
+    = render DropdownContainerComponent.new(title: 'Raw data', id: "accordion-#{@id}") do
+      - top_set, leftover_set, bottom_set = filter_properties(@top_keys, @bottom_keys, @exclude_keys, @concept_properties)
+      = render TableComponent.new(stripped: true) do |t|
+
+        - row_hash_properties(top_set, @acronym).each do |row|
+          - t.add_row(*row)
+
+        - row_hash_properties(leftover_set, @acronym).each do |row|
+          - t.add_row(*row)
+
+
+        - sections.each do |section|
+          - t.row do
+            = section
+
+
+        - row_hash_properties(bottom_set, @acronym).each do |row|
+          - t.add_row(*row)

app/components/table_cell_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class TableCellComponent < ViewComponent::Base
+
+  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

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class TableComponent < ViewComponent::Base
+
+  renders_one :header, TableRowComponent
+  renders_many :rows, TableRowComponent
+
+  def initialize(id: '', stripped: true)
+    super
+    @id = id
+    @stripped = stripped
+  end
+
+  def stripped_class
+    @stripped ? 'table-content-stripped' : ''
+  end
+
+  def add_row(*array, &block)
+    self.row.create(*array, &block)
+  end
+end

app/components/table_component/table_component.html.haml

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

app/components/table_row_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+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
+      self.cell(type: key) { value&.to_s }
+    end
+    block.call(self) if block_given?
+  end
+
+  def th(width: nil, colspan: nil, &block)
+    self.cell(type: 'th', width: width, colspan: colspan, &block)
+  end
+
+  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

@@ -0,0 +1,4 @@
+%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/collections/_collection.html.haml

@@ -4,24 +4,8 @@
                 top_keys: %w[created modified comment note],
                 bottom_keys: [],
                 exclude_keys: %w[member]) do |c|
-    = c.header do
-      %tr
-        %td.label
-          ID
-        %td
-          %p
-            = collection["@id"]
-      %tr
-        %td{nowrap: ""} Preferred Name
-        %td
-          %p= get_collection_label(collection)
-      %tr
-        %td{nowrap: ""} Members count
-        %td
-          %p= collection["memberCount"]
-      %tr
-        %td.label
-          Type
-        %td
-          %p
-            = collection["@type"]
+    - c.header(stripped: true) do |t|
+      - t.add_row({th: 'ID'}, {td: collection["@id"]})
+      - t.add_row({th: 'Preferred Name'}, {td: get_collection_label(collection)})
+      - t.add_row({th: 'Members count'}, {td: collection["memberCount"]})
+      - t.add_row({th: 'Type'}, {td: collection["@type"]})