From 7752267808e2c4aac6ee9e7c5d1b1b7ff4abb57e Mon Sep 17 00:00:00 2001
From: aignatov-bio <47317017+aignatov-bio@users.noreply.github.com>
Date: Mon, 3 May 2021 15:17:09 +0200
Subject: [PATCH] Add styling for template values [SCI-5630] (#3264)

---
 app/assets/javascripts/reports/new.js         | 12 ++-
 app/assets/stylesheets/reports/new.scss       | 74 +++++++++++++++----
 .../reports/checkbox_input_component.html.erb |  2 +-
 .../project_members_input_component.html.erb  |  2 +-
 .../reports/template_values_editor.html.erb   | 61 ++++++++++-----
 5 files changed, 118 insertions(+), 33 deletions(-)

diff --git a/app/assets/javascripts/reports/new.js b/app/assets/javascripts/reports/new.js
index 4da092c4a..9f4962488 100644
--- a/app/assets/javascripts/reports/new.js
+++ b/app/assets/javascripts/reports/new.js
@@ -1159,7 +1159,7 @@ function reportHandsonTableConverter() {
       }
     }
 
-    $('.reports-new').on('change', '.report-experiment-checkbox', function() {
+    $('.project-contents-container').on('change', '.report-experiment-checkbox', function() {
       $(this).closest('li').find('.report-my-module-checkbox').prop('checked', this.checked);
       selectAllState();
       hideUnchekedElements($('.hide-unchecked-checkbox').prop('checked'));
@@ -1290,9 +1290,19 @@ function reportHandsonTableConverter() {
     SelectAllRepositoriesStatus();
   }
 
+  function initTemplateValuesContainer() {
+    $('.report-template-values-container').on('click', '.collapse-all', function() {
+      $('.report-template-values-container .values-container').collapse('hide');
+    })
+      .on('click', '.expand-all', function() {
+        $('.report-template-values-container .values-container').collapse('show');
+      });
+  }
+
   initGenerateButton();
   initReportWizard();
   initDropdowns();
   initTaskContents();
   initProjectContents();
+  initTemplateValuesContainer();
 }());
diff --git a/app/assets/stylesheets/reports/new.scss b/app/assets/stylesheets/reports/new.scss
index e88406db5..4f34ee69a 100644
--- a/app/assets/stylesheets/reports/new.scss
+++ b/app/assets/stylesheets/reports/new.scss
@@ -278,24 +278,72 @@
     padding: 1em 2em;
     width: 60%;
 
-    .description {
-      @include font-main;
-    }
-
-    .project-selector,
-    .template-selector {
-      display: inline-block;
+    .template-editor-header {
+      align-items: center;
+      display: flex;
       margin-bottom: 1em;
-      width: 100%;
 
-      label {
-        @include font-small;
+      .title {
+        margin: 0 auto 0 0;
       }
     }
 
-    #projectDescription {
-      height: 110px;
-      padding: .5em;
+    .template-editor-description {
+      @include font-main;
+    }
+
+    .fa-caret-down {
+      cursor: pointer;
+      margin-right: .25em;
+
+      &.collapsed {
+        @include rotate(-90deg);
+      }
+    }
+
+    .values-container {
+
+      .checkbox-value-container {
+        margin-bottom: 1em;
+      }
+
+      .sci-input-container {
+        margin-bottom: 1em;
+
+        input[type="text"] {
+          display: block;
+          max-width: 40%;
+        }
+
+        textarea {
+          height: 10em;
+        }
+
+        input[type="date"] {
+          display: block;
+          max-width: 40%;
+        }
+      }
+
+      .sci-checkbox-container {
+        float: left;
+        margin-right: .5em;
+      }
+
+      ul {
+        list-style-type: none;
+        padding-left: 0;
+
+        li {
+          padding: .25em 0;
+        }
+      }
+
+      .sci-select-container {
+        display: inline-block;
+        margin-bottom: 1em;
+        width: 40%;
+      }
     }
   }
 
diff --git a/app/components/reports/checkbox_input_component.html.erb b/app/components/reports/checkbox_input_component.html.erb
index b25d5f36b..bb6569d9d 100644
--- a/app/components/reports/checkbox_input_component.html.erb
+++ b/app/components/reports/checkbox_input_component.html.erb
@@ -1,4 +1,4 @@
-<div>
+<div class="checkbox-value-container">
   <div class="sci-checkbox-container">
     <%= check_box_tag @name, true, (@value == 'true'), class: 'sci-checkbox', data: { type: 'CheckboxInputComponent' } %>
     <span class="sci-checkbox-label"></span>
diff --git a/app/components/reports/project_members_input_component.html.erb b/app/components/reports/project_members_input_component.html.erb
index a1b478836..2233e65b4 100644
--- a/app/components/reports/project_members_input_component.html.erb
+++ b/app/components/reports/project_members_input_component.html.erb
@@ -1,5 +1,5 @@
 <% if @editing %>
-  <div class="sci-input-container">
+  <div class="sci-select-container">
     <%= label_tag @name, @label %>
     <%= select_tag @name, options_from_collection_for_select(@project_members, :id, :name), placeholder: @placeholder, class: 'sci-input-field report-template-value-dropdown', data: { type: 'ProjectMembersInputComponent' } %>
   </div>
diff --git a/app/views/layouts/reports/template_values_editor.html.erb b/app/views/layouts/reports/template_values_editor.html.erb
index e9dc8454a..c72860353 100644
--- a/app/views/layouts/reports/template_values_editor.html.erb
+++ b/app/views/layouts/reports/template_values_editor.html.erb
@@ -1,21 +1,48 @@
-<h1>
-  <%= t('projects.reports.wizard.first_step.values_editor.title') %>
-</h1>
-<h3>
+<div class="template-editor-header">
+  <h1 class="title">
+    <%= t('projects.reports.wizard.first_step.values_editor.title') %>
+  </h1>
+  <div class="collapse-buttons sci-btn-group pull-right">
+     <button class="btn btn-light collapse-all">
+        <i class="fas fa-caret-up"></i>
+        <%= t("projects.reports.wizard.second_step.collapse_all") %>
+     </button>
+     <button class="btn btn-light expand-all">
+        <i class="fas fa-caret-down"></i>
+        <%= t("projects.reports.wizard.second_step.expand_all") %>
+     </button>
+  </div>
+</div>
+<div class="template-editor-description">
   <%= t('projects.reports.wizard.first_step.values_editor.description') %>
-</h3>
+</div>
 
-<h1>
-  <%= t('projects.reports.wizard.first_step.values_editor.header') %>
-</h1>
-<%= yield :header %>
+<div class="section">
+  <h1>
+    <i class="fas fa-caret-down " data-toggle="collapse" href="#headerContainer" aria-expanded="false"></i>
+    <%= t('projects.reports.wizard.first_step.values_editor.header') %>
+  </h1>
+  <div class="values-container collapse in" id="headerContainer">
+    <%= yield :header %>
+  </div>
+</div>
 
-<h1>
-  <%= t('projects.reports.wizard.first_step.values_editor.cover') %>
-</h1>
-<%= yield :cover %>
+<div class="section">
+  <h1>
+    <i class="fas fa-caret-down " data-toggle="collapse" href="#coverContainer" aria-expanded="false"></i>
+    <%= t('projects.reports.wizard.first_step.values_editor.cover') %>
+  </h1>
+  <div class="values-container collapse in" id="coverContainer">
+    <%= yield :cover %>
+  </div>
+</div>
 
-<h1>
-  <%= t('projects.reports.wizard.first_step.values_editor.footer') %>
-</h1>
-<%= yield :footer %>
+<div class="section">
+  <h1>
+    <i class="fas fa-caret-down " data-toggle="collapse" href="#footerContainer" aria-expanded="false"></i>
+    <%= t('projects.reports.wizard.first_step.values_editor.footer') %>
+  </h1>
+  <div class="values-container collapse in" id="footerContainer">
+    <%= yield :footer %>
+  </div>
+</div>