From 5a92a3f9651d2ee868aaba0878ba05f96f69fe96 Mon Sep 17 00:00:00 2001
From: Yash Maheshwari <yashmaheshwari551@gmail.com>
Date: Mon, 4 Mar 2024 17:54:36 +0530
Subject: [PATCH] Fixed: multiple alert getting rendered in DOM when moving
 back-and-forth from route and query page

---
 src/views/BrokeringQuery.vue | 18 +++++++++++-------
 src/views/BrokeringRoute.vue | 13 ++++++++-----
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/views/BrokeringQuery.vue b/src/views/BrokeringQuery.vue
index 93d5213..731c022 100644
--- 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
index db811b3..59e2f8a 100644
--- 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) {