prevent unsaved change loss

Message/Notification/App/AppNotification.js

@@ -67,6 +67,20 @@ export class AppNotification
             output.querySelector('.log-msg-title').remove();
         }
 
+        if (!msg.primaryButton) {
+            output.querySelector('.primary-button').remove();
+        } else {
+            output.querySelector('.primary-button').innerHTML = msg.primaryButton.text;
+            output.querySelector('.primary-button').addEventListener('click', msg.primaryButton.callback);
+        }
+
+        if (!msg.secondaryButton) {
+            output.querySelector('.secondary-button').remove();
+        } else {
+            output.querySelector('.secondary-button').innerHTML = msg.secondaryButton.text;
+            output.querySelector('.secondary-button').addEventListener('click', msg.secondaryButton.callback);
+        }
+
         tpl.parentNode.appendChild(output);
 
         const logs             = document.getElementsByClassName('log-msg');

Message/Notification/NotificationMessage.js

@@ -35,5 +35,8 @@ export class NotificationMessage
 
         /** @type {boolean} isSticky */
         this.isSticky = isSticky;
+
+        this.primaryButton = null;
+        this.secondaryButton = null;
     };
 };

Message/Request/Request.js

@@ -340,7 +340,10 @@ export class Request
 
             for (const p in this.requestHeader) {
                 if (Object.prototype.hasOwnProperty.call(this.requestHeader, p) && this.requestHeader[p] !== '') {
-                    this.xhr.setRequestHeader(p, this.requestHeader[p]);
+                    if (this.requestHeader[p] !== 'multipart/form-data') {
+                        // note: If not excluded for multipart/form-data you need to set the boundary= manually for php which is not wanted
+                        this.xhr.setRequestHeader(p, this.requestHeader[p]);
+                    }
                 }
             }
         }

UI/Component/Form.js

@@ -56,6 +56,19 @@ export class Form
         return this.forms[id];
     };
 
+    hasChanges()
+    {
+        const length = this.forms.length;
+
+        for (let i = 0; i < length; ++i) {
+            if (this.forms[i].hasChange()) {
+                return true;
+            }
+        }
+
+        return false;
+    };
+
     /**
      * Is form ignored?
      *
@@ -136,6 +149,12 @@ export class Form
             toBind[i].addEventListener('click', function (event) {
                 self.formActions(self, event, id);
             });
+
+            if (!this.forms[id].isOnChange()) {
+                toBind[i].addEventListener('change', function (evnt) {
+                    window.omsApp.state.hasChanges = true;
+                });
+            }
         }
 
         const imgPreviews = this.forms[id].getImagePreviews();
@@ -154,6 +173,7 @@ export class Form
             onChangeContainer.addEventListener('change', function (event)
             {
                 jsOMS.preventAll(event);
+                window.omsApp.state.hasChanges = true;
 
                 const target = event.target.tagName.toLowerCase();
 
@@ -1053,6 +1073,7 @@ export class Form
             );
         });
 
+        window.omsApp.state.hasChanges = false;
         request.send();
 
         if (form.getFinally() !== null) {

UI/GeneralUI.js

@@ -1,6 +1,10 @@
 
 import { UriFactory }    from '../Uri/UriFactory.js';
 import { AdvancedInput } from './Component/AdvancedInput.js';
+import { NotificationLevel }   from '../Message/Notification/NotificationLevel.js';
+import { NotificationMessage } from '../Message/Notification/NotificationMessage.js';
+import { NotificationType }    from '../Message/Notification/NotificationType.js';
+
 
 /**
  * UI manager for handling basic ui elements.
@@ -100,7 +104,6 @@ export class GeneralUI
 
                 let uri = this.getAttribute('data-href');
                 uri     = uri === null ? this.getAttribute('href') : uri;
-                history.pushState({}, null, UriFactory.build(uri));
 
                 if (this.getAttribute('target') === '_blank'
                     || this.getAttribute(['data-target']) === '_blank'
@@ -109,18 +112,50 @@ export class GeneralUI
                     window.open(UriFactory.build(uri), '_blank');
                 } else {
                     // window.location = UriFactory.build(uri);
-
                     fetch(UriFactory.build(uri))
                     .then((response) => response.text())
                     .then((html) => {
-                        document.documentElement.innerHTML = html;
+                        if (window.omsApp.state.hasChanges) {
-                        /* This is not working as it reloads the page ?!
+                            let message = new NotificationMessage(NotificationLevel.WARNING, 'Unsaved changes', 'Do you want to continue?', true, true);
-                        document.open();
+                            message.primaryButton = {
-                        document.write(html);
+                                text: 'Yes',
-                        document.close();
+                                style: 'ok',
-                        */
+                                callback: function () {
-                        // @todo: fix memory leak which most likely exists because of continous binding without removing binds
+                                    document.documentElement.innerHTML = html;
-                        window.omsApp.reInit();
+                                    window.omsApp.state.hasChanges = false;
+                                    this.parentNode.remove();
+                                    history.pushState({}, null, UriFactory.build(uri));
+                                    /* This is not working as it reloads the page ?!
+                                    document.open();
+                                    document.write(html);
+                                    document.close();
+                                    */
+                                    // @todo: fix memory leak which most likely exists because of continous binding without removing binds
+                                    window.omsApp.reInit();
+                                },
+                            };
+                            message.secondaryButton = {
+                                text: 'No',
+                                style: 'error',
+                                callback: function () {
+                                    this.parentNode.remove();
+                                },
+                            };
+
+                            window.omsApp.notifyManager.send(message, NotificationType.APP_NOTIFICATION);
+                        } else {
+                            document.documentElement.innerHTML = html;
+                            window.omsApp.state.hasChanges = false;
+                            this.parentNode.remove();
+                            history.pushState({}, null, UriFactory.build(uri));
+                            /* This is not working as it reloads the page ?!
+                            document.open();
+                            document.write(html);
+                            document.close();
+                            */
+                            // @todo: fix memory leak which most likely exists because of continous binding without removing binds
+                            window.omsApp.reInit();
+                        }
                     })
                     .catch((error) => {
                         console.warn(error);

Views/FormView.js

@@ -56,6 +56,9 @@ export class FormView
         /** @type {string} action */
         this.action = '';
 
+        /** @type {bool} hasChanges */
+        this.hasChanges = false;
+
         this.bind();
     };