Merge pull request #983 from abpframework/Confirm-Form-Close-Without-Saving

Form extension for confirmation before closing the modal without saving in edit modals

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/modal-manager.js

@@ -69,6 +69,10 @@ $.validator.defaults.ignore = ''; //TODO: Would be better if we can apply only f
                     //TODO: data-ajaxForm comparison seems wrong!
                     if (_$form.attr('data-ajaxForm') === undefined || _$form.attr('data-ajaxForm') === false) {
                         _$form.abpAjaxForm();
+                    } 
+
+                    if (_$form.attr('data-check-form-on-close') === undefined || _$form.attr('data-check-form-on-close') != 'false') {
+                        _$form.needConfirmationOnUnsavedClose(_$modal);
                     }
 
                     _$form.on('abp-ajax-success',

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/jquery/jquery-extensions.js

@@ -3,6 +3,10 @@
         return;
     }
 
+    var localize = function (key) {
+        return abp.localization.getResource('AbpUi')(key);
+    };
+
     /* A simple jQuery plug-in to make a button busy. */
     $.fn.buttonBusy = function (isBusy) {
         return $(this).each(function () {
@@ -127,4 +131,30 @@
         });
     };
 
+    $.fn.needConfirmationOnUnsavedClose = function ($modal) {
+        var $form = $(this);
+        var formSaved = false;
+        var unEditedForm = JSON.stringify($form.serializeFormToObject());
+
+        $modal.on("hide.bs.modal", function (e) {
+            var currentForm = JSON.stringify($form.serializeFormToObject());
+            var thereAreUnsavedChanges = currentForm !== unEditedForm;
+
+            if (!formSaved && thereAreUnsavedChanges) {
+                e.preventDefault();
+                abp.message.confirm(localize('AreYouSureYouWantToCancelEditingWarningMessage'),
+                    function (result) {
+                        if (result) {
+                            formSaved = true;
+                            $modal.modal('hide');
+                        }
+                    });
+            }
+        });
+
+        $(this).on('abp-ajax-success',function () {
+            formSaved = true;
+        });
+    };
+
 })(jQuery);

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json

@@ -45,6 +45,7 @@
     "PagerShowMenuEntries": "Show _MENU_ entries",
     "DatatableActionDropdownDefaultText": "Actions",
     "ChangePassword": "Change password",
-    "PersonalInfo": "My profile"
+    "PersonalInfo": "My profile",
+    "AreYouSureYouWantToCancelEditingWarningMessage": "You have unsaved changes."
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json

@@ -45,6 +45,7 @@
     "PagerShowMenuEntries": "Sayfada _MENU_ kayıt göster.",
     "DatatableActionDropdownDefaultText": "İşlemler",
     "ChangePassword": "Şifre değiştir",
-    "PersonalInfo": "Profilim"
+    "PersonalInfo": "Profilim",
+    "AreYouSureYouWantToCancelEditingWarningMessage": "Kaydedilmemiş değişiklikler var."
   }
 }