Merge pull request seek4science#1718 from seek4science/extended-metad…

…ata-display-ui-improveement UI improvement for displaying the extended metadata
ELIXIR-Belgium · Jan 11, 2024 · 0d36230 · 0d36230
2 parents 8e70cf1 + 460e057
commit 0d36230
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 7 deletions.
diff --git a/app/assets/stylesheets/linked_extended_metadata.css b/app/assets/stylesheets/linked_extended_metadata.css
@@ -55,3 +55,15 @@
     padding: 0px 0px;
     border-radius: 5px;
 }
+
+#extended-metadata .panel-heading-button {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.extended_metadata-small-btn{
+    font-size: 1rem;
+    padding: 0.2rem 0.5rem;
+}
+
diff --git a/app/helpers/extended_metadata_helper.rb b/app/helpers/extended_metadata_helper.rb
@@ -38,7 +38,7 @@ def render_extended_metadata_value(attribute, resource)
       content_tag(:div, class: 'extended_metadata') do
         if attribute.linked_extended_metadata? || attribute.linked_extended_metadata_multi?
           content_tag(:span, class: 'linked_extended_metdata_display') do
-            folding_panel(attribute.label, true, id: attribute.title) do
+            folding_panel(attribute.label, false, id: attribute.title) do
               display_attribute(resource.extended_metadata, attribute, link: true)
             end
           end

diff --git a/app/views/extended_metadata/_extended_metadata_attribute_values.html.erb b/app/views/extended_metadata/_extended_metadata_attribute_values.html.erb
@@ -2,14 +2,38 @@
   label = 'Extended Metadata'
 %>
 <% if resource.respond_to?(:extended_metadata) && resource.extended_metadata %>
-
+  <% metadata_type = resource.extended_metadata.extended_metadata_type  %>
   <div id="extended-metadata" class="panel panel-default">
-    <div class="panel-heading"><%= label %> (<%= resource.extended_metadata.extended_metadata_type.title %>)</div>
+    <div class="panel-heading panel-heading-button">
+      <div>
+        <%= label %> (<%= metadata_type.title %>)
+      </div>
+      <% if metadata_type.attributes_with_linked_extended_metadata_type.any? %>
+      <div>
+        <a href="#" class="btn btn-primary extended_metadata-small-btn" id="expandAllBtn" onclick="expandAll()">Expand All</a>
+        <a href="#" class="btn btn-primary extended_metadata-small-btn" id="collapseAllBtn" onclick="collapseAll()">Collapse All</a>
+      </div>
+      <% end %>
+    </div>
     <div class="panel-body">
-      <% resource.extended_metadata.extended_metadata_attributes.each do |attribute| %>
+      <% metadata_type.extended_metadata_attributes.each do |attribute| %>
         <%= render_extended_metadata_value(attribute, resource) %>
       <% end %>
     </div>
   </div>
   <% else %>
-<% end %>
+<% end %>
+
+<script>
+    $j(document).ready(function() {
+        var panelcollaps = $j('#extended-metadata .panel-collapse');
+
+        window.expandAll = function() {
+            panelcollaps.addClass('in');
+        };
+
+        window.collapseAll = function() {
+            panelcollaps.removeClass('in');
+        };
+    });
+</script>
diff --git a/app/views/extended_metadata/_fancy_linked_extended_metadata_multi_attribute_fields.html.erb b/app/views/extended_metadata/_fancy_linked_extended_metadata_multi_attribute_fields.html.erb
@@ -19,7 +19,7 @@
       <% end %>
       <div id="<%= key.singularize %>-row">
         <div colspan="6">
-          <%= button_link_to('Add new', 'add', '#', :id => "add-row-#{prefix}") %>
+          <%= button_link_to('Add new', 'add', '#', :id => "add-row-#{prefix}", class: 'extended_metadata-small-btn') %>
         </div>
       </div>
     </div>

diff --git a/app/views/extended_metadata/_single_row.html.erb b/app/views/extended_metadata/_single_row.html.erb
@@ -25,7 +25,7 @@
   <div class="form-group">
     <% if allow_row_removal %>
       <div class="btn-group" data-toggle="buttons">
-        <label class="btn btn-danger">
+        <label class="btn btn-danger extended_metadata-small-btn">
           Remove
           <%= check_box_tag "#{field_name_prefix}[_destroy]", '1', false,
                             class: 'destroy-row', autocomplete: 'off',id:"#{field_name_prefix}-checkbox[_destroy]" %>