Router: change /Discover to /Discover/map/type/filterId

src/components/Discover/Conformance/StatusBar.vue

@@ -0,0 +1,10 @@
+<template>
+<h1>Status bar</h1>
+
+</template>
+
+<script>
+export default {
+
+}
+</script>

src/components/Discover/Map/SidebarFilter.vue

@@ -106,12 +106,12 @@
 import { storeToRefs } from 'pinia';
 import LoadingStore from '@/stores/loading.js';
 import AllMapDataStore from '@/stores/allMapData.js';
-import ActOccCase from '@/components/Discover/Filter/ActOccCase.vue';
-import ActOcc from '@/components/Discover/Filter/ActOcc.vue';
-import ActAndSeq from '@/components/Discover/Filter/ActAndSeq.vue';
-import Funnel from '@/components/Discover/Filter/Funnel.vue';
-import Trace from '@/components/Discover/Filter/Trace.vue';
-import Timeframes from '@/components/Discover/Filter/Timeframes.vue';
+import ActOccCase from '@/components/Discover/Map/Filter/ActOccCase.vue';
+import ActOcc from '@/components/Discover/Map/Filter/ActOcc.vue';
+import ActAndSeq from '@/components/Discover/Map/Filter/ActAndSeq.vue';
+import Funnel from '@/components/Discover/Map/Filter/Funnel.vue';
+import Trace from '@/components/Discover/Map/Filter/Trace.vue';
+import Timeframes from '@/components/Discover/Map/Filter/Timeframes.vue';
 import getMoment from 'moment';
 
 export default {

src/components/Navbar.vue

@@ -5,13 +5,15 @@
         <div class="flex flex-1 items-center">
           <!-- 回 Files 頁 -->
           <router-link to class="mr-4" v-if="navViewName !== 'FILES'" id="backPage">
-            <span @click="$router.back(-1)" class="material-symbols-outlined text-neutral-10 leading-loose">
+            <!-- $router.push({ name: 'Files' }) -->
+            <!-- $router.back(-1) -->
+            <span @click="$router.push({ name: 'Files' })" class="material-symbols-outlined text-neutral-10 leading-loose">
               arrow_back
             </span>
           </router-link>
           <h2 class="mr-14 py-3 text-2xl font-black text-neutral-10">{{ navViewName }}</h2>
           <ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer">
-            <li @click="switchNavItem($event)" v-for="(item, index) in navViewData[navViewName]" :key="index">{{ item }}</li>
+            <li @click="switchNavItem($event, index)" v-for="(item, index) in navViewData[navViewName]" :key="index">{{ item }}</li>
           </ul>
         </div>
         <!-- Files Page: Search and Upload -->
@@ -61,7 +63,7 @@ export default {
         // FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN'],
         FILES: ['ALL', 'DISCOVER'],
         // DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
-        DISCOVER: ['MAP']
+        DISCOVER: ['MAP', 'CONFORMANCE']
       },
       navViewName: 'FILES',
     };
@@ -92,8 +94,7 @@ export default {
     savedSuccessfully
   },
   mounted() {
-    let filterId = this.$route.params.filterId;
-    this.createfilterId = filterId;
+    if(this.$route.params.type === 'filter') this.createfilterId= this.$route.params.fileId;
     this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false;
     this.getNavViewName();
   },
@@ -102,12 +103,23 @@ export default {
      * switch navbar item
      */
     switchNavItem(event) {
-      this.store.filesTag = event.target.innerText;
+      let type;
+      let fileId;
+
+      if(this.navViewName === 'FILES') {
+        this.store.filesTag = event.target.innerText;
+      } else if(this.navViewName === 'DISCOVER') {
+        type = this.$route.params.type;
+        fileId = this.$route.params.fileId;
+        if(event.target.innerText === 'MAP') {
+          this.$router.push({name: 'Map', params: { type: type, fileId: fileId }})
+        } else if(event.target.innerText === 'CONFORMANCE') {
+          this.$router.push({name: 'Conformance', params: { type: type, fileId: fileId }})
+        }
+      }
     },
     getNavViewName() {
-      this.navViewName = this.$route.name.toUpperCase();
-      if(this.navViewName === 'DISCOVERLOG' || this.navViewName === 'DISCOVERFILTER') this.navViewName = 'DISCOVER';
-
+      this.navViewName = this.$route.matched[1].name.toUpperCase();
     },
     /**
      * Save button' modal

src/module/alertModal.js

@@ -1,4 +1,5 @@
-import Swal from 'sweetalert2'
+import Swal from 'sweetalert2';
+import AllMapDataStore from '@/stores/allMapData.js';
 
 const customClass = {
   htmlContainer: '!w-[564px]',
@@ -51,7 +52,8 @@ export async function savedSuccessfully(value) {
   })
 };
 
-export async function leaveFilter(next, addFilterId) {
+export async function leaveFilter(next, addFilterId, toPath) {
+  const allMapDataStore = AllMapDataStore();
   const result = await Swal.fire({
     title: 'ARE YOU SURE TO LEAVE MAP?',
     html: 'Filter settings have not been saved.</br>Click “Save as” to save filtered results, “OK” to leave map.',
@@ -67,10 +69,11 @@ export async function leaveFilter(next, addFilterId) {
   })
   if(result.isConfirmed) {
     await saveFilter(addFilterId)
-    next();
+    next(toPath);
   }
   else if(result.dismiss === 'cancel') {
-    next();
+    allMapDataStore.tempFilterId = null;
+    next(toPath);
   }
   else if(result.dismiss === 'backdrop') {
     next(false);

src/router/index.js

@@ -3,7 +3,8 @@ import AuthContainer from '@/views/AuthContainer.vue';
 import MainContainer from '@/views/MainContainer.vue';
 import Login from '@/views/Login/index.vue';
 import Files from '@/views/Files/index.vue';
-import Discover from '@/views/Discover/index.vue';
+import Map from '@/views/Discover/Map/index.vue';
+import Conformance from '@/views/Discover/Conformance/index.vue';
 import MemberArea from '@/views/MemberArea/index.vue';
 import NotFound404 from '@/views/NotFound404.vue';
 
@@ -40,14 +41,20 @@ const routes = [
         component: Files,
       },
       {
-        path: "/discover/logs/:logId",
-        name: "DiscoverLog",
-        component: Discover,
-      },
-      {
-        path: "/discover/filters/:filterId",
-        name: "DiscoverFilter",
-        component: Discover,
+        path: "/discover",
+        name: "Discover",
+        children: [
+          {
+            path: "/discover/map/:type/:fileId",
+            name: "Map",
+            component: Map,
+          },
+          {
+            path: "/discover/conformance/:type/:fileId",
+            name: "Conformance",
+            component: Conformance,
+          },
+        ]
       },
     ]
   },

src/views/Discover/Conformance/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <StatusBar></StatusBar>
+  <h1>Conformance</h1>
+</template>
+<script>
+import { storeToRefs } from 'pinia';
+import LoadingStore from '@/stores/loading.js';
+import StatusBar from '@/components/Discover/Conformance/StatusBar.vue';
+
+export default {
+  setup() {
+    const loadingStore = LoadingStore();
+    const { isLoading } = storeToRefs(loadingStore);
+
+    return { isLoading }
+  },
+  components: {
+    StatusBar,
+  },
+  async created() {
+    let logId;
+    if(this.$route.params.type === 'log') logId = this.$route.params.fileId;
+    console.log(logId);
+
+    // this.isLoading = true;
+    this.isLoading = false;
+  },
+}
+</script>

src/views/Discover/Map/index.vue

@@ -58,10 +58,10 @@ import { storeToRefs } from 'pinia';
 import LoadingStore from '@/stores/loading.js';
 import AllMapDataStore from '@/stores/allMapData.js';
 import cytoscapeMap from '@/module/cytoscapeMap.js';
-import SidebarView from '@/components/Discover/SidebarView.vue';
-import SidebarState from '@/components/Discover/SidebarState.vue';
-import SidebarTraces from '@/components/Discover/SidebarTraces.vue';
-import SidebarFilter from '@/components/Discover/SidebarFilter.vue';
+import SidebarView from '@/components/Discover/Map/SidebarView.vue';
+import SidebarState from '@/components/Discover/Map/SidebarState.vue';
+import SidebarTraces from '@/components/Discover/Map/SidebarTraces.vue';
+import SidebarFilter from '@/components/Discover/Map/SidebarFilter.vue';
 
 export default {
   setup() {
@@ -293,11 +293,13 @@ export default {
     },
   },
   async created() {
-    // Log 檔前往 DiscoverLog 頁, Filter 檔前往 DiscoverFilter 頁
-    if(this.$route.name === 'DiscoverLog'){
-      this.logId = this.$route.params.logId;
-    }else if(this.$route.name === 'DiscoverFilter') {
-      this.createFilterId = this.$route.params.filterId;
+    // 先 loading 再執行以下程式
+    this.isLoading = true;
+    // Log 檔前往 Map Log 頁, Filter 檔前往 Map Filter 頁
+    if(this.$route.params.type === 'log'){
+      this.logId = this.$route.params.fileId;
+    }else if(this.$route.params.type === 'filter') {
+      this.createFilterId = this.$route.params.fileId;
       // 取得 logID 和上次儲存的 Funnel
       await this.allMapDataStore.fetchFunnel(this.createFilterId);
       this.isRuleData = await Array.from(this.temporaryData);
@@ -310,8 +312,7 @@ export default {
     this.createCy(this.mapType);
     await this.allMapDataStore.getFilterParams();
 
-    this.isLoading = true;
-    await new Promise(resolve => setTimeout(resolve, 1000));
+    // 執行完後才取消 loading
     this.isLoading = false;
   },
 }

src/views/Files/index.vue

@@ -132,18 +132,20 @@
        * @param {object} file
        */
       enterDiscover(file){
-        let logId;
-        let filterId;
+        let type;
+        let fileId;
 
         if(file.fileType === 'Log'){
           this.createFilterId = null;
-          logId = file.id;
-          this.$router.push({name: 'DiscoverLog', params: { logId: logId }})
+          fileId = file.id;
+          type = 'log';
+          this.$router.push({name: 'Map', params: { type: type, fileId: fileId }})
         }
         else if(file.fileType === 'Filter') {
           this.createFilterId = file.id;
-          filterId = file.id;
-          this.$router.push({name: 'DiscoverFilter', params: { filterId: filterId }})
+          fileId = file.id;
+          type = 'filter';
+          this.$router.push({name: 'Map', params: { type: type, fileId: fileId }})
         }
       }
     },

src/views/MainContainer.vue

@@ -27,17 +27,17 @@ export default {
     const loadingStore = LoadingStore();
     const allMapDataStore = AllMapDataStore();
     const { checkLogin } = loginStore;
-    const { tempFilterId, createFilterId,  temporaryData, postRuleData } = storeToRefs(allMapDataStore);
+    const { tempFilterId, createFilterId,  temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
 
-    return { checkLogin, loadingStore, temporaryData, tempFilterId, createFilterId, postRuleData, allMapDataStore };
+    return { checkLogin, loadingStore, temporaryData, tempFilterId, createFilterId, postRuleData, ruleData, allMapDataStore };
   },
   watch: {
     $route: function(to, from) {
-      // 離開 DiscoverLog 頁要將 Funnel 的規則刪除, DiscoverFilter 會帶上次儲存的 Funnel, 所以不用錯做
-      if(to.name !== 'DiscoverLog') {
+      // 離開 Map Log 頁要將 Funnel 的規則刪除, Map Filter 會帶上次儲存的 Funnel, 所以不用做
+      if(from.name === 'Map' && from.params.type === 'log') {
         this.tempFilterId = null;
-        this.temporaryData = []
-        this.postRuleData = []
+        this.temporaryData = [];
+        this.postRuleData = [];
       }
     }
   },
@@ -61,8 +61,8 @@ export default {
   },
   beforeRouteUpdate(to, from, next) {
     // 離開 Discover 頁時判斷是否有無資料和需要存檔
-    if ((from.name === 'DiscoverLog' || from.name === 'DiscoverFilter') && this.tempFilterId) {
-      leaveFilter(next, this.allMapDataStore.addFilterId)
+    if ((from.name === 'Map') && this.tempFilterId) {
+      leaveFilter(next, this.allMapDataStore.addFilterId, to.path)
     } else {
       next();
     }