From af1f8f301632a3b39fc663b302382bcc95e97a42 Mon Sep 17 00:00:00 2001 From: chiayin Date: Fri, 16 Jun 2023 17:13:59 +0800 Subject: [PATCH] Router: change /Discover to /Discover/map/type/filterId --- cypress/e2e/filterFunnel.cy.js | 2 +- cypress/e2e/saveLogAndFilter.cy.js | 6 ++-- .../Discover/Conformance/StatusBar.vue | 10 +++++++ .../Discover/{ => Map}/Filter/ActAndSeq.vue | 0 .../Discover/{ => Map}/Filter/ActOcc.vue | 0 .../Discover/{ => Map}/Filter/ActOccCase.vue | 0 .../Discover/{ => Map}/Filter/Funnel.vue | 0 .../Discover/{ => Map}/Filter/Timeframes.vue | 0 .../Discover/{ => Map}/Filter/Trace.vue | 0 .../Discover/{ => Map}/SidebarFilter.vue | 12 ++++---- .../Discover/{ => Map}/SidebarState.vue | 0 .../Discover/{ => Map}/SidebarTraces.vue | 0 .../Discover/{ => Map}/SidebarView.vue | 0 src/components/Navbar.vue | 30 +++++++++++++------ src/module/alertModal.js | 11 ++++--- src/router/index.js | 25 ++++++++++------ src/views/Discover/Conformance/index.vue | 29 ++++++++++++++++++ src/views/Discover/{ => Map}/index.vue | 23 +++++++------- src/views/Files/index.vue | 14 +++++---- src/views/MainContainer.vue | 16 +++++----- 20 files changed, 121 insertions(+), 57 deletions(-) create mode 100644 src/components/Discover/Conformance/StatusBar.vue rename src/components/Discover/{ => Map}/Filter/ActAndSeq.vue (100%) rename src/components/Discover/{ => Map}/Filter/ActOcc.vue (100%) rename src/components/Discover/{ => Map}/Filter/ActOccCase.vue (100%) rename src/components/Discover/{ => Map}/Filter/Funnel.vue (100%) rename src/components/Discover/{ => Map}/Filter/Timeframes.vue (100%) rename src/components/Discover/{ => Map}/Filter/Trace.vue (100%) rename src/components/Discover/{ => Map}/SidebarFilter.vue (98%) rename src/components/Discover/{ => Map}/SidebarState.vue (100%) rename src/components/Discover/{ => Map}/SidebarTraces.vue (100%) rename src/components/Discover/{ => Map}/SidebarView.vue (100%) create mode 100644 src/views/Discover/Conformance/index.vue rename src/views/Discover/{ => Map}/index.vue (94%) diff --git a/cypress/e2e/filterFunnel.cy.js b/cypress/e2e/filterFunnel.cy.js index ce2aa4f..4ce6242 100644 --- a/cypress/e2e/filterFunnel.cy.js +++ b/cypress/e2e/filterFunnel.cy.js @@ -10,7 +10,7 @@ describe('Save Log and Filter', ()=>{ cy.url().should('include', 'files'); cy.contains('.fileName', 'random').dblclick(); // 選取 'random' log 檔 cy.contains('h2', 'DISCOVER'); // 斷言在 Discover 頁 - cy.url().should('include', 'discover/logs'); // 斷言在 discover/logs/:id 路徑 + cy.url().should('include', 'discover/map/log'); // 斷言在 discover/map/log/:id 路徑 cy.wait(3000) cy.get('#iconFilter').click(); // 選取 Filter sidebar }); diff --git a/cypress/e2e/saveLogAndFilter.cy.js b/cypress/e2e/saveLogAndFilter.cy.js index b57606e..3cc8e4a 100644 --- a/cypress/e2e/saveLogAndFilter.cy.js +++ b/cypress/e2e/saveLogAndFilter.cy.js @@ -12,7 +12,7 @@ describe('Save Log and Filter', ()=>{ cy.url().should('include', 'files'); cy.contains('.fileName', 'random').dblclick(); // 選取 'random' log 檔 cy.contains('h2', 'DISCOVER'); // 斷言在 Discover 頁 - cy.url().should('include', 'discover/logs'); // 斷言在 discover/logs/:id 路徑 + cy.url().should('include', 'discover/map/log'); // 斷言在 discover/map/log/:id 路徑 cy.wait(3000) // select radio @@ -55,7 +55,7 @@ describe('Save Log and Filter', ()=>{ cy.url().should('include', 'files'); cy.contains('.fileName', 'random-E2Etesting').dblclick(); // 選取 'random' log 檔 cy.contains('h2', 'DISCOVER'); // 斷言在 Discover 頁 - cy.url().should('include', 'discover/filters'); // 斷言在 discover/logs/:id 路徑 + cy.url().should('include', 'discover/map/filter'); // 斷言在 discover/map/filter/:id 路徑 cy.wait(3000) // Delete All @@ -93,7 +93,7 @@ describe('Save Log and Filter', ()=>{ cy.url().should('include', 'files'); cy.contains('.fileName', 'random').dblclick(); // 選取 'random' log 檔 cy.contains('h2', 'DISCOVER'); // 斷言在 Discover 頁 - cy.url().should('include', 'discover/logs'); // 斷言在 discover/logs/:id 路徑 + cy.url().should('include', 'discover/map/log'); // 斷言在 discover/map/log/:id 路徑 cy.wait(3000) // select radio diff --git a/src/components/Discover/Conformance/StatusBar.vue b/src/components/Discover/Conformance/StatusBar.vue new file mode 100644 index 0000000..1f2631e --- /dev/null +++ b/src/components/Discover/Conformance/StatusBar.vue @@ -0,0 +1,10 @@ + + + diff --git a/src/components/Discover/Filter/ActAndSeq.vue b/src/components/Discover/Map/Filter/ActAndSeq.vue similarity index 100% rename from src/components/Discover/Filter/ActAndSeq.vue rename to src/components/Discover/Map/Filter/ActAndSeq.vue diff --git a/src/components/Discover/Filter/ActOcc.vue b/src/components/Discover/Map/Filter/ActOcc.vue similarity index 100% rename from src/components/Discover/Filter/ActOcc.vue rename to src/components/Discover/Map/Filter/ActOcc.vue diff --git a/src/components/Discover/Filter/ActOccCase.vue b/src/components/Discover/Map/Filter/ActOccCase.vue similarity index 100% rename from src/components/Discover/Filter/ActOccCase.vue rename to src/components/Discover/Map/Filter/ActOccCase.vue diff --git a/src/components/Discover/Filter/Funnel.vue b/src/components/Discover/Map/Filter/Funnel.vue similarity index 100% rename from src/components/Discover/Filter/Funnel.vue rename to src/components/Discover/Map/Filter/Funnel.vue diff --git a/src/components/Discover/Filter/Timeframes.vue b/src/components/Discover/Map/Filter/Timeframes.vue similarity index 100% rename from src/components/Discover/Filter/Timeframes.vue rename to src/components/Discover/Map/Filter/Timeframes.vue diff --git a/src/components/Discover/Filter/Trace.vue b/src/components/Discover/Map/Filter/Trace.vue similarity index 100% rename from src/components/Discover/Filter/Trace.vue rename to src/components/Discover/Map/Filter/Trace.vue diff --git a/src/components/Discover/SidebarFilter.vue b/src/components/Discover/Map/SidebarFilter.vue similarity index 98% rename from src/components/Discover/SidebarFilter.vue rename to src/components/Discover/Map/SidebarFilter.vue index d6d06b0..e1a3cfe 100644 --- a/src/components/Discover/SidebarFilter.vue +++ b/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 { diff --git a/src/components/Discover/SidebarState.vue b/src/components/Discover/Map/SidebarState.vue similarity index 100% rename from src/components/Discover/SidebarState.vue rename to src/components/Discover/Map/SidebarState.vue diff --git a/src/components/Discover/SidebarTraces.vue b/src/components/Discover/Map/SidebarTraces.vue similarity index 100% rename from src/components/Discover/SidebarTraces.vue rename to src/components/Discover/Map/SidebarTraces.vue diff --git a/src/components/Discover/SidebarView.vue b/src/components/Discover/Map/SidebarView.vue similarity index 100% rename from src/components/Discover/SidebarView.vue rename to src/components/Discover/Map/SidebarView.vue diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index b9c6de8..24499ef 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -5,13 +5,15 @@
- + + + arrow_back

{{ navViewName }}

@@ -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 diff --git a/src/module/alertModal.js b/src/module/alertModal.js index 10ae74f..f54ae9d 100644 --- a/src/module/alertModal.js +++ b/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.
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); diff --git a/src/router/index.js b/src/router/index.js index 2f64aa8..eb1faf2 100644 --- a/src/router/index.js +++ b/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, + }, + ] }, ] }, diff --git a/src/views/Discover/Conformance/index.vue b/src/views/Discover/Conformance/index.vue new file mode 100644 index 0000000..ca9d85a --- /dev/null +++ b/src/views/Discover/Conformance/index.vue @@ -0,0 +1,29 @@ + + diff --git a/src/views/Discover/index.vue b/src/views/Discover/Map/index.vue similarity index 94% rename from src/views/Discover/index.vue rename to src/views/Discover/Map/index.vue index a25076b..002edc5 100644 --- a/src/views/Discover/index.vue +++ b/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; }, } diff --git a/src/views/Files/index.vue b/src/views/Files/index.vue index 90edc07..27d787e 100644 --- a/src/views/Files/index.vue +++ b/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 }}) } } }, diff --git a/src/views/MainContainer.vue b/src/views/MainContainer.vue index dba088d..b8119c3 100644 --- a/src/views/MainContainer.vue +++ b/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(); }