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