original bug is fixed but save modal is not handle (nav-item bg color is not correctly painted)

src/components/Navbar.vue

@@ -15,7 +15,7 @@
           </div>
           <ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer">
             <li @click="switchNavItem($event, item)" v-for="(item, index) in navViewData[navViewName]"
-              :key="index" :class="{'active': activePage === item}">
+              :key="index" class="nav-item" :class="{'active': activePage.toUpperCase() === item}">
                 {{ item }}
             </li>
           </ul>
@@ -138,6 +138,8 @@ export default {
     filterName: function(newVal, oldVal) {
       this.filterName = newVal;
     },
+    activePage: function(newVal) {
+    }
   },
   mounted() {
     if(this.$route.params.type === 'filter') this.createFilterId= this.$route.params.fileId;
@@ -291,7 +293,7 @@ export default {
           break;
       }
     },
-    ...mapActions(PageAdminStore, ['setPendingActivePage', ],),
+    ...mapActions(PageAdminStore, ['setPendingActivePage', 'setPrevioiusPage'],),
   },
 }
 </script>

src/stores/pageAdmin.js

@@ -6,8 +6,8 @@ export default defineStore('pageAdminStore', {
      activeSubPage: 'ALL',
      previousPage: 'FILES',
      previousSubPage: 'ALL',
-     pendingActivePage: '',
+     pendingActivePage: 'FILES',
-     pendingActiveSubPage: '',
+     pendingActiveSubPage: 'ALL',
      isPending: false,
   }),
   getters: {
@@ -18,25 +18,29 @@ export default defineStore('pageAdminStore', {
      * @param {string} activePage 
      * @param {string} activeSubPage 
      */
-    setActivePage(activePage, activeSubpage) {
+    setActivePage(activePage, activeSubPage) {
-      console.log("setActivePage:", activePage, activeSubPage);
       this.activePage = activePage;
       this.activeSubPage = activeSubPage;
     },
     /**
-    * Set the previous(usually current) page because the user might change her mind when navigating.
+     * Specify previous page state value.
-    * @param {string} previoiusPage 
+     * @param {*} prevPage 
-    * @param {string} previoiusSubPage 
      */
-    setPrevioiusPage(previoiusPage, previousSubPage) {
+    setPrevioiusPage(prevPage) {
-      this.previoiusPage = previoiusPage;
+      this.previousPage = prevPage;
-      this.previoiusSubPage = previousSubPage;
     },
     /**
-     * Copy the value of pendingActivePage to activePage
+    * Set the previous(usually current) pages to the ones we just decide. 
+    */
+    setPrevioiusPageUsingActivePage() {
+      this.previoiusPage = this.activePage;
+      this.previoiusSubPage = this.activeSubPage;
+    },
+    /**
+     * Copy(transit) the value of pendingActivePage to activePage
      */
     copyPendingPageToActivePage() {
-      console.log("Copy the value of pendingActivePage to activePage\nCopying:", this.pendingActivePage, this.pendingActiveSubPage)
+      console.log("Copying:", this.pendingActivePage, this.pendingActiveSubPage)
       this.activePage = this.pendingActivePage;
       this.activeSubPage = this.pendingActiveSubPage;
     },    
@@ -52,7 +56,7 @@ export default defineStore('pageAdminStore', {
       this.isPending = true;
     },
     /**
-     * Set Pending active Page to empty string; we call this right after we just decide an activePage.
+     * Set Pending active Page to empty string; we call this right after we just decide an active page.
      * Also, stop pending state.
      */
     clearPendingActivePage(){

src/utils/pageUtils.js

@@ -0,0 +1,6 @@
+const mapPageNameToCapitalUnifiedName = (rawPageName) => {
+};
+
+export {
+    mapPageNameToCapitalUnifiedName,
+};

src/views/MainContainer.vue

@@ -42,7 +42,7 @@ export default {
     Loading
   },
   methods: {
-    ...mapActions(PageAdminStore, ['copyPendingPageToActivePage',],),
+    ...mapActions(PageAdminStore, ['copyPendingPageToActivePage', 'setPrevioiusPage'],),
   },
   created() {
     // Save token in Headers.
@@ -50,6 +50,9 @@ export default {
     this.$http.defaults.headers.common['Authorization'] = `Bearer ${token}`;
   },
   beforeRouteUpdate(to, from, next) {
+    this.setPrevioiusPage(from.name);
+    console.log("beforeRouteUpdate from.name", from.name)
+
     // 離開 Map 頁時判斷是否有無資料和需要存檔
     if ((from.name === 'Map' || from.name === 'CheckMap') && this.tempFilterId) {
       // 傳給 Map，通知 Sidebar 要關閉。