Migrate all Vue components from Options API to <script setup>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/views/MainContainer.vue

@@ -5,86 +5,21 @@
       <Navbar/>
   </header>
   <main id='loading_and_router_view_container_in_maincontainer' class="w-full">
-    <Loading v-if="loadingStore.isLoading" />    
+    <Loading v-if="loadingStore.isLoading" />
     <router-view></router-view>
   </main>
 </template>
 
 <script lang='ts'>
-import { onBeforeMount, } from 'vue';
-import { useRouter } from 'vue-router';
-import { storeToRefs, mapActions, mapState, } from 'pinia';
-import { useLoadingStore } from '@/stores/loading';
-import { useAllMapDataStore } from '@/stores/allMapData';
-import { useConformanceStore } from '@/stores/conformance';
-import Header from "@/components/Header.vue";
-import Navbar from "@/components/Navbar.vue";
-import Loading from '@/components/Loading.vue';
-import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
-import { usePageAdminStore } from '@/stores/pageAdmin';
 import { useLoginStore } from "@/stores/login";
+import { usePageAdminStore } from "@/stores/pageAdmin";
+import { useAllMapDataStore } from "@/stores/allMapData";
+import { useConformanceStore } from "@/stores/conformance";
 import { getCookie, setCookie } from "@/utils/cookieUtil.js";
-import ModalContainer from './AccountManagement/ModalContainer.vue';
+import { leaveFilter, leaveConformance } from "@/module/alertModal.js";
+import emitter from "@/utils/emitter";
 
 export default {
-  name: 'MainContainer',
-  setup() {
-    const loadingStore = useLoadingStore();
-    const allMapDataStore = useAllMapDataStore();
-    const conformanceStore = useConformanceStore();
-    const pageAdminStore = usePageAdminStore();
-    const { tempFilterId, createFilterId,  temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
-    const {  conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
-    const router = useRouter();
-    const setHighlightedNavItemOnLanding = () => {
-      const currentPath = router.currentRoute.value.path;
-      const pathSegments: string[] = currentPath.split('/').filter(segment => segment !== '');
-      if(pathSegments.length === 1) {
-        if(pathSegments[0] === 'files') {
-          pageAdminStore.setActivePage('ALL');
-        }
-      } else if (pathSegments.length > 1){
-        pageAdminStore.setActivePage(pathSegments[1].toUpperCase());
-      }
-    };
-
-    onBeforeMount(() => {
-      setHighlightedNavItemOnLanding();
-    });
-    return {
-      loadingStore, temporaryData, tempFilterId,
-      createFilterId, postRuleData, ruleData,
-      conformanceLogTempCheckId, conformanceFilterTempCheckId,
-      allMapDataStore, conformanceStore,
-    };
-  },
-  components: {
-    Header,
-    Navbar,
-    Loading,
-    ModalContainer,
-  },
-  computed: {
-    ...mapState(usePageAdminStore, [
-      'shouldKeepPreviousPage',
-      'activePageComputedByRoute'
-    ]),
-    ...mapState(useLoginStore, [
-      'isLoggedIn',
-      'auth',
-    ])
-  },
-  methods: {
-    ...mapActions(usePageAdminStore, [
-      'copyPendingPageToActivePage',
-      'setPreviousPage',
-      'clearShouldKeepPreviousPageBoolean',
-      'setActivePageComputedByRoute',
-    ],),
-    ...mapActions(useLoginStore, [
-      'refreshToken',
-    ],),
-  },
   // 重新整理畫面以及第一次進入網頁時，beforeRouteEnter這個hook會被執行，然而beforeRouteUpdate不會被執行
     // PSEUDOCODE
     // if (not logged in) {
@@ -101,8 +36,8 @@ export default {
     // }
   async beforeRouteEnter(to, from, next) {
     const loginStore = useLoginStore();
-   
-    if (!getCookie("isLuciaLoggedIn")) {  //這裡不要用pinia的isLoggedIn來檢查，因為會有重新整理時撈不到Persisted value的值的bug
+
+    if (!getCookie("isLuciaLoggedIn")) {
       if (getCookie('luciaRefreshToken')) {
         try {
           await loginStore.refreshToken();
@@ -121,42 +56,79 @@ export default {
         next({
           path: '/login',
           query: {
-            // 記憶未來登入後要進入的網址，且記憶的時候要用base64編碼包裹住
             'return-to': btoa(window.location.href),
           }
         });
       }
-    } else {    
+    } else {
       next();
     }
   },
   // Remember, Swal modal handling is called before beforeRouteUpdate
   beforeRouteUpdate(to, from, next) {
-    this.setPreviousPage(from.name);
+    const pageAdminStore = usePageAdminStore();
+    const allMapDataStore = useAllMapDataStore();
+    const conformanceStore = useConformanceStore();
+
+    pageAdminStore.setPreviousPage(from.name);
 
     // 離開 Map 頁時判斷是否有無資料和需要存檔
-    if ((from.name === 'Map' || from.name === 'CheckMap') && this.tempFilterId) {
+    if ((from.name === 'Map' || from.name === 'CheckMap') && allMapDataStore.tempFilterId) {
       // 傳給 Map，通知 Sidebar 要關閉。
-      this.$emitter.emit('leaveFilter', false);
-      leaveFilter(next, this.allMapDataStore.addFilterId, to.path)
-    } else if((this.$route.name === 'Conformance' || this.$route.name === 'CheckConformance') 
-        && (this.conformanceLogTempCheckId || this.conformanceFilterTempCheckId)) {
-      leaveConformance(next, this.conformanceStore.addConformanceCreateCheckId, to.path);
-    } else if(this.shouldKeepPreviousPage) {
-      // pass on and reset boolean for future use
-      this.clearShouldKeepPreviousPageBoolean();
+      emitter.emit('leaveFilter', false);
+      leaveFilter(next, allMapDataStore.addFilterId, to.path)
+    } else if((from.name === 'Conformance' || from.name === 'CheckConformance')
+        && (conformanceStore.conformanceLogTempCheckId || conformanceStore.conformanceFilterTempCheckId)) {
+      leaveConformance(next, conformanceStore.addConformanceCreateCheckId, to.path);
+    } else if(pageAdminStore.shouldKeepPreviousPage) {
+      pageAdminStore.clearShouldKeepPreviousPageBoolean();
     } else {
-      // most cases go this road
-
-      // In this else block:
-      // for those pages who don't need popup modals, we handle page administration right now.
-      // By calling the following code, we decide the next visiting page.
-      // 在這個 else 區塊中：
-      // 對於那些不需要彈窗的頁面，我們現在就處理頁面管理。
-      // 透過呼叫以下代碼，我們決定出下一個將要走訪的頁面。
-      this.copyPendingPageToActivePage();
+      pageAdminStore.copyPendingPageToActivePage();
       next();
     }
   },
 };
 </script>
+
+<script setup lang='ts'>
+import { onBeforeMount } from 'vue';
+import { useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useLoadingStore } from '@/stores/loading';
+import { useAllMapDataStore } from '@/stores/allMapData';
+import { useConformanceStore } from '@/stores/conformance';
+import Header from "@/components/Header.vue";
+import Navbar from "@/components/Navbar.vue";
+import Loading from '@/components/Loading.vue';
+import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
+import { usePageAdminStore } from '@/stores/pageAdmin';
+import { useLoginStore } from "@/stores/login";
+import emitter from '@/utils/emitter';
+import ModalContainer from './AccountManagement/ModalContainer.vue';
+
+const loadingStore = useLoadingStore();
+const allMapDataStore = useAllMapDataStore();
+const conformanceStore = useConformanceStore();
+const pageAdminStore = usePageAdminStore();
+const loginStore = useLoginStore();
+const router = useRouter();
+
+const { tempFilterId, createFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
+const { conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
+
+const setHighlightedNavItemOnLanding = () => {
+  const currentPath = router.currentRoute.value.path;
+  const pathSegments: string[] = currentPath.split('/').filter(segment => segment !== '');
+  if(pathSegments.length === 1) {
+    if(pathSegments[0] === 'files') {
+      pageAdminStore.setActivePage('ALL');
+    }
+  } else if (pathSegments.length > 1){
+    pageAdminStore.setActivePage(pathSegments[1].toUpperCase());
+  }
+};
+
+onBeforeMount(() => {
+  setHighlightedNavItemOnLanding();
+});
+</script>