Improved: the leave alert UI when leaving the page without saving cha…

…nges(#162) Updated the alert interface when leaving the page Added option to save the changes the before leaving or discard the changes and change the page in all cases Removed unused entries from the locale file and added the static text entries
hotwax · Apr 8, 2024 · 2a82397 · 2a82397
1 parent e3c8c75
commit 2a82397
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 29 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -7,7 +7,6 @@
   "Allocated Items": "Allocated Items",
   "Allow partial allocation": "Allow partial allocation",
   "Already passed": "Already passed",
-  "Any edits made on this page will be lost.": "Any edits made on this page will be lost.",
   "App": "App",
   "Archive": "Archive",
   "Archived": "Archived",
@@ -30,7 +29,9 @@
   "Connection configuration is missing for oms.": "Connection configuration is missing for oms.",
   "Created at": "Created at",
   "Description": "Description",
+  "Discard": "Discard",
   "Draft": "Draft",
+  "Do you want to save your changes before leaving this page?": "Do you want to save your changes before leaving this page?",
   "duration": "duration",
   "Edit": "Edit",
   "Error getting user profile": "Error getting user profile",
@@ -58,9 +59,7 @@
   "Inventory Sort": "Inventory Sort",
   "Job updated": "Job updated",
   "kms": "kms",
-  "LEAVE": "LEAVE",
   "Last run": "Last run",
-  "Leave page": "Leave page",
   "Logging in...": "Logging in...",
   "Login": "Login",
   "Logout": "Logout",
@@ -113,7 +112,6 @@
   "route name": "route name",
   "rules": " rules",
   "run name": "run name",
-  "STAY": "STAY",
   "Sales Channel": "Sales Channel",
   "Save": "Save",
   "Save changes": "Save changes",

diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
@@ -325,7 +325,6 @@ onIonViewWillEnter(async () => {
 
 onBeforeRouteLeave(async (to) => {
   if(to.path === "/login") return;
-  let canLeave = false;
 
   if(!hasUnsavedChanges.value) {
     // clearning the selected ruleId whenever user tries to leave the page, we need to clear this id, as if user opens some other routing then the id will not be found which will result in an empty state scenario
@@ -335,30 +334,28 @@ onBeforeRouteLeave(async (to) => {
   }
 
   const alert = await alertController.create({
-    header: translate("Leave page"),
-    message: translate("Any edits made on this page will be lost."),
+    header: translate("Save changes"),
+    message: translate("Do you want to save your changes before leaving this page?"),
     buttons: [
       {
-        text: translate("STAY"),
-        handler: () => {
-          canLeave = false;
-        },
+        text: translate("Discard")
       },
       {
-        text: translate("LEAVE"),
-        handler: () => {
-          // clearning the selected ruleId whenever user leaves the page, we need to clear this id, as if user opens some other routing then the id will not be found which will result in an empty state scenario
-          store.dispatch("orderRouting/updateRoutingRuleId", "")
-          store.dispatch("orderRouting/clearRules")
-          canLeave = true;
+        text: translate("Save"),
+        handler: async () => {
+          await save();
         },
       },
     ],
   });
 
+  // clearning the selected ruleId whenever user leaves the page, we need to clear this id, as if user opens some other routing then the id will not be found which will result in an empty state scenario
+  store.dispatch("orderRouting/updateRoutingRuleId", "")
+  store.dispatch("orderRouting/clearRules")
+
   alert.present();
   await alert.onDidDismiss();
-  return canLeave;
+  return;
 })
 
 function getRouteIndex() {

diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
@@ -205,35 +205,31 @@ onIonViewWillEnter(async () => {
 
 onBeforeRouteLeave(async (to) => {
   if(to.path === "/login") return;
-  let canLeave = false;
 
   // If there are no unsaved changes do not create and present the alert
   if(!hasUnsavedChanges.value) {
     return;
   }
 
   const alert = await alertController.create({
-    header: translate("Leave page"),
-    message: translate("Any edits made on this page will be lost."),
+    header: translate("Save changes"),
+    message: translate("Do you want to save your changes before leaving this page?"),
     buttons: [
       {
-        text: translate("STAY"),
-        handler: () => {
-          canLeave = false;
-        },
+        text: translate("Discard")
       },
       {
-        text: translate("LEAVE"),
-        handler: () => {
-          canLeave = true;
+        text: translate("Save"),
+        handler: async () => {
+          await saveRoutingGroup();
         },
       },
     ],
   });
 
   alert.present();
   await alert.onDidDismiss();
-  return canLeave;
+  return;
 })
 
 function updateCronExpression(event: CustomEvent) {