pageAdmin add setActivePageComputedByRoute function

src/stores/pageAdmin.js

@@ -1,5 +1,11 @@
 import { defineStore } from "pinia";
+import { mapPageNameToCapitalUnifiedName } from "../utils/pageUtils";
 
+// There are at least two ways to trigger a page navigation: 
+// clicking the navigation button and refreshing the page.
+// Therefore, we need to handle page transitions caused by both of these methods.
+// 至少有兩種方式引起畫面的導向: 點選導覽按鈕與重新整理網頁
+// 因此至少要處理這兩種方式所引起的畫面切換
 export default defineStore('pageAdminStore', {
   state: () => ({
      activePage: 'FILES',
@@ -7,17 +13,27 @@ export default defineStore('pageAdminStore', {
      pendingActivePage: 'FILES',
      isPending: false,
      shouldKeepPreviousPage: false, // false -- meaning modal is not pressed as "NO"
+     activePageComputedByRoute: "MAP",
   }),
   getters: {
   },
   actions: {
+    setActivePageComputedByRoute(routeMatched){
+      if (routeMatched.length && routeMatched[routeMatched.length - 1] 
+          && routeMatched[routeMatched.length - 1].name) {
+        // console.log('setActivePageComputedByRoute()', mapPageNameToCapitalUnifiedName(routeMatched[routeMatched.length - 1].name));
+        this.activePageComputedByRoute = mapPageNameToCapitalUnifiedName(
+          routeMatched[routeMatched.length - 1].name);
+      }
+      // console.log('this.activePageComputedByRoute', this.activePageComputedByRoute);
+    },
     /**
      * Set Active Page; the page which the user is currently visiting
      * @param {string} activePage 
      */
     setActivePage(activePage) {
-      console.log("setActivePage", activePage)
-      this.activePage = activePage;
+      // console.log("setActivePage", activePage)
+      this.activePage = mapPageNameToCapitalUnifiedName(activePage);
     },
     /**
      * Specify previous page state value.
@@ -36,16 +52,19 @@ export default defineStore('pageAdminStore', {
      * Copy(transit) the value of pendingActivePage to activePage
      */
     copyPendingPageToActivePage() {
+      // console.log('pinia copying  this.pendingActivePage', this.pendingActivePage);
       this.activePage = this.pendingActivePage;
     },    
     /**
      * Set Pending active Page, meaning we are not sure if user will chang her mind later on.
      * Also, start pending state.
      * Often, user triggers the modal and the pending state starts.
+     * Note: String conversion is needed. For Example, CheckMap is converted into MAP
      * @param {string} pendingActivePage 
      */
     setPendingActivePage(argPendingActivePage) {
-      this.pendingActivePage = argPendingActivePage;
+      // console.log('pinia setting this.pendingActivePage', this.pendingActivePage);
+      this.pendingActivePage = mapPageNameToCapitalUnifiedName(argPendingActivePage);
       this.isPending = true;
     },
     /**
@@ -61,6 +80,7 @@ export default defineStore('pageAdminStore', {
      * instead, we apply the previous page.
      */
     keepPreviousPage() {
+      // console.log('pinia keeping this.previousPage', this.previousPage);
       this.activePage = this.previousPage;
       this.isPending = false;
       this.shouldKeepPreviousPage = true;