Merge pull request #2389 from okriuchykhin/ok_SCI_4301

Add unsaved data notification when navigating away from the inventory [SCI-4301]

app/assets/javascripts/repositories/row_editor.js

@@ -7,6 +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 = 'repository-row-edit-form';
 
   var TABLE;
 
@@ -20,7 +21,7 @@ var RepositoryDatatableRowEditor = (function() {
   }
 
   function validateAndSubmit($table) {
-    let $form = $table.find('.repository-row-edit-form');
+    let $form = $table.find(`.${EDIT_FORM_CLASS_NAME}`);
     let $row = $form.closest('tr');
     let valid = true;
     let directUrl = $table.data('direct-upload-url');
@@ -100,7 +101,7 @@ var RepositoryDatatableRowEditor = (function() {
     TABLE = table;
     let $table = $(TABLE.table().node());
 
-    $table.on('ajax:success', '.repository-row-edit-form', function(ev, data) {
+    $table.on('ajax:success', `.${EDIT_FORM_CLASS_NAME}`, function(ev, data) {
       TABLE.ajax.reload(() => {
         animateSpinner(null, false);
         HelperModule.flashAlertMsg(data.flash, 'success');
@@ -108,7 +109,7 @@ var RepositoryDatatableRowEditor = (function() {
       });
     });
 
-    $table.on('ajax:error', '.repository-row-edit-form', function(ev, data) {
+    $table.on('ajax:error', `.${EDIT_FORM_CLASS_NAME}`, function(ev, data) {
       animateSpinner(null, false);
       HelperModule.flashAlertMsg(data.responseJSON.flash, 'danger');
     });
@@ -123,7 +124,7 @@ var RepositoryDatatableRowEditor = (function() {
     let rowForm = $(`
       <td>
         <form id="${formId}"
-              class="repository-row-edit-form"
+              class="${EDIT_FORM_CLASS_NAME}"
               action="${actionUrl}"
               method="post"
               data-remote="true">
@@ -172,7 +173,7 @@ var RepositoryDatatableRowEditor = (function() {
     let requestUrl = $(TABLE.table().node()).data('current-uri');
     let rowForm = $(`
       <form id="${formId}"
-            class="repository-row-edit-form"
+            class="${EDIT_FORM_CLASS_NAME}"
             action="${row.data().recordUpdateUrl}"
             method="patch"
             data-remote="true"
@@ -209,6 +210,7 @@ var RepositoryDatatableRowEditor = (function() {
   }
 
   return Object.freeze({
+    EDIT_FORM_CLASS_NAME: EDIT_FORM_CLASS_NAME,
     initFormSubmitAction: initFormSubmitAction,
     validateAndSubmit: validateAndSubmit,
     switchRowToEditMode: switchRowToEditMode,

app/assets/javascripts/sitewide/repository_helper.js

@@ -0,0 +1,20 @@
+/* global RepositoryDatatableRowEditor I18n */
+
+(function() {
+  'use strict';
+
+  function initUnsavedWorkDialog() {
+    $(document).on('turbolinks:before-visit', () => {
+      let exit = true;
+      let editing = $(`.${RepositoryDatatableRowEditor.EDIT_FORM_CLASS_NAME}`).length > 0;
+
+      if (editing) {
+        exit = confirm(I18n.t('repositories.js.leaving_warning'));
+      }
+
+      return exit;
+    });
+  }
+
+  initUnsavedWorkDialog();
+}());

config/locales/en.yml

@@ -1135,6 +1135,7 @@ 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: