Merge pull request #132 from ymaheshwari1/fix/multiple-alerts-in-dom

Fixed: multiple alerts getting rendered in DOM when moving back-and-forth from route and query page
hotwax · Mar 4, 2024 · 8b445be · 8b445be
2 parents baad44f + 5a92a3f
commit 8b445be
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
@@ -327,6 +327,12 @@ 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
+    store.dispatch("orderRouting/updateRoutingRuleId", "")
+    return;
+  }
+
   const alert = await alertController.create({
     header: translate("Leave page"),
     message: translate("Any edits made on this page will be lost."),
@@ -340,19 +346,17 @@ onBeforeRouteLeave(async (to) => {
       {
         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", "")
           canLeave = true;
         },
       },
     ],
   });
 
-  if(hasUnsavedChanges.value) {
-    alert.present();
-    await alert.onDidDismiss();
-    return canLeave;
-  }
-  // 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
-  store.dispatch("orderRouting/updateRoutingRuleId", "")
+  alert.present();
+  await alert.onDidDismiss();
+  return canLeave;
 })
 
 function getRouteIndex() {

diff --git a/src/views/BrokeringRoute.vue b/src/views/BrokeringRoute.vue
@@ -204,6 +204,11 @@ 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."),
@@ -223,11 +228,9 @@ onBeforeRouteLeave(async (to) => {
     ],
   });
 
-  if(hasUnsavedChanges.value) {
-    alert.present();
-    await alert.onDidDismiss();
-    return canLeave;
-  }
+  alert.present();
+  await alert.onDidDismiss();
+  return canLeave;
 })
 
 function updateCronExpression(event: CustomEvent) {