Add report wizard step 3 [SCI-5611]

app/assets/javascripts/reports/new.js

@@ -1015,6 +1015,31 @@ function reportHandsonTableConverter() {
     });
   }
 
+  function initTaskContents() {
+    dropdownSelector.init('.task-contents-container .order-results', {
+      singleSelect: true,
+      closeOnSelect: true,
+      noEmptyOption: true,
+      selectAppearance: 'simple',
+      disableSearch: true
+    });
+
+    $('.task-contents-container')
+      .on('change', '.select-all-task-contents', function() {
+        $('.content-element .sci-checkbox:not(.skip-select-all)')
+          .prop('checked', this.checked);
+      })
+      .on('change', '.protocol-steps-checkbox', function() {
+        $('.step-contents .sci-checkbox')
+          .prop('checked', this.checked);
+      })
+      .on('change', '.all-results-checkbox', function() {
+        $('.results-type-contents .sci-checkbox:not(.skip-select-all)')
+          .prop('checked', this.checked);
+      });
+  }
+
   initReportWizard();
   initDropdowns();
+  initTaskContents();
 }());

app/assets/stylesheets/reports/new.scss

@@ -232,6 +232,7 @@
     }
   }
 
+
   .report-template-values-container {
     background: $color-white;
     box-shadow: $modal-shadow;
@@ -259,6 +260,88 @@
       padding: .5em;
     }
   }
+
+  .task-contents-container {
+    background: $color-white;
+    box-shadow: $modal-shadow;
+    margin: 2em 20%;
+    padding: 1em 2em;
+    width: 60%;
+
+    .divider {
+      background: $color-alto;
+      height: 1px;
+      margin-top: 1em;
+      width: 100%;
+    }
+
+    .select-all-container {
+      @include font-h2;
+      line-height: 1em;
+    }
+
+    ul {
+      list-style-type: none;
+      padding-left: 1em;
+
+      li {
+        @include font-h2;
+        line-height: 1em;
+        padding-top: 1em;
+      }
+
+      .content-element-title {
+        @include font-h1;
+        margin-bottom: 1em;
+      }
+    }
+
+    .all-results-container {
+      align-items: flex-start;
+      display: flex;
+
+      .results-order-contaner {
+        margin-top: .5em;
+
+        label {
+          @include font-small;
+        }
+      }
+    }
+
+    .file-result-title-container {
+      align-items: flex-start;
+      display: flex;
+
+      .include-pages-container {
+        @include font-button;
+        font-weight: normal;
+        line-height: 1.2em;
+        margin-top: 1em;
+
+        .fa-exclamation-triangle {
+          color: $brand-warning;
+          margin-top: .5em;
+        }
+      }
+    }
+
+    .sci-checkbox-container {
+      float: left;
+      margin-right: .25em;
+    }
+
+    .title {
+      @include font-h1;
+      margin-bottom: 1em;
+    }
+
+    .protocol-contents,
+    .result-contents,
+    .additional-contents {
+      margin-top: 1em;
+    }
+  }
 }
 
 @media (max-width: 960px) {
@@ -273,5 +356,10 @@
       margin: 2em 1em;
       width: calc(100% - 2em);
     }
+
+    .task-contents-container {
+      margin: 2em 1em;
+      width: calc(100% - 2em);
+    }
   }
 }

app/views/reports/new.html.erb

@@ -22,7 +22,7 @@
         Step 2
       </div>
       <div role="tabpanel" class="tab-pane" id="new-report-step-3">
-        Step 3
+        <%= render partial: 'reports/wizard/third_step' %>
       </div>
     </div>
   </div>

app/views/reports/wizard/_third_step.html.erb

@@ -0,0 +1,146 @@
+<div class="task-contents-container">
+  <div class="title">
+    <%= t("projects.reports.wizard.third_step.title") %>
+  </div>
+  <div class="select-all-container">
+    <span class="sci-checkbox-container">
+      <input type="checkbox" class="sci-checkbox select-all-task-contents" checked/>
+      <span class="sci-checkbox-label"></span>
+    </span>
+    <%= t("projects.reports.wizard.third_step.select_all") %>
+  </div>
+  <div class="divider"></div>
+  <ul>
+    <li class="content-element">
+      <i class="fas fa-caret-down " data-toggle="collapse" href="#protocolContents" aria-expanded="false"></i>
+      <span class="content-element-title">
+        <%= t("projects.reports.wizard.third_step.task_protocol") %>
+      </span>
+      <ul class="protocol-contents collapse in" id="protocolContents">
+        <li>
+          <span class="sci-checkbox-container">
+            <input type="checkbox" class="sci-checkbox" value="protocol_description" checked/>
+            <span class="sci-checkbox-label"></span>
+          </span>
+          <%= t("projects.reports.wizard.third_step.protocol_description") %>
+          <div class="divider"></div>
+        </li>
+        <li>
+          <span class="sci-checkbox-container">
+            <input type="checkbox" class="sci-checkbox protocol-steps-checkbox" value="protocol_steps" checked/>
+            <span class="sci-checkbox-label"></span>
+          </span>
+          <%= t("projects.reports.wizard.third_step.protocol_step") %>
+          <div class="divider"></div>
+          <ul class="step-contents">
+            <% ['completed_steps', 'uncompleted_steps', 'step_checklists', 'step_files', 'step_tables', 'step_comments'].each do |step_content| %>
+              <li>
+                <span class="sci-checkbox-container">
+                  <input type="checkbox" class="sci-checkbox" value="<%= step_content %>" checked/>
+                  <span class="sci-checkbox-label"></span>
+                </span>
+                <%= t("projects.reports.wizard.third_step.#{step_content}") %>
+                <div class="divider"></div>
+              </li>
+            <% end %>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li class="content-element">
+      <i class="fas fa-caret-down " data-toggle="collapse" href="#resultContents" aria-expanded="false"></i>
+      <span class="content-element-title">
+        <%= t("projects.reports.wizard.third_step.results") %>
+      </span>
+      <ul class="result-contents collapse in" id="resultContents">
+        <li>
+          <div class="all-results-container">
+            <span class="sci-checkbox-container">
+              <input type="checkbox" class="sci-checkbox all-results-checkbox" value="all_results" checked/>
+              <span class="sci-checkbox-label"></span>
+            </span>
+            <span>
+              <%= t("projects.reports.wizard.third_step.all_results") %>
+              <div class="results-order-contaner">
+                <label>
+                  <%= t("projects.reports.wizard.third_step.order_results") %>
+                </label>
+                <select class="order-results">
+                  <option value="atoz"><%= t("projects.reports.wizard.third_step.atoz") %></option>
+                  <option value="ztoa"><%= t("projects.reports.wizard.third_step.ztoa") %></option>
+                  <option value="new"><%= t("projects.reports.wizard.third_step.new_results") %></option>
+                  <option value="old"><%= t("projects.reports.wizard.third_step.old_results") %></option>
+                </select>
+              </div>
+            </span>
+          </div>
+          <div class="divider"></div>
+          <ul class="results-type-contents">
+            <li>
+              <div class="file-result-title-container">
+                <span class="sci-checkbox-container">
+                  <input type="checkbox" class="sci-checkbox" value="file_results" checked/>
+                  <span class="sci-checkbox-label"></span>
+                </span>
+                <span>
+                  <%= t("projects.reports.wizard.third_step.file_results") %>
+                  <div class="include-pages-container">
+                    <span class="sci-checkbox-container">
+                      <input type="checkbox" class="sci-checkbox skip-select-all" value="include_file_pages"/>
+                      <span class="sci-checkbox-label"></span>
+                    </span>
+                    <%= t("projects.reports.wizard.third_step.insert_pages_from_pdf") %><br>
+                    <i class="fas fa-exclamation-triangle"></i>
+                    <%= t("projects.reports.wizard.third_step.pdf_warning") %>
+                  </div>
+                </span>
+              </div>
+              <div class="divider"></div>
+            </li>
+            <li>
+              <span class="sci-checkbox-container">
+                <input type="checkbox" class="sci-checkbox" value="table_results" checked/>
+                <span class="sci-checkbox-label"></span>
+              </span>
+              <%= t("projects.reports.wizard.third_step.table_results") %>
+              <div class="divider"></div>
+            </li>
+            <li>
+              <span class="sci-checkbox-container">
+                <input type="checkbox" class="sci-checkbox" value="text_results " checked/>
+                <span class="sci-checkbox-label"></span>
+              </span>
+              <%= t("projects.reports.wizard.third_step.text_results") %>
+              <div class="divider"></div>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <span class="sci-checkbox-container">
+            <input type="checkbox" class="sci-checkbox" value="all_results" checked/>
+            <span class="sci-checkbox-label"></span>
+          </span>
+          <%= t("projects.reports.wizard.third_step.results_comments") %>
+        </li>
+      </ul>
+      <div class="divider"></div>
+    </li>
+    <li class="content-element">
+      <i class="fas fa-caret-down " data-toggle="collapse" href="#additionalContents" aria-expanded="false"></i>
+      <span class="content-element-title">
+        <%= t("projects.reports.wizard.third_step.additional_content") %>
+      </span>
+      <ul class="additional-contents collapse in" id="additionalContents">
+        <li>
+          <div class="select-all-container">
+            <span class="sci-checkbox-container">
+              <input type="checkbox" class="sci-checkbox" value="task_activity" checked/>
+              <span class="sci-checkbox-label"></span>
+            </span>
+            <%= t("projects.reports.wizard.third_step.task_activity") %>
+            <div class="divider"></div>
+          </div>
+        </li>
+      </ul>
+  </ul>
+</div>

config/locales/en.yml

@@ -536,10 +536,39 @@ en:
             footer: "Footer"
             no_values_title: "No additional data requiered"
             no_values_description: "SciNote template doesn’t need any additional input for it to be succesfully generated."
+        third_step:
+          title: "Select task contents"
+          select_all: "Select all content"
+          task_protocol: "Task protocol"
+          protocol_description: "Protocol description"
+          protocol_step: "Protocol steps"
+          completed_steps: "Completed steps"
+          uncompleted_steps: "Uncompleted steps"
+          step_checklists: "Step checklists"
+          step_files: "Step files"
+          step_tables: "Step tables"
+          step_comments: "Step comments"
+          results: "Results"
+          all_results: "Include all results"
+          order_results: "Order results"
+          atoz: "Alphabetically A to Z"
+          ztoa: "Alphabetically Z to A"
+          new_results: "Newest first"
+          old_results: "Oldest first"
+          file_results: "File results"
+          insert_pages_from_pdf: "Insert pages from PDF and docx files into the report"
+          pdf_warning: "This may increase report generation time."
+          table_results: "Table results"
+          text_results: "Text results"
+          results_comments: "Include all result comments"
+          additional_content: "Additional content"
+          task_activity: "Include task activity"
+
       new:
         report_name_placeholder: "Name your report"
         continue_button: "Continue"
         generate_button: "Start generating"
+
         head_title: "%{project} | New report"
         nav_title: "Report for: "
         nav_print: "Print"