use component helpers instead calling render & use reveal component

ontoportal-lirmm · Apr 22, 2024 · 5f39dc8 · 5f39dc8
1 parent f9e12b3
commit 5f39dc8
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 12 deletions.
diff --git a/app/helpers/components_helper.rb b/app/helpers/components_helper.rb
@@ -129,6 +129,10 @@ def chart_component(title: '', type:, labels:, datasets:, index_axis: 'x', show_
     content_tag(:canvas, nil, data: data)
   end
 
+  def loader_component(type = 'pulsing')
+    render LoaderComponent.new(type: type)
+  end
+
   def info_tooltip(text)
     render Display::InfoTooltipComponent.new(text: text)
   end
@@ -210,6 +214,14 @@ def properties_dropdown(id, title, tooltip, properties, is_open: false, &block)
     end
   end
 
+
+  def regular_button(id, value, variant: "secondary", state: "regular", size: "slim", &block)
+    render Buttons::RegularButtonComponent.new(id:id, value: value, variant: variant, state: state, size: size) do |btn|
+      capture(btn, &block) if block_given?
+    end
+  end
+
+
   def form_save_button
     render Buttons::RegularButtonComponent.new(id: 'save-button', value: t('components.save_button'), variant: "primary", size: "slim", type: "submit") do |btn|
       btn.icon_left do

diff --git a/app/views/mappings/index.html.haml b/app/views/mappings/index.html.haml
@@ -1,12 +1,12 @@
 - @title= t('mappings.title')
 .mappigs-page-container{'data-controller': 'mappings', 
                         'data-mappings-mappings-list-value': "#{@ontologies_mapping_count.to_h.to_json}",
-                        'data-mappings-api-url-value': $REST_URL 
+                        'data-mappings-api-url-value': rest_url
                         }
   .mappings-page-subcontainer
     .mappings-page-title
       .text
-        = @title= t('mappings.title')
+        = @title
       .line
     .mappings-page-decription
       = t('mappings.description')

diff --git a/app/views/mappings/tab_sections/_bubble_view.html.haml b/app/views/mappings/tab_sections/_bubble_view.html.haml
@@ -1,19 +1,22 @@
 .mappings-bubble-view-container
   .upload-mappings
     .card.upload-mappings-example.ontologies
-      .title-bar{"data-target" => "#collaps_selector", "data-toggle" => "collapse"}
-        = inline_svg_tag 'icons/settings.svg'
-        = t('mappings.filter_ontologies')
+      = render(Layout::RevealComponent.new(toggle: true, selected: false)) do |c|
+        - c.button do
+          .title-bar
+            = inline_svg_tag 'icons/settings.svg'
+            = t('mappings.filter_ontologies')
+        - c.container do
+          .mappings-page-ontologies-selector{'data-mappings-target': 'ontologies'}
+            = ontologies_selector(id:'mappings_page_ontologies' ,name: 'ontologies[]')
+            .selector-button{'data-action': 'click->mappings#filter_ontologies'}
+              = regular_button('filter-bubbles', t('mappings.filter_bubbles'))
 
-      #collaps_selector.mappings-page-ontologies-selector.collapse{'data-mappings-target': 'ontologies'}
-        = ontologies_selector(id:'mappings_page_ontologies' ,name: 'ontologies[]')
-        .selector-button{'data-action': 'click->mappings#filter_ontologies'}
-          = render Buttons::RegularButtonComponent.new(id:'filter-bubbles', value: t('mappings.filter_bubbles'), variant: "secondary", state: "regular", size: "slim")
   .mappings-bubble-view-frame{'data-mappings-target': 'frame'}
     #mappings-bubbles-view{'data-mappings-target': 'bubbles'}
     .mapping-bubbles-loader.d-none{'data-mappings-target': 'loader'}
-      = render LoaderComponent.new(type: 'pulsing')
-  = render Display::InfoTooltipComponent.new(text: mappings_bubble_view_legend)
+      = loader_component
+  = info_tooltip(mappings_bubble_view_legend)
   .mappings-zoom-buttons
     .in{'data-action': 'click->mappings#zoomIn'}
       = inline_svg_tag 'icons/zoom-in.svg'

diff --git a/app/views/mappings/tab_sections/_table_view.html.haml b/app/views/mappings/tab_sections/_table_view.html.haml
@@ -2,7 +2,7 @@
     .mappings-ontologies-select
         = form_tag('/mappings/count/fake_id', method: :get, novalidate: true, data: { turbo: true, turbo_frame: 'mappings_table' }) do
             .mappings-selector{data: {action: 'change->mappings#submit', 'mappings-target': 'selector'}}
-                = render Input::SelectComponent.new(label: t('mappings.intro'), id: 'mappings_ontologies_selector', name: 'ontology', value: @options)              
+                = select_input(name: "ontology", values: @options, placeholder: t('mappings.intro'))
             %input.d-none{ type: 'submit', 'data-mappings-target': 'submit'}
             %div
                 = render TurboFrameComponent.new(id:"mappings_table")