Merge pull request #3259 from okriuchykhin/ok_SCI_5622

Add confirmation modal for report regeneration action [SCI-5622]

app/assets/javascripts/reports/reports_datatable.js

@@ -1,4 +1,4 @@
-/* global I18n DataTableHelpers animateSpinner HelperModule */
+/* global I18n DataTableHelpers animateSpinner HelperModule  Promise */
 
 (function() {
   'use strict';
@@ -76,7 +76,7 @@
     }
 
     if (data.preview_url) {
-      return `<a href="#" class="file-preview-link" data-preview-url="${data.preview_url}">
+      return `<a href="#" class="file-preview-link docx" data-preview-url="${data.preview_url}">
                 <i class="fas fa-file-word"></i>
                 ${I18n.t('projects.reports.index.docx')}
               </a>`;
@@ -100,7 +100,7 @@
     }
 
     if (data.preview_url) {
-      return `<a href="#" class="file-preview-link" data-preview-url="${data.preview_url}">
+      return `<a href="#" class="file-preview-link pdf" data-preview-url="${data.preview_url}">
                 <i class="fas fa-file-pdf"></i>
                 ${I18n.t('projects.reports.index.pdf')}
               </a>`;
@@ -247,35 +247,63 @@
     });
   }
 
-  function initGeneratePDFReport() {
-    $('.generate-pdf').click(function(ev) {
+  function generateReportRequest(pathAttrName) {
+    if (CHECKED_REPORTS.length === 1) {
+      let row = $(".report-row[data-id='" + CHECKED_REPORTS[0] + "']");
+      animateSpinner();
+      $.post(row.data(pathAttrName), function(response) {
+        animateSpinner(null, false);
+        HelperModule.flashAlertMsg(response.message, 'success');
+        checkProcessingStatus(row.data('id'));
+      });
+    }
+  }
+
+  function initUpdatePDFReport() {
+    $('#updatePdf').click(function(ev) {
       ev.stopPropagation();
       ev.preventDefault();
-      animateSpinner();
-      if (CHECKED_REPORTS.length === 1) {
-        let row = $(".report-row[data-id='" + CHECKED_REPORTS[0] + "']");
-        $.post(row.data('generate-pdf-path'), function(response) {
-          animateSpinner(null, false);
-          HelperModule.flashAlertMsg(response.message, 'success');
-          setTimeout(() => { checkProcessingStatus(row.data('id')); }, START_POLLING_INTERVAL);
+
+      new Promise(function(resolve, reject) {
+        $('#regenerate-report-modal').modal('show');
+        $('#regenerate-report-modal .btn-confirm').click(function() {
+          resolve();
         });
-      }
+        $('#regenerate-report-modal').on('hidden.bs.modal', function() {
+          reject();
+        });
+      }).then(function() {
+        $('#regenerate-report-modal').modal('hide');
+        generateReportRequest('generate-pdf-path');
+      }).catch(function() {});
     });
   }
 
   function initGenerateDocxReport() {
-    $('.generate-docx').click(function(ev) {
+    $('#requestDocx').click(function(ev) {
       ev.stopPropagation();
       ev.preventDefault();
-      animateSpinner();
-      if (CHECKED_REPORTS.length === 1) {
-        let row = $(".report-row[data-id='" + CHECKED_REPORTS[0] + "']");
-        $.post(row.data('generate-docx-path'), function(response) {
-          animateSpinner(null, false);
-          HelperModule.flashAlertMsg(response.message, 'success');
-          setTimeout(() => { checkProcessingStatus(row.data('id')); }, START_POLLING_INTERVAL);
+      generateReportRequest('generate-docx-path');
+    });
+  }
+
+  function initUpdateDocxReport() {
+    $('#updateDocx').click(function(ev) {
+      ev.stopPropagation();
+      ev.preventDefault();
+
+      new Promise(function(resolve, reject) {
+        $('#regenerate-report-modal').modal('show');
+        $('#regenerate-report-modal .btn-confirm').click(function() {
+          resolve();
         });
-      }
+        $('#regenerate-report-modal').on('hidden.bs.modal', function() {
+          reject();
+        });
+      }).then(function() {
+        $('#regenerate-report-modal').modal('hide');
+        generateReportRequest('generate-docx-path');
+      }).catch(function() {});
     });
   }
 
@@ -326,8 +354,9 @@
   }
 
   initDatatable();
-  initGeneratePDFReport();
+  initUpdatePDFReport();
   initGenerateDocxReport();
+  initUpdateDocxReport();
   initEditReport();
   initSaveReportPDFToInventory();
   initDeleteReports();

app/jobs/reports/docx_job.rb

@@ -25,7 +25,7 @@ module Reports
         report_path = Rails.application.routes.url_helpers.reports_path
         notification = Notification.create(
           type_of: :deliver,
-          title: I18n.t('projects.reports.index.generation.completed_notification_title'),
+          title: I18n.t('projects.reports.index.generation.completed_docx_notification_title'),
           message: I18n.t('projects.reports.index.generation.completed_notification_message',
                           report_link: "<a href='#{report_path}'>#{sanitize_input(report.name)}</a>",
                           team_name: sanitize_input(report.team.name))

app/jobs/reports/pdf_job.rb

@@ -54,7 +54,7 @@ module Reports
         report_path = Rails.application.routes.url_helpers.reports_path
         notification = Notification.create(
           type_of: :deliver,
-          title: I18n.t('projects.reports.index.generation.completed_notification_title'),
+          title: I18n.t('projects.reports.index.generation.completed_pdf_notification_title'),
           message: I18n.t('projects.reports.index.generation.completed_notification_message',
                           report_link: "<a href='#{report_path}'>#{sanitize_input(report.name)}</a>",
                           team_name: sanitize_input(report.team.name))

app/views/reports/_index_toolbar.html.erb

@@ -12,7 +12,7 @@
       </button>
       <ul id="reportMenuDropdown" class="dropdown-menu report-actions-menu" aria-labelledby="reportMenu">
         <li>
-          <%= link_to '#', remote: true, id: 'updatePdf', class: 'generate-pdf' do %>
+          <%= link_to '#', remote: true, id: 'updatePdf' do %>
             <i class="fas fa-file-pdf"></i>
             <%= t("projects.reports.index.update_pdf") %>
           <% end %>

app/views/reports/index.html.erb

@@ -61,6 +61,8 @@
   <% end %>
 </div>
 
+<%= render partial: 'reports/modals/regenerate' %>
+
 <%= javascript_include_tag 'reports/save_pdf_to_inventory' %>
 <%= javascript_include_tag 'reports/reports_datatable' %>
 <%= javascript_pack_tag 'pdfjs/pdf_js' %>

app/views/reports/modals/_regenerate.html.erb

@@ -0,0 +1,26 @@
+<div class="modal" id="regenerate-report-modal" tabindex="-1" role="dialog" aria-labelledby="regenerate-report-modal-label">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="<%= t('general.close') %>"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title" id="regenerate-report-modal-label">
+          <%= t('projects.reports.index.generation.regeneration_modal_title') %>
+        </h4>
+      </div>
+      <div class="modal-body">
+        <div class="row">
+          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+            <%= t('projects.reports.index.generation.regeneration_modal_body') %>
+            <h4>
+              <%= t('projects.reports.index.generation.regeneration_modal_confirmation') %>
+            </h4>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal"><%= t('general.no_button') %></button>
+        <button type="button" class="btn btn-primary btn-confirm"><%= t('general.yes_button') %></button>
+      </div>
+    </div>
+  </div>
+</div>

config/locales/en.yml

@@ -513,8 +513,12 @@ en:
         generating: "Generating"
         generate: "Generate"
         generation:
+          regeneration_modal_title: "Report content"
+          regeneration_modal_body: "The content of Project, Experiments and Tasks included in this report might have been updated in SciNote since the report was last generated. Therefore the content of the report you are about to generate might be different from the saved version."
+          regeneration_modal_confirmation: "Do you want to continue?"
           accepted_message: "Your report is succesfully added to the generator queue. We will notify you when it is done!"
-          completed_notification_title: "Your report .DOCX was generated successfully."
+          completed_docx_notification_title: "Your report .DOCX was generated successfully."
+          completed_pdf_notification_title: "Your report .PDF was generated successfully."
           completed_notification_message: "Report: %{report_link} | Team: %{team_name}"
         modal_delete:
           head_title: "Delete report/s"