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

2024-05-31 16:04:52 +08:00
parent 0a1eefbaa7
commit 2142399f8c
4 changed files with 57 additions and 26 deletions
--- a/src/components/Navbar.vue
+++ b/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>
--- a/src/module/alertModal.js
+++ b/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
--- a/src/stores/pageAdmin.js
+++ b/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;
+    },
  },
 })
--- a/src/views/MainContainer.vue
+++ b/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>