diff --git a/src/components/Discover/Map/Filter/Timeframes.vue b/src/components/Discover/Map/Filter/Timeframes.vue index e9df1fb..d06599a 100644 --- a/src/components/Discover/Map/Filter/Timeframes.vue +++ b/src/components/Discover/Map/Filter/Timeframes.vue @@ -350,7 +350,7 @@ export default{ // 讓日曆的範圍等於時間軸的範圍 this.startTime = this.startMinDate; this.endTime = this.startMaxDate; - this.timeFrameStartEnd; + this.timeFrameStartEnd(); }, } diff --git a/src/components/Discover/Map/Filter/Trace.vue b/src/components/Discover/Map/Filter/Trace.vue index 03e6e5d..788ba4a 100644 --- a/src/components/Discover/Map/Filter/Trace.vue +++ b/src/components/Discover/Map/Filter/Trace.vue @@ -162,7 +162,7 @@ export default { { field: 'id', header: 'Case Id' }, { field: 'started_at', header: 'Start time' }, { field: 'completed_at', header: 'End time' }, - ...data[0]?.attributes.map((att, index) => ({ field: `att_${index}`, header: att.key })), + ...(data[0]?.attributes ?? []).map((att, index) => ({ field: `att_${index}`, header: att.key })), ]; } return result diff --git a/src/components/Discover/Map/SidebarFilter.vue b/src/components/Discover/Map/SidebarFilter.vue index 65a7cf9..de025d3 100644 --- a/src/components/Discover/Map/SidebarFilter.vue +++ b/src/components/Discover/Map/SidebarFilter.vue @@ -210,60 +210,22 @@ export default { // Apply Button disabled setting isDisabledButton: function() { let disabled = true; - let sele = this.selectValue; - const type = this.selectAttType; - - 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 & End': // Activity Sequence 選 Start & End 的行為 - 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 'Attributes': // Activity Sequence 選 Attributes 的行為 - switch (type) { - case 'string': - if(this.selectAttribute && this.selectAttribute.length > 0) disabled = false; - break; - case 'boolean': - if(this.selectAttribute?.key && this.selectAttribute?.label) disabled = false; - break; - case 'int': - case 'float': - case 'date': - if(this.selectAttribute?.key && this.selectAttribute?.min != null && this.selectAttribute?.max != null) disabled = false; - break; - default: - break; - } - break; - case 'Trace': // Filter Type 選 Trace 的行為 - if(this.selectTraceArea[0] !== this.selectTraceArea[1]) disabled = false; - break; - case 'Timeframes': // Filter Type 選 Timeframes 的行為 - if(this.selectTimeFrame.length > 0) disabled = false; - break; + const { selectValue: sele, selectAttType: type } = this; + const firstSelection = sele[0]; + + if (firstSelection === 'Sequence') { + disabled = this.handleSequenceSelection(sele); + } else if (firstSelection === 'Attributes') { + disabled = this.handleAttributesSelection(type); + } else if (firstSelection === 'Trace') { + disabled = this.handleTraceSelection(); + } else if (firstSelection === 'Timeframes') { + disabled = this.handleTimeframesSelection(); } + this.isDisabled = disabled; return disabled; - } + }, }, methods: { /** @@ -520,7 +482,9 @@ export default { this.$refs.filterTraceView.selectArea = [0, this.$refs.filterTraceView.traceTotal]; }; // 成功訊息 - massage ? this.$toast.success('Filter cleared.') : null; + if(message) { + this.$toast.success('Filter cleared.') + } }, /** * header:Filter 發送選取的資料 @@ -660,7 +624,10 @@ export default { await this.allMapDataStore.checkHasResult(); // 有 Data 就加進 Funnel，沒有 Data 不加進 Funnel 和跳錯誤訊息 - if(this.hasResultRule === null) return this.isLoading = false; + if(this.hasResultRule === null) { + this.isLoading = false; + return; + } else if(this.hasResultRule) { if(!this.temporaryData?.length){ this.temporaryData.push(...postData); @@ -672,13 +639,11 @@ export default { this.ruleData.push(...postData.map(e => this.setRule(e))) } this.reset(false); - // this.isLoading = true; await new Promise(resolve => setTimeout(resolve, 1000)); this.isLoading = false; this.$toast.success('Filter applied. Go to Funnel to verify.'); }else { this.reset(false); - // this.isLoading = true; await new Promise(resolve => setTimeout(resolve, 1000)); this.isLoading = false; this.$toast.warning('No result.'); @@ -690,7 +655,53 @@ export default { sumbitAll() { this.$emit('submit-all'); }, - }, + handleSequenceSelection(sele) { + const secondSelection = sele[1]; + + switch (secondSelection) { + case 'Have activity(s)': + return !(this.selectFilterTask && this.selectFilterTask.length !== 0); + case 'Start & End': + return this.handleStartEndSelection(sele[2]); + case 'Sequence': + return !(this.listSeq.length >= 2); + default: + return true; + } + }, + handleStartEndSelection(option) { + switch (option) { + case 'Start': + return !this.selectFilterStart; + case 'End': + return !this.selectFilterEnd; + case 'Start & End': + return !(this.selectFilterStartToEnd && this.selectFilterEndToStart); + default: + return true; + } + }, + handleAttributesSelection(type) { + switch (type) { + case 'string': + return !(this.selectAttribute && this.selectAttribute.length > 0); + case 'boolean': + return !(this.selectAttribute?.key && this.selectAttribute?.label); + case 'int': + case 'float': + case 'date': + return !(this.selectAttribute?.key && this.selectAttribute?.min != null && this.selectAttribute?.max != null); + default: + return true; + } + }, + handleTraceSelection() { + return this.selectTraceArea[0] === this.selectTraceArea[1]; + }, + handleTimeframesSelection() { + return this.selectTimeFrame.length === 0; + }, + }, } diff --git a/src/components/Discover/Map/SidebarTraces.vue b/src/components/Discover/Map/SidebarTraces.vue index 24812e4..a29c363 100644 --- a/src/components/Discover/Map/SidebarTraces.vue +++ b/src/components/Discover/Map/SidebarTraces.vue @@ -126,7 +126,7 @@ export default { { field: 'id', header: 'Case Id' }, { field: 'started_at', header: 'Start time' }, { field: 'completed_at', header: 'End time' }, - ...data[0]?.attributes.map((att, index) => ({ field: `att_${index}`, header: att.key })), + ...(data[0]?.attributes ?? []).map((att, index) => ({ field: `att_${index}`, header: att.key })), ]; } return result @@ -287,14 +287,12 @@ export default { @apply sticky top-0 left-0 z-10 bg-neutral-10 } :deep(.p-datatable .p-datatable-thead > tr > th) { - @apply !border-y-0 border-neutral-500 bg-neutral-100 after:absolute after:left-0 after:w-full after:h-full after:block after:top-0 after:border-b after:border-t after:border-neutral-500 + @apply !border-y-0 border-neutral-500 bg-neutral-100 after:absolute after:left-0 after:w-full after:h-full after:block after:top-0 after:border-b after:border-t after:border-neutral-500; + white-space: nowrap; } :deep(.p-datatable .p-datatable-tbody > tr > td) { @apply border-neutral-500 !border-t-0 text-center } -:deep(.p-datatable .p-datatable-thead > tr > th) { - white-space: nowrap; -} :deep(.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td) { min-width: 72px; max-width: 184px;