From 8ff8f93b2a4ae64c48fb3e60863c3f1c5c614686 Mon Sep 17 00:00:00 2001 From: Cindy Chang Date: Thu, 8 Aug 2024 09:33:12 +0800 Subject: [PATCH] sonnar --- src/components/Discover/Map/SidebarFilter.vue | 279 +++++++++--------- 1 file changed, 137 insertions(+), 142 deletions(-) diff --git a/src/components/Discover/Map/SidebarFilter.vue b/src/components/Discover/Map/SidebarFilter.vue index 618a02f..de7730f 100644 --- a/src/components/Discover/Map/SidebarFilter.vue +++ b/src/components/Discover/Map/SidebarFilter.vue @@ -468,166 +468,40 @@ export default { /** * header:Filter 發送選取的資料 */ - async submit(){ + async submit() { this.isLoading = true; - let data; - let sele = this.selectValue; - let isExclude = sele[5] === 'Exclude'; - let containmentMap = { + + const sele = this.selectValue; + const isExclude = sele[5] === 'Exclude'; + const containmentMap = { 'Contained in': 'occurred-in', 'Started in': 'started-in', 'Ended in': 'completed-in', 'Active in': 'occurred-around' }; - switch(sele[0]) { - case 'Sequence': // Filter Type 選 Sequence 的行為 - switch(sele[1]) { - case 'Have activity(s)': // Activity Sequence 選 Have activity(s) 的行為 - data = this.selectFilterTask.map(task => { - return { - type : 'contains-task', - task : task.label, - is_exclude : isExclude, - } - }); - break; - case 'Start & End': // Activity Sequence 選 Start & End 的行為 - switch(sele[2]) { - case 'Start': - data = { - type: 'starts-with', - task: this.selectFilterStart.label, - is_exclude: isExclude, - }; - break; - case 'End': - data = { - type: 'ends-with', - task: this.selectFilterEnd.label, - is_exclude: isExclude, - }; - break; - case 'Start & End': - data = { - type: 'start-end', - starts_with: this.selectFilterStartToEnd.label, - ends_with: this.selectFilterEndToStart.label, - is_exclude: isExclude, - }; - break; - } - break; - case 'Sequence': // Activity Sequence 選 Sequence 的行為 - data = { - type: sele[3] === 'Directly follows' ? 'directly-follows' : 'eventually-follows', - task_seq: this.listSeq.map(task => task.label), - is_exclude: isExclude, - }; - break; - } - break; - case 'Attributes': // Activity Sequence 選 Attributes 的行為 - switch (this.selectAttType) { - case 'string': - data = this.selectAttribute.map(task => { - return { - type: 'string-attr', - key: task.key, - value: task.value, - is_exclude: isExclude, - } - }) - break; - case 'boolean': - data = { - type: 'boolean-attr', - key: this.selectAttribute.key, - value: this.selectAttribute.value, - is_exclude: isExclude, - } - break; - case 'int': - data = { - type: 'int-attr', - key: this.selectAttribute.key, - min: this.selectAttribute.min, - max: this.selectAttribute.max, - is_exclude: isExclude, - } - break - case 'float': - data = { - type: 'float-attr', - key: this.selectAttribute.key, - min: this.selectAttribute.min, - max: this.selectAttribute.max, - is_exclude: isExclude, - } - break - case 'date': - data = { - type: 'date-attr', - key: this.selectAttribute.key, - min: this.selectAttribute.min, - max: this.selectAttribute.max, - is_exclude: isExclude, - } - break - } - break; - case 'Trace': { // Filter Type 選 Trace 的行為 - const lowerIndex = this.$refs.filterTraceView.selectArea[0]; - const upperIndex = this.$refs.filterTraceView.selectArea[1]-1; - data = { - type: 'trace-freq', - lower: this.allMapDataStore.traces[lowerIndex].id, - upper: this.allMapDataStore.traces[upperIndex].id, - is_exclude: isExclude, - }; - break; - } - case 'Timeframes': // Filter Type 選 Timeframes 的行為 - data = { - type: containmentMap[sele[6]], - start: this.selectTimeFrame[0], - end: this.selectTimeFrame[1], - is_exclude: isExclude, - }; - break; - } - // 將資料指向 Vue data 雙向綁定 + const data = this.getFilterData(sele, isExclude, containmentMap); + const postData = Array.isArray(data) ? data : [data]; - // 快速檢查每一 filter 規則是否為空集合 this.postRuleData = postData; await this.allMapDataStore.checkHasResult(); - // 有 Data 就加進 Funnel，沒有 Data 不加進 Funnel 和跳錯誤訊息 - if(this.hasResultRule === null) { - this.isLoading = false; - return; - } - else if(this.hasResultRule) { - 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.temporaryData.push(...postData); - this.isRuleData.push(...postData); - this.ruleData.push(...postData.map(e => this.setRule(e))) - } + if (this.hasResultRule === null) { + this.isLoading = false; + return; + } else if (this.hasResultRule) { + this.updateRules(postData); this.reset(false); - await new Promise(resolve => setTimeout(resolve, 1000)); + await this.delay(1000); this.isLoading = false; this.$toast.success('Filter applied. Go to Funnel to verify.'); - }else { + } else { this.reset(false); - await new Promise(resolve => setTimeout(resolve, 1000)); + await this.delay(1000); this.isLoading = false; this.$toast.warning('No result.'); - }; + } }, /** * create map @@ -707,6 +581,127 @@ export default { return `${e.key}, from ${getMoment(e.min).format('YYYY-MM-DD HH:mm')} to ${getMoment(e.max).format('YYYY-MM-DD HH:mm')}`; } }, + getFilterData(sele, isExclude, containmentMap) { + switch (sele[0]) { + case 'Sequence': + return this.getSequenceData(sele, isExclude); + case 'Attributes': + return this.getAttributesData(isExclude); + case 'Trace': + return this.getTraceData(isExclude); + case 'Timeframes': + return { + type: containmentMap[sele[6]], + start: this.selectTimeFrame[0], + end: this.selectTimeFrame[1], + is_exclude: isExclude + }; + default: + return null; + } + }, + getSequenceData(sele, isExclude) { + switch (sele[1]) { + case 'Have activity(s)': + return this.selectFilterTask.map(task => ({ + type: 'contains-task', + task: task.label, + is_exclude: isExclude + })); + case 'Start & End': + return this.getStartEndData(sele, isExclude); + case 'Sequence': + return { + type: sele[3] === 'Directly follows' ? 'directly-follows' : 'eventually-follows', + task_seq: this.listSeq.map(task => task.label), + is_exclude: isExclude + }; + default: + return null; + } + }, + getStartEndData(sele, isExclude) { + switch (sele[2]) { + case 'Start': + return { + type: 'starts-with', + task: this.selectFilterStart.label, + is_exclude: isExclude + }; + case 'End': + return { + type: 'ends-with', + task: this.selectFilterEnd.label, + is_exclude: isExclude + }; + case 'Start & End': + return { + type: 'start-end', + starts_with: this.selectFilterStartToEnd.label, + ends_with: this.selectFilterEndToStart.label, + is_exclude: isExclude + }; + default: + return null; + } + }, + getAttributesData(isExclude) { + const attrTypeMap = { + 'string': 'string-attr', + 'boolean': 'boolean-attr', + 'int': 'int-attr', + 'float': 'float-attr', + 'date': 'date-attr' + }; + + switch (this.selectAttType) { + case 'string': + return this.selectAttribute.map(task => ({ + type: attrTypeMap['string'], + key: task.key, + value: task.value, + is_exclude: isExclude + })); + case 'boolean': + case 'int': + case 'float': + case 'date': + return { + type: attrTypeMap[this.selectAttType], + key: this.selectAttribute.key, + value: this.selectAttribute.value, + min: this.selectAttribute.min, + max: this.selectAttribute.max, + is_exclude: isExclude + }; + default: + return null; + } + }, + getTraceData(isExclude) { + const lowerIndex = this.$refs.filterTraceView.selectArea[0]; + const upperIndex = this.$refs.filterTraceView.selectArea[1] - 1; + return { + type: 'trace-freq', + lower: this.allMapDataStore.traces[lowerIndex].id, + upper: this.allMapDataStore.traces[upperIndex].id, + is_exclude: isExclude + }; + }, + updateRules(postData) { + 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.temporaryData.push(...postData); + this.isRuleData.push(...postData); + this.ruleData.push(...postData.map(e => this.setRule(e))); + } + }, + delay(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); + } }, }