Feature: Add see more items component (#910)

* add list items component  to hide container items if more than max items

* use list item component in concept details component for synonyms and others

* fix show edge case where max items is equal to the items total length

* remove an cyclic include raising an exception

Author: syphax-bouazzouni

app/components/concept_details_component.rb

@@ -10,14 +10,14 @@ class ConceptDetailsComponent < ViewComponent::Base
 
   attr_reader :concept_properties
 
-  def initialize(id:, acronym:, concept_id: nil , properties: nil, top_keys: [], bottom_keys: [], exclude_keys: [])
+  def initialize(id:, acronym:, concept_id: nil, properties: nil, top_keys: [], bottom_keys: [], exclude_keys: [])
     @acronym = acronym
     @properties = properties
     @top_keys = top_keys
     @bottom_keys = bottom_keys
     @exclude_keys = exclude_keys
     @id = id
-    @concept_id=concept_id
+    @concept_id = concept_id
 
     @concept_properties = concept_properties2hash(@properties) if @properties
   end
@@ -55,8 +55,8 @@ def row_hash_properties(properties_set, ontology_acronym, &block)
       end
 
       out << [
-        { th:  content_tag(:span, remove_owl_notation(key), title: url, 'data-controller': 'tooltip') },
-        { td: content_tag(:span, ajax_links.join.html_safe) }
+        { th: content_tag(:span, remove_owl_notation(key), title: url, 'data-controller': 'tooltip') },
+        { td: list_items_component(max_items: 5) { |r| ajax_links.map { |val| r.container { val.html_safe } } } }
       ]
     end
     out
@@ -81,7 +81,7 @@ def filter_properties(top_keys, bottom_keys, exclude_keys, concept_properties)
   private
 
   def link_to_format_modal(format, icon)
-    link_to_modal(nil, "/ontologies/#{@acronym}/#{escape(@concept_id)}/serialize/#{format}",{ id: "resource_content_#{format}", data: {show_modal_title_value: @concept_id, show_modal_size_value: 'modal-xl'}}) do
+    link_to_modal(nil, "/ontologies/#{@acronym}/#{escape(@concept_id)}/serialize/#{format}", { id: "resource_content_#{format}", data: { show_modal_title_value: @concept_id, show_modal_size_value: 'modal-xl' } }) do
       inline_svg("icons/#{icon}.svg", width: '50px', height: '50px')
     end
   end

app/components/list_items_show_more_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+class ListItemsShowMoreComponent < ViewComponent::Base
+  renders_many :containers
+
+  def initialize(max_items: 10)
+    super
+    @max_items = max_items - 1
+  end
+
+end

app/components/list_items_show_more_component/list_items_show_more_component.html.haml

@@ -0,0 +1,14 @@
+%div{data: {controller: 'reveal-component'}}
+  - containers[..@max_items].each do |item|
+    = item
+
+  - if (@max_items + 1) < containers.size
+    - Array(containers[@max_items+1..]).each do |item|
+      %span{'data-reveal-component-target': "item", class: 'd-none'}
+        = item
+    %div{'data-reveal-component-target': "showButton", 'data-action': "click->reveal-component#show" }
+      %span.btn-link
+        See more
+    %div.d-none{'data-reveal-component-target': "hideButton", 'data-action': "click->reveal-component#hide" }
+      %span.btn-link
+        See less

app/helpers/components_helper.rb

@@ -25,6 +25,11 @@ def chips_component(id: , name: , label: , value: , checked: false , tooltip: ni
       check_input(id: id, name: name, value: value, label: label, checked: checked, disabled: disabled, &block)
     end
   end
+  def list_items_component(max_items:, &block)
+    render ListItemsShowMoreComponent.new(max_items: max_items) do |r|
+      capture(r, &block)
+    end
+  end
 
   def group_chip_component(id: nil, name: , object: , checked: , value: nil, title: nil, disabled: false, &block)
     title ||= object["name"]
@@ -111,7 +116,7 @@ def resolvability_check_tag(url)
   end
 
   def rounded_button_component(link)
-    render RoundedButtonComponent.new(link: link, target: '_blank',size: 'small',title: t("components.go_to_api"))
+    render RoundedButtonComponent.new(link: link, target: '_blank', size: 'small', title: t("components.go_to_api"))
   end
 
   def copy_link_to_clipboard(url, show_content: false)

app/helpers/multi_languages_helper.rb

@@ -1,4 +1,5 @@
 module MultiLanguagesHelper
+  include OntologiesHelper, ComponentsHelper
   def portal_lang
     session[:locale] || 'en'
   end
@@ -172,15 +173,15 @@ def display_in_multiple_languages(label)
                                                 closable: true)
     end
 
-
-
     label = label.to_h.reject { |key, _| %i[links context].include?(key) } if label.is_a?(OpenStruct)
 
     if label.is_a?(String)
       content_tag(:p, label)
     elsif label.is_a?(Array)
-      content_tag(:div) do
-        raw(label.map { |x| content_tag(:div, x) }.join)
+      list_items_component(max_items: show_max) do |r|
+        label.map do |x|
+          r.container { content_tag(:span, x, class: style_as_badge ? 'badge bg-secondary' : '').html_safe }
+        end
       end
     else
       content_tag(:div) do

app/helpers/ontologies_helper.rb

@@ -1,6 +1,5 @@
 require 'iso-639'
 module OntologiesHelper
-  include ApplicationHelper
   REST_URI = $REST_URL
   API_KEY = $API_KEY
   LANGUAGE_FILTERABLE_SECTIONS = %w[classes schemes collections instances properties].freeze

app/views/concepts/_details.html.haml

@@ -19,8 +19,7 @@
         - t.add_row({th: t('ontology_details.concept.synonyms')}) do |h|
           - h.td do
             %div.d-flex
-              %div.d-flex
-                = display_in_multiple_languages(@concept.synonym)
+              = display_in_multiple_languages(@concept.synonym, style_as_badge: true, show_max: 5)
               %div.synonym-change-request
                 = add_synonym_button
                 = remove_synonym_button