imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Issue #114: Done.

Browse Source
This commit is contained in:
chiayin
2023-10-03 12:32:27 +08:00
parent 436586d6e9
commit 285fb43aa3
1 changed files with 100 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/components/Discover/Map/SidebarFilter.vue
View File

@@ -93,7 +93,8 @@
<!-- Button -->
<div class="float-right space-x-4 px-4 py-2">
<button type="button" class="btn btn-sm btn-neutral" @click="reset">Clear</button>
<button type="button" class="btn btn-sm btn-neutral" @click="submit">Apply</button>
<button type="button" class="btn btn-sm" @click="submit" :disabled="isDisabledButton" :class="this.isDisabled ? 'btn-disable' : 'btn-neutral'">Apply</button>
<!-- :disabled="isDisabled" -->
</div>
</div>
</div>
@@ -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
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,
}
})
};
}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 '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,
}
};
}else if(sele[2] === 'End') {
if(this.selectFilterEnd === null || this.selectFilterEnd.length === 0) return this.$toast.error('Not selected');
else {
break;
case 'End':
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 {
break;
case 'Start & End':
data = {
type: 'start-end',
starts_with: this.selectFilterStartToEnd.label,
ends_with: this.selectFilterEndToStart.label,
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 {
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;
}
} 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 的行為
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,
}
};
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 postData = Array.isArray(data) ? data : [data];