fix #294 by handling navItem string with function mapPageNameToCapitalUnifiedName()

src/components/Navbar.vue

@@ -17,7 +17,7 @@
             <li @click="onNavItemBtnClick($event, item)"
               v-for="(item, index) in navViewData[navViewName]"
               :key="index" class="nav-item"
-              :class="{'active': activePageComputedByRoute === item}">
+              :class="{'active': activePage === item}">
               {{ item }}
             </li>
           </ul>
@@ -144,6 +144,9 @@ export default {
     filterName: function(newVal, oldVal) {
       this.filterName = newVal;
     },
+    activePageComputedByRoute (newVal) {
+      console.log('activePageComputedByRoute newVal', newVal);
+    }
   },
   mounted() {
     this.handleNavItemBtn();
@@ -178,22 +181,34 @@ export default {
 
           switch (navItemCandidate) {
             case 'MAP':
-              if(isCheckPage) this.$router.push({name: 'CheckMap', params: { type: type, fileId: fileId }});
-              else this.$router.push({name: 'Map', params: { type: type, fileId: fileId }});
+              if(isCheckPage) {
+                this.$router.push({name: 'CheckMap', params: { type: type, fileId: fileId }});
+              }
+              else {
+                this.$router.push({name: 'Map', params: { type: type, fileId: fileId }});
+              }
               break;
             case 'CONFORMANCE':
-              if(isCheckPage) this.$router.push({name: 'CheckConformance', params: { type: type, fileId: fileId }});
-              else this.$router.push({name: 'Conformance', params: { type: type, fileId: fileId }});
+              if(isCheckPage) { // Beware of Swal popup, it might disturb which is the current active page        
+                this.$router.push({name: 'CheckConformance', params: { type: type, fileId: fileId }});
+              }
+              else { // Beware of Swal popup, it might disturb which is the current active page
+                this.$router.push({name: 'Conformance', params: { type: type, fileId: fileId }});
+              }
               break
             case 'PERFORMANCE':
-              if(isCheckPage) this.$router.push({name: 'CheckPerformance', params: { type: type, fileId: fileId }});
-              else this.$router.push({name: 'Performance', params: { type: type, fileId: fileId }});
+              if(isCheckPage) {
+                this.$router.push({name: 'CheckPerformance', params: { type: type, fileId: fileId }});
+              }
+              else {
+                this.$router.push({name: 'Performance', params: { type: type, fileId: fileId }});
+              }
               break;
           }
           break;
         case 'COMPARE':
           break
-      }
+      };
     },
     /**
      * Based on the route.name, decide the navViewName.
@@ -323,6 +338,7 @@ export default {
       'setPrevioiusPage',
       'setActivePage',
       'setActivePageComputedByRoute',
+      'setIsPagePendingBoolean',
     ],),
   },
 }

src/stores/pageAdmin.js

@@ -8,10 +8,10 @@ import { mapPageNameToCapitalUnifiedName } from "../utils/pageUtils";
 // 因此至少要處理這兩種方式所引起的畫面切換
 export default defineStore('pageAdminStore', {
   state: () => ({
-     activePage: 'FILES',
-     previousPage: 'FILES',
+     activePage: 'MAP',
+     previousPage: 'MAP',
      pendingActivePage: 'FILES',
-     isPending: false,
+     isPagePending: false,
      shouldKeepPreviousPage: false, // false -- meaning modal is not pressed as "NO"
      activePageComputedByRoute: "MAP",
   }),
@@ -40,7 +40,8 @@ export default defineStore('pageAdminStore', {
      * @param {*} prevPage 
      */
     setPrevioiusPage(prevPage) {
-      this.previousPage = prevPage;
+      // console.log('setPrevioiusPage()', prevPage);
+      this.previousPage = mapPageNameToCapitalUnifiedName(prevPage);
     },
     /**
     * Set the previous(usually current) pages to the ones we just decide. 
@@ -48,6 +49,14 @@ export default defineStore('pageAdminStore', {
     setPrevioiusPageUsingActivePage() {
       this.previoiusPage = this.activePage;
     },
+    /**
+     * Set the boolean value of status of pending state of the pate
+     * For the control of Swal popup
+     * @param {boolean} boolVal 
+     */
+    setIsPagePendingBoolean(boolVal) {
+      this.isPagePending = boolVal;
+    },
     /**
      * Copy(transit) the value of pendingActivePage to activePage
      */
@@ -65,7 +74,6 @@ export default defineStore('pageAdminStore', {
     setPendingActivePage(argPendingActivePage) {
       // console.log('pinia setting this.pendingActivePage', this.pendingActivePage);
       this.pendingActivePage = mapPageNameToCapitalUnifiedName(argPendingActivePage);
-      this.isPending = true;
     },
     /**
      * Set Pending active Page to empty string; we call this right after we just decide an active page.
@@ -73,7 +81,6 @@ export default defineStore('pageAdminStore', {
      */
     clearPendingActivePage(){
       this.pendingActivePage = '';
-      this.isPending = false;
     },
     /**
      * When user dismiss the popup modal, we don't apply the new page,
@@ -82,13 +89,13 @@ export default defineStore('pageAdminStore', {
     keepPreviousPage() {
       // console.log('pinia keeping this.previousPage', this.previousPage);
       this.activePage = this.previousPage;
-      this.isPending = false;
       this.shouldKeepPreviousPage = true;
     },
     /**
      * Clean up the state of the boolean related to modal showing phase
      */
     clearShouldKeepPreviousPageBoolean(){
+      // console.log('clearShouldKeepPreviousPageBoolean()');
       this.shouldKeepPreviousPage = false;
     },
   },

src/utils/pageUtils.js

@@ -13,6 +13,8 @@ const mapPageNameToCapitalUnifiedName = (rawPageName) => {
                 return 'CONFORMANCE';
             case 'CHECKPERFORMANCE':
                 return 'PERFORMANCE';
+            case 'COMPAREDASHBOARD':
+                return 'DASHBOARD';
             default:
                 return rawPageName.toUpperCase();
         }