Add report front-end validations and close wizard modals [SCI-5666] (#3273)

* Add report front-end validations and close wizard modals

* Add constant to report name validation [SCI-5666]

app/assets/javascripts/reports/new.js

@@ -1099,6 +1099,18 @@ function reportHandsonTableConverter() {
       return checked.length === all.length;
     }
 
+    function validateGenerateButtons() {
+      var validName = ($('.report-name').val().length >= GLOBAL_CONSTANTS.NAME_MIN_LENGTH);
+      var validContent = Object.keys(getReportData().project_content.experiments).length > 0;
+      if (validName && validContent) {
+        $('.generate-button').prop('disabled', false);
+        $(' #saveAsNewReport, #UpdateReport').removeClass('disabled');
+      } else {
+        $('.generate-button').prop('disabled', true);
+        $(' #saveAsNewReport, #UpdateReport').addClass('disabled');
+      }
+    }
+
     $('.continue-button').on('click', function() {
       nextStep();
     });
@@ -1132,6 +1144,11 @@ function reportHandsonTableConverter() {
       $('.protocol-steps-checkbox').prop('checked', allCheckboxesSelected($('.report-protocol-settings')));
       $('.all-results-checkbox').prop('checked', allCheckboxesSelected($('.report-result-settings')));
       $('.select-all-task-contents').prop('checked', allCheckboxesSelected($('.report-task-settings')));
+      validateGenerateButtons();
+    });
+
+    $('.report-name').on('change', function() {
+      validateGenerateButtons();
     });
   }
 

app/views/reports/new.html.erb

@@ -4,7 +4,7 @@
       <input type="text" class="sci-input-field report-name" placeholder="<%= t("projects.reports.new.report_name_placeholder") %>" value="<%= @report.name %>"></input>
 
     </div>
-    <button class="btn btn-secondary cancel-button">
+    <button class="btn btn-secondary cancel-button" data-toggle="modal" data-target="#reportWizardExitWarning">
       <%= t("general.cancel") %>
     </button>
   </div>
@@ -65,13 +65,13 @@
           </button>
           <ul id="reportGenerateMenuDropdown" class="dropdown-menu dropdown-menu-right" aria-labelledby="reportGenerateMenu">
             <li>
-              <%= link_to reports_path, remote: true, id: 'saveAsNewReport', data: { create_url: reports_path } do %>
+              <%= link_to reports_path, remote: true, id: 'saveAsNewReport', class: "disabled", data: { create_url: reports_path } do %>
                 <i class="fas fa-plus-circle"></i>
                 <%= t("projects.reports.new.save_as_new_report") %>
               <% end %>
             </li>
             <li>
-              <%= link_to '#', remote: true, id: 'UpdateReport', data: { update_url: report_path(@report) }  do %>
+              <%= link_to '#', remote: true, id: 'UpdateReport', class: "disabled", data: { update_url: report_path(@report) }  do %>
                 <i class="fas fa-redo-alt"></i>
                 <%= t("projects.reports.new.update_report") %>
               <% end %>
@@ -79,7 +79,7 @@
           </ul>
         </div>
       <% else %>
-        <button class="btn btn-primary generate-button"  data-create-url="<%= reports_path %>">
+        <button class="btn btn-primary generate-button"  data-create-url="<%= reports_path %>" disabled>
           <%= t("projects.reports.new.generate_button") %>
         </button>
       <% end %>
@@ -87,6 +87,33 @@
   </div>
 </div>
 
+<div class="modal" id="reportWizardExitWarning" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title">
+          <%= t("projects.reports.new.exit_modal.title_#{@edit ? 'edit' : 'new'}") %>
+        </h4>
+      </div>
+      <div class="modal-body">
+        <p>
+          <%= t("projects.reports.new.exit_modal.description_#{@edit ? 'edit' : 'new'}") %>
+        </p>
+        <p>
+          <%= t("projects.reports.new.exit_modal.description_2") %>
+        </p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">
+          <%= t('general.no') %>
+        </button>
+        <%= link_to t('general.yes'), reports_path, class: "btn btn-primary" %>
+      </div>
+    </div>
+  </div>
+</div>
+
 <% if @edit %>
   <%= render partial: 'report_edit_warning_modal' %>
 <% end %>

config/locales/en.yml

@@ -620,6 +620,12 @@ en:
           here: "here"
           no_columns: "You do not have File columns in selected Inventory. Add a File column to selected Inventory or select another Inventory containing File columns."
           nothing_selected: "Nothing selected"
+        exit_modal:
+          title_new: "Report will be lost"
+          title_edit: "Changes will be lost"
+          description_new: "You’re about to cancel the process of generating a report. This will cause all selections and possible entered data to be lost."
+          description_edit: "You’re about to cancel the process of generating an edited report. This will cause all changes to be lost."
+          description_2: "Do you want to continue?"
         generate_PDF:
           generated_on: "Report generated by SciNote on: %{timestamp}"
       renderers:
@@ -2444,6 +2450,9 @@ en:
     close: "Close"
     create: 'Create'
     change: "Change"
+    # In order to use the strings 'yes' and 'no' as keys, you need to wrap them with quotes
+    'yes': "Yes"
+    'no': "No"
     leaving_unsaved_warning: "You have made some changes, are you sure you want to leave this page?"
     no_comments: "No comments!"
     more_comments: "More comments"