From 289d4213e291a56253c3a3158b9bdef71c5d48d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BE=9D=E7=91=AA=E8=B2=93?= <imacat@mail.imacat.idv.tw>
Date: Tue, 10 Mar 2026 09:10:27 +0800
Subject: [PATCH] Refactor MainContainer to use onBeforeRouteUpdate Composition
 API, eliminating dual script block (S3863)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/views/MainContainer.vue | 98 ++++++++++++++++++-------------------
 1 file changed, 47 insertions(+), 51 deletions(-)

diff --git a/src/views/MainContainer.vue b/src/views/MainContainer.vue
index 783ecd0..a5271cb 100644
--- a/src/views/MainContainer.vue
+++ b/src/views/MainContainer.vue
@@ -13,7 +13,7 @@
   </main>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 // The Lucia project.
 // Copyright 2023-2026 DSP, inc.  All rights reserved.
 // Authors:
@@ -23,67 +23,26 @@
 /**
  * @module views/MainContainer Main application layout with
  *   header, navbar, and router view. Handles unsaved-changes
- *   confirmation via beforeRouteUpdate.
+ *   confirmation via onBeforeRouteUpdate.
  */
 
-import { usePageAdminStore as usePageAdminStoreInGuard } from "@/stores/pageAdmin";
-import { useAllMapDataStore as useAllMapDataStoreInGuard } from "@/stores/allMapData";
-import { useConformanceStore as useConformanceStoreInGuard } from "@/stores/conformance";
-import {
-  leaveFilter as leaveFilterInGuard,
-  leaveConformance as leaveConformanceInGuard,
-} from "@/module/alertModal.js";
-import emitterInGuard from "@/utils/emitter";
-
-export default {
-  // Remember, Swal modal handling is called before beforeRouteUpdate
-  beforeRouteUpdate(to, from, next) {
-    const pageAdminStore = usePageAdminStoreInGuard();
-    const allMapDataStore = useAllMapDataStoreInGuard();
-    const conformanceStore = useConformanceStoreInGuard();
-
-    pageAdminStore.setPreviousPage(from.name);
-
-    // When leaving the Map page, check if there is unsaved data
-    if (
-      (from.name === "Map" || from.name === "CheckMap") &&
-      allMapDataStore.tempFilterId
-    ) {
-      // Notify the Map's Sidebar to close
-      emitterInGuard.emit("leaveFilter", false);
-      leaveFilterInGuard(next, allMapDataStore.addFilterId, to.path);
-    } else if (
-      (from.name === "Conformance" || from.name === "CheckConformance") &&
-      (conformanceStore.conformanceLogTempCheckId ||
-        conformanceStore.conformanceFilterTempCheckId)
-    ) {
-      leaveConformanceInGuard(
-        next,
-        conformanceStore.addConformanceCreateCheckId,
-        to.path,
-      );
-    } else if (pageAdminStore.shouldKeepPreviousPage) {
-      pageAdminStore.clearShouldKeepPreviousPageBoolean();
-    } else {
-      pageAdminStore.copyPendingPageToActivePage();
-      next();
-    }
-  },
-};
-</script>
-
-<script setup lang="ts">
 import { onBeforeMount } from "vue";
-import { useRouter } from "vue-router";
+import { useRouter, onBeforeRouteUpdate } from "vue-router";
 import { useLoadingStore } from "@/stores/loading";
+import { usePageAdminStore } from "@/stores/pageAdmin";
+import { useAllMapDataStore } from "@/stores/allMapData";
+import { useConformanceStore } from "@/stores/conformance";
+import { leaveFilter, leaveConformance } from "@/module/alertModal.js";
+import emitter from "@/utils/emitter";
 import Header from "@/components/AppHeader.vue";
 import Navbar from "@/components/AppNavbar.vue";
 import Loading from "@/components/LoadingOverlay.vue";
-import { usePageAdminStore } from "@/stores/pageAdmin";
 import ModalContainer from "./AccountManagement/ModalContainer.vue";
 
 const loadingStore = useLoadingStore();
 const pageAdminStore = usePageAdminStore();
+const allMapDataStore = useAllMapDataStore();
+const conformanceStore = useConformanceStore();
 const router = useRouter();
 
 /** Sets the highlighted navbar item based on the current URL path on page load. */
@@ -104,4 +63,41 @@ const setHighlightedNavItemOnLanding = () => {
 onBeforeMount(() => {
   setHighlightedNavItemOnLanding();
 });
+
+// Handles unsaved-changes confirmation when navigating between routes
+onBeforeRouteUpdate(async (to, from) => {
+  pageAdminStore.setPreviousPage(from.name);
+
+  // When leaving the Map page, check if there is unsaved data
+  if (
+    (from.name === "Map" || from.name === "CheckMap") &&
+    allMapDataStore.tempFilterId
+  ) {
+    // Notify the Map's Sidebar to close
+    emitter.emit("leaveFilter", false);
+    let blocked = false;
+    await leaveFilter(
+      (value) => { if (value === false) blocked = true; },
+      allMapDataStore.addFilterId,
+      to.path,
+    );
+    if (blocked) return false;
+  } else if (
+    (from.name === "Conformance" || from.name === "CheckConformance") &&
+    (conformanceStore.conformanceLogTempCheckId ||
+      conformanceStore.conformanceFilterTempCheckId)
+  ) {
+    let blocked = false;
+    await leaveConformance(
+      (value) => { if (value === false) blocked = true; },
+      conformanceStore.addConformanceCreateCheckId,
+      to.path,
+    );
+    if (blocked) return false;
+  } else if (pageAdminStore.shouldKeepPreviousPage) {
+    pageAdminStore.clearShouldKeepPreviousPageBoolean();
+  } else {
+    pageAdminStore.copyPendingPageToActivePage();
+  }
+});
 </script>