Fixed: multiple alert getting rendered in DOM when moving back-and-fo…

…rth from route and query page
hotwax · Mar 4, 2024 · 5a92a3f · 5a92a3f
1 parent baad44f
commit 5a92a3f
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) {