From 280da0731dc4a3722754562083ac4ff337a7d02d Mon Sep 17 00:00:00 2001 From: chiayin Date: Mon, 24 Apr 2023 17:48:29 +0800 Subject: [PATCH] Discover: Fix SidebarFilter Funnel. --- .../actAndSeq.vue => Filter/ActAndSeq.vue} | 0 .../{table/actOcc.vue => Filter/ActOcc.vue} | 0 .../actOccCase.vue => Filter/ActOccCase.vue} | 0 src/components/Discover/Filter/Funnel.vue | 120 +++++++++++ .../{sidebarFilter.vue => SidebarFilter.vue} | 191 +++--------------- .../{sidebarState.vue => SidebarState.vue} | 0 .../{sidebarTraces.vue => SidebarTraces.vue} | 0 .../{sidebarView.vue => SidebarView.vue} | 0 src/stores/allMapData.js | 2 + src/views/Discover/index.vue | 8 +- 10 files changed, 159 insertions(+), 162 deletions(-) rename src/components/Discover/{table/actAndSeq.vue => Filter/ActAndSeq.vue} (100%) rename src/components/Discover/{table/actOcc.vue => Filter/ActOcc.vue} (100%) rename src/components/Discover/{table/actOccCase.vue => Filter/ActOccCase.vue} (100%) create mode 100644 src/components/Discover/Filter/Funnel.vue rename src/components/Discover/{sidebarFilter.vue => SidebarFilter.vue} (76%) rename src/components/Discover/{sidebarState.vue => SidebarState.vue} (100%) rename src/components/Discover/{sidebarTraces.vue => SidebarTraces.vue} (100%) rename src/components/Discover/{sidebarView.vue => SidebarView.vue} (100%) diff --git a/src/components/Discover/table/actAndSeq.vue b/src/components/Discover/Filter/ActAndSeq.vue similarity index 100% rename from src/components/Discover/table/actAndSeq.vue rename to src/components/Discover/Filter/ActAndSeq.vue diff --git a/src/components/Discover/table/actOcc.vue b/src/components/Discover/Filter/ActOcc.vue similarity index 100% rename from src/components/Discover/table/actOcc.vue rename to src/components/Discover/Filter/ActOcc.vue diff --git a/src/components/Discover/table/actOccCase.vue b/src/components/Discover/Filter/ActOccCase.vue similarity index 100% rename from src/components/Discover/table/actOccCase.vue rename to src/components/Discover/Filter/ActOccCase.vue diff --git a/src/components/Discover/Filter/Funnel.vue b/src/components/Discover/Filter/Funnel.vue new file mode 100644 index 0000000..ad7ab6e --- /dev/null +++ b/src/components/Discover/Filter/Funnel.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/src/components/Discover/sidebarFilter.vue b/src/components/Discover/SidebarFilter.vue similarity index 76% rename from src/components/Discover/sidebarFilter.vue rename to src/components/Discover/SidebarFilter.vue index 9b14121..1435803 100644 --- a/src/components/Discover/sidebarFilter.vue +++ b/src/components/Discover/SidebarFilter.vue @@ -60,11 +60,9 @@ -

Activity Select

- @@ -80,7 +78,6 @@
-
@@ -88,44 +85,8 @@
- -
-
-
- No Filter. -
-
- - - -
-
- -
-
- - -
-
-
- + @@ -133,44 +94,20 @@ import { storeToRefs } from 'pinia'; import LoadingStore from '@/stores/loading.js'; import AllMapDataStore from '@/stores/allMapData.js'; -import ActOccCase from '@/components/Discover/table/actOccCase.vue'; -import ActOcc from '@/components/Discover/table/actOcc.vue'; -import ActAndSeq from '@/components/Discover/table/actAndSeq.vue'; +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'; export default { - props: { - sidebarFilter: { - type: Boolean, - require: true, - }, - filterTasks: { - type: Array, - require: true, - }, - filterStartToEnd: { - type: Array, - require: true, - }, - filterEndToStart: { - type: Array, - require: true, - }, - filterTimeframe: { - type: Object, - require: true, - }, - filterTrace: { - type: Array, - require: true, - }, - }, + props: ['sidebarFilter', 'filterTasks', 'filterStartToEnd', 'filterEndToStart', 'filterTimeframe', 'filterTrace'], setup() { const loadingStore = LoadingStore(); const allMapDataStore = AllMapDataStore(); const { isLoading } = storeToRefs(loadingStore); - const { hasResultRule, temporaryData, postRuleData} = storeToRefs(allMapDataStore); + const { hasResultRule, temporaryData, postRuleData, ruleData, isRuleData} = storeToRefs(allMapDataStore); - return { isLoading, hasResultRule, temporaryData, postRuleData, allMapDataStore } + return { isLoading, hasResultRule, temporaryData, postRuleData, ruleData, isRuleData, allMapDataStore } }, data() { return { @@ -204,14 +141,13 @@ export default { isEndSelected: null, isActAllTask: true, rowData: [], - ruleData: [], - isRuleData: [], // toggle button data } }, components: { ActOccCase, ActOcc, ActAndSeq, + Funnel, }, computed: { // All Task @@ -233,25 +169,12 @@ export default { } }, methods: { - - /** * @param {string} switch Summary or Insight */ switchTab(tab) { this.tab = tab; }, - /** - * @param {boolean} e ture | false - * @param {numble} index rule's index - */ - isRule(e, index){ - let rule = this.isRuleData[index]; - // 先取得 rule object - // 為了讓 data 順序不亂掉，將值指向 0，submitAll 時再刪掉 - if(!e) this.temporaryData[index] = 0; - else this.temporaryData[index] = rule; - }, /** * Number to percentage * @param {number} val @@ -371,10 +294,9 @@ export default { /** * @param {object} e task's object */ - setRule(e) { - let label = ""; - let type = ""; - let includeStr = e.is_exclude?" Exclude ":" Include "; + setRule(e) { + let label, type; + const includeStr = e.is_exclude?" Exclude ":" Include "; switch(e.type){ case "contains-task": @@ -412,17 +334,15 @@ export default { label = `from ${e.lower} to ${e.upper} ${includeStr}` type = "Trace" break - default: - break - } + }; return { - type:type, - label:label, + type, + label, toggle:true, - } + }; }, /** - * 清空選項 + * @param {boolean} massage true | false 清空選項 */ reset(massage) { this.selectFilterTask = null; @@ -446,7 +366,7 @@ export default { // 若陣列為空，則跳出警告訊息 if(sele[0] === 'Sequence'){ if(sele[1] === 'Have activity(s)'){ // Activity Sequence 選 Have activity(s) 的行為 - if(this.selectFilterTask === null || this.selectFilterTask.length === 0) return this.$toast.error('Not selected'); + if(!this.selectFilterTask?.length) return this.$toast.error('Not selected'); else { // 將多選的 task 拆成一包包 obj data = this.selectFilterTask.map(task => { @@ -457,7 +377,7 @@ export default { } }) }; - }else if(sele[1] === 'Start activity / end activity') { // Activity Sequence 選 Start activity & end activity 的行為 + }else if(sele[1] === 'Start activity / end activity') { // Activity Sequence 選 Start activity / end activity 的行為 if(sele[2] === 'Start') { if(this.selectFilterStart === null || this.selectFilterStart.length === 0) return this.$toast.error('Not selected'); else { @@ -502,16 +422,20 @@ export default { const postData = Array.isArray(data) ? data : [data]; // 快速檢查每一 filter 規則是否為空集合 - // this.logId = this.$route.params.logId; this.postRuleData = postData; await this.allMapDataStore.checkHasResult(); // 有 Data 就加進 Funnel，沒有 Data 不加進 Funnel 和跳錯誤訊息 if(this.hasResultRule === null) return; else if(this.hasResultRule) { - this.temporaryData.push(...postData); - this.isRuleData = Array.from(this.temporaryData); - this.ruleData = this.temporaryData.map(e => this.setRule(e)); + if(!this.temporaryData?.length){ + this.temporaryData.push(...postData); + this.isRuleData = Array.from(this.temporaryData); + this.ruleData = this.isRuleData.map(e => this.setRule(e)); + }else { + this.isRuleData.push(...postData); + this.ruleData = this.isRuleData.map(e => this.setRule(e)); + } this.reset(false); this.isLoading = true; await new Promise(resolve => setTimeout(resolve, 1000)); @@ -525,67 +449,18 @@ export default { this.$toast.warning('No Data.'); }; }, - // header:Funnel 刪除全部的 Funnel - deleteRule(index) { - if(index === 'all') { - this.temporaryData = []; - this.isRuleData = []; - this.$toast.success('All deleted.'); - }else{ - this.$toast.success(`Delete ${this.ruleData[index].label}.`); - this.temporaryData.splice(index, 1); - this.isRuleData.splice(index, 1); - this.ruleData.splice(index, 1); - } - }, - // header:Funnel 發送暫存的選取資料 - async submitAll() { - this.postRuleData = this.temporaryData; // 取得 submit 的資料 - this.postRuleData = this.postRuleData.filter(item => item !== 0); // 有 toggle button 的話，找出並刪除陣列中為 0 的項目 - await this.allMapDataStore.checkHasResult(); - - if(this.hasResultRule === null) return; - else if(this.hasResultRule) { - this.isLoading = true; - await this.allMapDataStore.addTempFilterId(); - await this.allMapDataStore.getAllMapData(); - await this.$emit('submit-all'); - this.isLoading = false; - this.$toast.success('Filter Success. View the Map.'); - }else { - this.isLoading = true; - await new Promise(resolve => setTimeout(resolve, 1000)); - this.isLoading = false; - this.$toast.warning('No Data.'); - }; - }, + /** + * create map + */ + sumbitAll() { + this.$emit('submit-all'); + } }, } - diff --git a/src/components/Discover/sidebarState.vue b/src/components/Discover/SidebarState.vue similarity index 100% rename from src/components/Discover/sidebarState.vue rename to src/components/Discover/SidebarState.vue diff --git a/src/components/Discover/sidebarTraces.vue b/src/components/Discover/SidebarTraces.vue similarity index 100% rename from src/components/Discover/sidebarTraces.vue rename to src/components/Discover/SidebarTraces.vue diff --git a/src/components/Discover/sidebarView.vue b/src/components/Discover/SidebarView.vue similarity index 100% rename from src/components/Discover/sidebarView.vue rename to src/components/Discover/SidebarView.vue diff --git a/src/stores/allMapData.js b/src/stores/allMapData.js index f03c920..dc549e5 100644 --- a/src/stores/allMapData.js +++ b/src/stores/allMapData.js @@ -31,6 +31,8 @@ export default defineStore('allMapDataStore', { hasResultRule: null, // click Apply 後檢查是否有 Data temporaryData: [], // 沒被 apply 的 Data postRuleData: [], // has-result API & temp-filters API 的 Data + ruleData: [], // Funnle view's data + isRuleData: [], // toggle button data }), getters: { processMap: state => { diff --git a/src/views/Discover/index.vue b/src/views/Discover/index.vue index 70f6307..34df867 100644 --- a/src/views/Discover/index.vue +++ b/src/views/Discover/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/SidebarView.vue'; +import SidebarState from '@/components/Discover/SidebarState.vue'; +import SidebarTraces from '@/components/Discover/SidebarTraces.vue'; +import SidebarFilter from '@/components/Discover/SidebarFilter.vue'; export default { setup() {