From 285fb43aa30f9c7ffb8d57f565062b403f16c64a Mon Sep 17 00:00:00 2001 From: chiayin Date: Tue, 3 Oct 2023 12:32:27 +0800 Subject: [PATCH] Issue #114: Done. --- src/components/Discover/Map/SidebarFilter.vue | 165 +++++++++++------- 1 file changed, 100 insertions(+), 65 deletions(-) diff --git a/src/components/Discover/Map/SidebarFilter.vue b/src/components/Discover/Map/SidebarFilter.vue index 3bfec02..a757974 100644 --- a/src/components/Discover/Map/SidebarFilter.vue +++ b/src/components/Discover/Map/SidebarFilter.vue @@ -93,7 +93,8 @@
- + +
@@ -157,6 +158,7 @@ export default { isEndSelected: null, isActAllTask: true, rowData: [], + isDisabled: true, // Apply Button disabled setting } }, components: { @@ -189,6 +191,45 @@ export default { filterEndToStartData: function() { return this.isStartSelected ? this.setStartAndEndData(this.filterStartToEnd, this.rowData, 'sinks') : this.setActData(this.filterEndToStart); }, + // Apply Button disabled setting + isDisabledButton: function() { + let disabled = true; + let sele = this.selectValue; + + switch(sele[0]) { + case 'Sequence': // Filter Type 選 Sequence 的行為 + switch(sele[1]) { + case 'Have activity(s)': // Activity Sequence 選 Have activity(s) 的行為 + if(this.selectFilterTask && this.selectFilterTask?.length !== 0) disabled = false; + break; + case 'Start activity / End activity': // Activity Sequence 選 Start activity / End activity 的行為 + switch(sele[2]) { + case 'Start': + if(this.selectFilterStart) disabled = false; + break; + case 'End': + if(this.selectFilterEnd) disabled = false; + break; + case 'Start & End': + if(this.selectFilterStartToEnd && this.selectFilterEndToStart) disabled = false; + break; + } + break; + case 'Sequence': // Activity Sequence 選 Sequence 的行為 + if(this.listSeq.length >= 2) disabled = false; + break; + } + break; + case 'Trace': // Filter Type 選 Trace 的行為 + disabled = false; + break; + case 'Timeframes': // Filter Type 選 Timeframes 的行為 + disabled = false; + break; + } + this.isDisabled = disabled; + return disabled; + } }, methods: { /** @@ -405,75 +446,69 @@ export default { 'Active in': 'occurred-around' }; - // Filter Type 選 Sequence 的行為 - // 若陣列為空，則跳出警告訊息 - if(sele[0] === 'Sequence'){ - if(sele[1] === 'Have activity(s)'){ // Activity Sequence 選 Have activity(s) 的行為 - if(!this.selectFilterTask?.length) return this.$toast.error('Not selected'); - else { - // 將多選的 task 拆成一包包 obj - data = this.selectFilterTask.map(task => { - return { - type : 'contains-task', - task : task.label, - is_exclude : isExclude, + 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 activity / End activity': // Activity Sequence 選 Start activity / End activity 的行為 + 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; } - }) - }; - }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 { + break; + case 'Sequence': // Activity Sequence 選 Sequence 的行為 data = { - type: 'starts-with', - task: this.selectFilterStart.label, + type: sele[3] === 'Directly follows' ? 'directly-follows' : 'eventually-follows', + task_seq: this.listSeq.map(task => task.label), is_exclude: isExclude, - } - }; - }else if(sele[2] === 'End') { - if(this.selectFilterEnd === null || this.selectFilterEnd.length === 0) return this.$toast.error('Not selected'); - else { - data = { - type: 'ends-with', - task: this.selectFilterEnd.label, - is_exclude: isExclude, - } - }; - }else if(sele[2] === 'Start & End') { - if(this.selectFilterStartToEnd === null || this.selectFilterStartToEnd.length === 0 || this.selectFilterEndToStart === null || this.selectFilterEndToStart.length === 0 ) return this.$toast.error('Both Start and End must be selected.'); - else { - data = { - type: 'start-end', - starts_with: this.selectFilterStartToEnd.label, - ends_with: this.selectFilterEndToStart.label, - is_exclude: isExclude, - } - } + }; + break; + } + break; + case 'Trace': // Filter Type 選 Trace 的行為 + data = { + type: 'trace-freq', + lower: this.$refs.filterTraceView.selectArea[0]+1, + upper: this.$refs.filterTraceView.selectArea[1], + is_exclude: isExclude, }; - }else if(sele[1] === 'Sequence'){ // Activity Sequence 選 Sequence 的行為 - if(this.listSeq.length < 2) return this.$toast.error('Select two or more.'); - else { - data = { - type: sele[3] === 'Directly follows' ? 'directly-follows' : 'eventually-follows', - task_seq: this.listSeq.map(task => task.label), - 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, }; - } - } else if(sele[0] === 'Timeframes'){ // Filter Type 選 Timeframes 的行為 - data = { - type: containmentMap[sele[6]], - start: this.selectTimeFrame[0], - end: this.selectTimeFrame[1], - is_exclude: isExclude, - } - } else if(sele[0] === 'Trace'){ // Filter Type 選 Trace 的行為 - data = { - type: 'trace-freq', - lower: this.$refs.filterTraceView.selectArea[0]+1, - upper: this.$refs.filterTraceView.selectArea[1], - is_exclude: isExclude, - } + break; } // 將資料指向 Vue data 雙向綁定 const postData = Array.isArray(data) ? data : [data];