fix #295 include both save and cancel cases of popup modal; however, for cases when conformance page acting as starting point, bugs are still there

src/components/Navbar.vue

@@ -199,6 +199,7 @@ export default {
       if(this.$route.name === 'NotFound404') {
         return;
       }
+
       this.navViewName = this.$route.matched[1].name.toUpperCase();
       this.store.filesTag = 'ALL';
       switch (this.navViewName) {
@@ -230,6 +231,8 @@ export default {
           break;
       }
 
+      // Frontend is not sure which button will the user press on the modal,
+      // so here we need to save to a pending state
       this.setPendingActivePage(valueToSet);
 
       return valueToSet;
@@ -240,7 +243,6 @@ export default {
     async saveModal() {
       // 協助判斷 MAP, CONFORMANCE 儲存有「送出」或「取消」。
       let isSaved;
-
       // 傳給 Map，通知 Sidebar 要關閉。
       this.$emitter.emit('saveModal', false);
       // 判斷在哪個子頁面
@@ -257,6 +259,7 @@ export default {
             isSaved = await saveFilter(this.allMapDataStore.addFilterId);
             // 存檔後為 filterID，換網址不跳頁，使用 push 記錄歷史路由
             if(isSaved) {
+              this.setActivePage('MAP');
               await this.$router.push(`/discover/filter/${this.createFilterId}/map`);
             }
           };
@@ -266,6 +269,7 @@ export default {
           isSaved = await saveFilter(this.allMapDataStore.addFilterId);
           // 存檔後為 filterID，換網址不跳頁，使用 push 記錄歷史路由
           if(isSaved) {
+            this.setActivePage('MAP');
             await this.$router.push(`/discover/filter/${this.createFilterId}/map`);
           }          
           break;
@@ -283,9 +287,11 @@ export default {
             // 存檔後為 checkID，換網址不跳頁，使用 push 記錄歷史路由
             if(isSaved) {
               if(this.conformanceLogId) {
+                this.setActivePage('CONFORMANCE');
                 await this.$router.push(`/discover/conformance/log/${this.conformanceLogCreateCheckId}/conformance`);
               }
               else if(this.conformanceFilterId) {
+                this.setActivePage('CONFORMANCE');
                 await this.$router.push(`/discover/conformance/filter/${this.conformanceFilterCreateCheckId}/conformance`);
               }
             }
@@ -293,7 +299,11 @@ export default {
           break;
       }
     },
-    ...mapActions(PageAdminStore, ['setPendingActivePage', 'setPrevioiusPage'],),
+    ...mapActions(PageAdminStore, [
+      'setPendingActivePage',
+      'setPrevioiusPage',
+      'setActivePage'
+    ],),
   },
 }
 </script>

src/module/alertModal.js

@@ -21,6 +21,7 @@ const customClass = {
  */
 export async function saveFilter(addFilterId) {
   let fileName = '';
+
   const { value, isConfirmed } = await Swal.fire({
     title: 'SAVE NEW FILTER',
     input: 'text',
@@ -46,11 +47,15 @@ export async function saveFilter(addFilterId) {
   if(isConfirmed) { // 存檔成功
     await addFilterId(fileName);
     // 顯示儲存完成
-    if (value) savedSuccessfully(value);
+    if (value) { // Example of value: yes
+      savedSuccessfully(value);
+    }
     // 清空欄位
     fileName = '';
     return true;
   } else { // 點擊取消或空白處，為存檔失敗。
+    console.log("is not confirmed");
+    PageAdminStore.keepPreviousPage();
     return false;
   }
 }
@@ -96,12 +101,16 @@ export async function leaveFilter(next, addFilterId, toPath, logOut) {
   });
 
   if(result.isConfirmed) {
+    //TODO:
+    console.log("result of SWAL modal:", result);
+
     if(allMapDataStore.createFilterId) {
       await allMapDataStore.updataFilter();
       if(allMapDataStore.isUpdataFilter) {
         await savedSuccessfully(allMapDataStore.filterName);
       }
     } else {
+      // Dangerous, here shows a modal
       await saveFilter(addFilterId);
     }
 
@@ -122,8 +131,6 @@ export async function leaveFilter(next, addFilterId, toPath, logOut) {
     logOut ? null : next(false);
   }
 
-  // In any cases, execute the following
-  pageAdminStore.clearPendingActivePage();
 };
 /**
  * Conformance Saved

src/stores/pageAdmin.js

@@ -3,12 +3,10 @@ import { defineStore } from "pinia";
 export default defineStore('pageAdminStore', {
   state: () => ({
      activePage: 'FILES',
-     activeSubPage: 'ALL',
      previousPage: 'FILES',
-     previousSubPage: 'ALL',
      pendingActivePage: 'FILES',
-     pendingActiveSubPage: 'ALL',
      isPending: false,
+     shouldKeepPreviousPage: false, // false -- meaning modal is not pressed as "NO"
   }),
   getters: {
   },
@@ -16,11 +14,10 @@ export default defineStore('pageAdminStore', {
     /**
      * Set Active Page; the page which the user is currently visiting
      * @param {string} activePage 
-     * @param {string} activeSubPage 
      */
-    setActivePage(activePage, activeSubPage) {
+    setActivePage(activePage) {
+      console.log("setActivePage", activePage)
       this.activePage = activePage;
-      this.activeSubPage = activeSubPage;
     },
     /**
      * Specify previous page state value.
@@ -34,15 +31,13 @@ export default defineStore('pageAdminStore', {
     */
     setPrevioiusPageUsingActivePage() {
       this.previoiusPage = this.activePage;
-      this.previoiusSubPage = this.activeSubPage;
     },
     /**
      * Copy(transit) the value of pendingActivePage to activePage
      */
     copyPendingPageToActivePage() {
-      console.log("Copying:", this.pendingActivePage, this.pendingActiveSubPage)
+      console.log("copyPendingPageToActivePage", this.pendingActivePage);
       this.activePage = this.pendingActivePage;
-      this.activeSubPage = this.pendingActiveSubPage;
     },    
     /**
      * Set Pending active Page, meaning we are not sure if user will chang her mind later on.
@@ -50,9 +45,9 @@ export default defineStore('pageAdminStore', {
      * Often, user triggers the modal and the pending state starts.
      * @param {string} pendingActivePage 
      */
-    setPendingActivePage(argPendingActivePage, argPendingActiveSubPage) {
+    setPendingActivePage(argPendingActivePage) {
+      console.log("setPendingActivePage", argPendingActivePage);
       this.pendingActivePage = argPendingActivePage;
-      this.pendingActiveSubPage = argPendingActiveSubPage;
       this.isPending = true;
     },
     /**
@@ -60,8 +55,8 @@ export default defineStore('pageAdminStore', {
      * Also, stop pending state.
      */
     clearPendingActivePage(){
+      console.log("clearPendingActivePage");
       this.pendingActivePage = '';
-      this.pendingActiveSubPage = '';
       this.isPending = false;
     },
     /**
@@ -69,9 +64,18 @@ export default defineStore('pageAdminStore', {
      * instead, we apply the previous page.
      */
     keepPreviousPage() {
+      console.log("keepPreviousPage", this.previousPage);
       this.activePage = this.previousPage;
-      this.activeSubPage = this.previousSubPage;
       this.isPending = false;
-    }
+      this.shouldKeepPreviousPage = true;
+    },
+    /**
+     * When user dismiss the popup modal, we don't apply the new page,
+     * instead, we apply the previous page.
+     */
+    clearShouldKeepPreviousPageBoolean(){
+      console.log("clearShouldKeepPreviousPageBoolean FALSE");
+      this.shouldKeepPreviousPage = false;
+    },
   },
 })

src/views/MainContainer.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { storeToRefs, mapActions, } from 'pinia';
+import { storeToRefs, mapActions, mapState, } from 'pinia';
 import LoadingStore from '@/stores/loading.js';
 import AllMapDataStore from '@/stores/allMapData.js';
 import ConformanceStore from '@/stores/conformance.js';
@@ -41,17 +41,23 @@ export default {
     Navbar,
     Loading
   },
+  computed: {
+    ...mapState(PageAdminStore, ['shouldKeepPreviousPage']),
+  },
   methods: {
-    ...mapActions(PageAdminStore, ['copyPendingPageToActivePage', 'setPrevioiusPage'],),
+    ...mapActions(PageAdminStore, ['copyPendingPageToActivePage', 'setPrevioiusPage',
+      'clearShouldKeepPreviousPageBoolean',
+    ],),
   },
   created() {
     // Save token in Headers.
     const token = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
     this.$http.defaults.headers.common['Authorization'] = `Bearer ${token}`;
   },
+  // Swal modal handling is called before beforeRouteUpdate
   beforeRouteUpdate(to, from, next) {
+    // console.log("beforeRouteUpdate", from.name, "to:", to.name);
     this.setPrevioiusPage(from.name);
-    console.log("beforeRouteUpdate from.name", from.name)
 
     // 離開 Map 頁時判斷是否有無資料和需要存檔
     if ((from.name === 'Map' || from.name === 'CheckMap') && this.tempFilterId) {
@@ -60,15 +66,19 @@ export default {
       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)
+      leaveConformance(next, this.conformanceStore.addConformanceCreateCheckId, to.path);
+    } else if(this.shouldKeepPreviousPage) {
+      // pass on and reset boolean for future use
+      this.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.
       this.copyPendingPageToActivePage();
-
       next();
-    };
+    }
   },
 };
 </script>