Merge pull request #2933 from okriuchykhin/ok_SCI_5047

Add browser notification for unsaved data when navigating away for tables on Task [SCI-5047]

app/assets/javascripts/application.js.erb

@@ -273,7 +273,19 @@ var HelperModule = (function(){
     /* Clean up TinyMCE */
     tinymce.remove();
   });
-})();
+
+  // Show warning if page has unsaved data
+  $(document).on('turbolinks:before-visit', () => {
+    let exit = true;
+    let editing = $(`.${GLOBAL_CONSTANTS.HAS_UNSAVED_DATA_CLASS_NAME}`).length > 0;
+
+    if (editing) {
+      exit = confirm(I18n.t('general.leaving_unsaved_warning'));
+    }
+
+    return exit;
+  });
+}());
 
 // Check that loaded page, not turbolinks preview
 function notTurbolinksPreview() {

app/assets/javascripts/my_modules/results.js

@@ -149,6 +149,9 @@
           handleResultFileSubmit($form, ev);
           break;
         case ResultTypeEnum.TABLE:
+          $form
+            .find(`.${GLOBAL_CONSTANTS.HAS_UNSAVED_DATA_CLASS_NAME}`)
+            .removeClass(GLOBAL_CONSTANTS.HAS_UNSAVED_DATA_CLASS_NAME);
           break;
         case ResultTypeEnum.TEXT:
           textValidator(

app/assets/javascripts/protocols/steps.js.erb

@@ -101,6 +101,9 @@
       DragNDropSteps.clearFiles();
       if (tinyMCE.editors.step_description_textarea) tinyMCE.editors.step_description_textarea.remove();
       TinyMCE.init('#step_description_textarea');
+      $form.on('change', '.checklist-item-text, .checklist-name', function() {
+        $form.addClass(GLOBAL_CONSTANTS.HAS_UNSAVED_DATA_CLASS_NAME);
+      });
       $("#new-step-checklists fieldset.nested_step_checklists ul").each(function () {
         enableCheckboxSorting(this);
       });
@@ -279,7 +282,10 @@
         colHeaders: true,
         contextMenu: true,
         formulas: true,
-        preventOverflow: 'horizontal'
+        preventOverflow: 'horizontal',
+        afterChange: function() {
+          $container.addClass(GLOBAL_CONSTANTS.HAS_UNSAVED_DATA_CLASS_NAME);
+        }
       });
 
       $container.attr("initialized", true);
@@ -390,6 +396,8 @@
         destroyName = destroyName.replace(/\[\d+\]\[_destroy\]/, "[" + itemPos + "][_destroy]");
         $destroyInput.attr("name", destroyName);
       }
+
+      $formGroup.addClass(GLOBAL_CONSTANTS.HAS_UNSAVED_DATA_CLASS_NAME);
     });
   }
 

app/assets/javascripts/reports/new.js

@@ -1,3 +1,5 @@
+/* globals animateSpinner GLOBAL_CONSTANTS */
+
 var REPORT_CONTENT = '#report-content';
 var ADD_CONTENTS_FORM_ID = '#add-contents-form';
 var SAVE_REPORT_FORM_ID = '#save-report-form';
@@ -42,9 +44,12 @@ function initializeHandsonTable(el) {
       columnSorting: true,
       editor: false,
       copyPaste: false,
-      formulas: true
+      formulas: true,
+      afterChange: function() {
+        el.addClass(GLOBAL_CONSTANTS.HAS_UNSAVED_DATA_CLASS_NAME);
+      }
     });
-    el.handsontable("getInstance").loadData(data);
+    el.handsontable('getInstance').loadData(data);
     el.handsontable('getInstance').getPlugin('columnSorting').sort(3, order);
 
     // "Hack" to disable user sorting rows by clicking on
@@ -61,7 +66,10 @@ function initializeHandsonTable(el) {
       colHeaders: true,
       editor: false,
       copyPaste: false,
-      formulas: true
+      formulas: true,
+      afterChange: function() {
+        el.addClass(GLOBAL_CONSTANTS.HAS_UNSAVED_DATA_CLASS_NAME);
+      }
     });
     el.handsontable("getInstance").loadData(data);
   }

app/assets/javascripts/repositories/row_editor.js

@@ -7,7 +7,7 @@ var RepositoryDatatableRowEditor = (function() {
   const NAME_COLUMN_ID = 'row-name';
   const TABLE_ROW = '<tr></tr>';
   const TABLE_CELL = '<td></td>';
-  const EDIT_FORM_CLASS_NAME = GLOBAL_CONSTANTS.REPOSITORY_ROW_EDITOR_FORM_CLASS_NAME;
+  const EDIT_FORM_CLASS_NAME = 'repository-row-edit-form';
 
   var TABLE;
 
@@ -125,7 +125,7 @@ var RepositoryDatatableRowEditor = (function() {
     let rowForm = $(`
       <td>
         <form id="${formId}"
-              class="${EDIT_FORM_CLASS_NAME}"
+              class="${EDIT_FORM_CLASS_NAME} ${GLOBAL_CONSTANTS.HAS_UNSAVED_DATA_CLASS_NAME}"
               action="${actionUrl}"
               method="post"
               data-remote="true">
@@ -174,7 +174,7 @@ var RepositoryDatatableRowEditor = (function() {
     let requestUrl = $(TABLE.table().node()).data('current-uri');
     let rowForm = $(`
       <form id="${formId}"
-            class="${EDIT_FORM_CLASS_NAME}"
+            class="${EDIT_FORM_CLASS_NAME} ${GLOBAL_CONSTANTS.HAS_UNSAVED_DATA_CLASS_NAME}"
             action="${row.data().recordUpdateUrl}"
             method="patch"
             data-remote="true"

app/assets/javascripts/results/result_tables.js.erb

@@ -22,7 +22,10 @@
             colHeaders: true,
             contextMenu: true,
             formulas: true,
-            preventOverflow: 'horizontal'
+            preventOverflow: 'horizontal',
+            afterChange: function() {
+              $container.addClass(GLOBAL_CONSTANTS.HAS_UNSAVED_DATA_CLASS_NAME);
+            }
           });
         });
       }

app/assets/javascripts/sitewide/constants.js.erb

@@ -6,7 +6,7 @@ const GLOBAL_CONSTANTS = {
   FILENAME_TRUNCATION_LENGTH: <%= Constants::FILENAME_TRUNCATION_LENGTH %>,
   FILE_MAX_SIZE_MB: parseInt($('meta[name="max-file-size"]').attr('content'), 10),
   IS_SAFARI: /^((?!chrome|android).)*safari/i.test(navigator.userAgent),
-  REPOSITORY_ROW_EDITOR_FORM_CLASS_NAME: 'repository-row-edit-form',
   REPOSITORY_LIST_ITEMS_PER_COLUMN: <%= Constants::REPOSITORY_LIST_ITEMS_PER_COLUMN %>,
-  REPOSITORY_CHECKLIST_ITEMS_PER_COLUMN: <%= Constants::REPOSITORY_CHECKLIST_ITEMS_PER_COLUMN %>
+  REPOSITORY_CHECKLIST_ITEMS_PER_COLUMN: <%= Constants::REPOSITORY_CHECKLIST_ITEMS_PER_COLUMN %>,
+  HAS_UNSAVED_DATA_CLASS_NAME: 'has-unsaved-data'
 };

app/assets/javascripts/sitewide/form_validators.js.erb

@@ -87,7 +87,7 @@ function checklistsValidator(ev, checklists, editMode) {
         }
       })
 
-      var $checklistInput = $checklist.find(".checklist_name");
+      var $checklistInput = $checklist.find(".checklist-name");
       // In edit mode, checklist's name can't be blank if any items present
       var allowBlankChklstName = !(anyChecklistItemFilled || editMode);
       var textLimitMin = allowBlankChklstName ? 0 : 1;

app/assets/javascripts/sitewide/repository_helper.js

@@ -1,24 +1,3 @@
-/* global GLOBAL_CONSTANTS I18n */
-
-(function() {
-  'use strict';
-
-  function initUnsavedWorkDialog() {
-    $(document).on('turbolinks:before-visit', () => {
-      let exit = true;
-      let editing = $(`.${GLOBAL_CONSTANTS.REPOSITORY_ROW_EDITOR_FORM_CLASS_NAME}`).length > 0;
-
-      if (editing) {
-        exit = confirm(I18n.t('repositories.js.leaving_warning'));
-      }
-
-      return exit;
-    });
-  }
-
-  initUnsavedWorkDialog();
-}());
-
 function initAssignedTasksDropdown(table) {
   function loadTasks(counterContainer) {
     var tasksContainer = counterContainer.find('.tasks');

app/views/steps/_form_checklists.html.erb

@@ -4,7 +4,7 @@
       <div class="col-xs-11">
         <%= ff.smart_text_area :name,
                                label: t('protocols.steps.new.checklist_name'),
-                               class: 'checklist_name',
+                               class: 'checklist-name',
                                autofocus: true,
                                single_line: true,
                                placeholder: t('protocols.steps.new.checklist_name_placeholder'),

config/locales/en.yml

@@ -1258,7 +1258,6 @@ en:
       not_found_error: "This inventory item does not exist."
       column_added: "New column was sucessfully created."
       empty_column_name: "Please enter column name."
-      leaving_warning: "You have made some changes, are you sure you want to leave this page?"
     create:
       success_flash: "Successfully added item <strong>%{record}</strong> to inventory <strong>%{repository}</strong>"
     update:
@@ -2173,10 +2172,10 @@ en:
     update: "Update"
     edit: "Edit"
     cancel: "Cancel"
-    save: "Save"
     close: "Close"
     create: 'Create'
     change: "Change"
+    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"
     comment_placeholder: "Your Message"