From 21bf59b9437d919e5202701582d2113291dc2273 Mon Sep 17 00:00:00 2001
From: Oleksii Kriuchykhin <okriuchykhin@biosistemika.com>
Date: Thu, 6 Feb 2020 16:44:55 +0100
Subject: [PATCH] Add unsaved data notification when navigating away from the
 inventory [SCI-4301]

---
 .../javascripts/repositories/row_editor.js    | 12 ++++++-----
 .../javascripts/sitewide/repository_helper.js | 20 +++++++++++++++++++
 config/locales/en.yml                         |  1 +
 3 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 app/assets/javascripts/sitewide/repository_helper.js

diff --git a/app/assets/javascripts/repositories/row_editor.js b/app/assets/javascripts/repositories/row_editor.js
index 2b282be84..7d09cf852 100644
--- a/app/assets/javascripts/repositories/row_editor.js
+++ b/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');
@@ -95,7 +96,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');
@@ -103,7 +104,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');
     });
@@ -118,7 +119,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">
@@ -167,7 +168,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"
@@ -204,6 +205,7 @@ var RepositoryDatatableRowEditor = (function() {
   }
 
   return Object.freeze({
+    EDIT_FORM_CLASS_NAME: EDIT_FORM_CLASS_NAME,
     initFormSubmitAction: initFormSubmitAction,
     validateAndSubmit: validateAndSubmit,
     switchRowToEditMode: switchRowToEditMode,
diff --git a/app/assets/javascripts/sitewide/repository_helper.js b/app/assets/javascripts/sitewide/repository_helper.js
new file mode 100644
index 000000000..5e2827d84
--- /dev/null
+++ b/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();
+}());
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 49a989abe..ed472c5b2 100644
--- a/config/locales/en.yml
+++ b/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: