diff --git a/src/App.vue b/src/App.vue index 68427b6..543cfdb 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,8 +2,6 @@ - - diff --git a/src/assets/vendors.css b/src/assets/vendors.css index fd323fe..dd8f066 100644 --- a/src/assets/vendors.css +++ b/src/assets/vendors.css @@ -43,7 +43,7 @@ } .p-sidebar-header { @apply bg-neutral-200 border-b border-neutral-300 !py-2 !justify-between -}; +} .p-sidebar-right .p-sidebar-header { @apply flex-row-reverse !justify-end text-neutral-500 } diff --git a/src/components/Discover/Conformance/ConformanceResults.vue b/src/components/Discover/Conformance/ConformanceResults.vue index c2a4859..f8e6ccf 100644 --- a/src/components/Discover/Conformance/ConformanceResults.vue +++ b/src/components/Discover/Conformance/ConformanceResults.vue @@ -38,13 +38,6 @@

- -
@@ -104,6 +97,16 @@

Short Loop(s)

+ + + + + + + + + +
@@ -152,6 +155,16 @@

Issue Listinfo

+ + + + + + + + + +
@@ -500,8 +513,9 @@ export default { color: '#334155', align: 'inner', callback: function(value, index, values) { - if (value === 0) return `${value * 100}%`; - else if (value === 1) return `${value * 100}%`; + if (value === 0 || value === 1) { + return `${value * 100}%`; + } }, }, grid: { @@ -585,8 +599,9 @@ export default { color: '#334155', align: 'inner', callback: function(value, index, values) { - if (index === 0) return shortScaleNumber(value); - else if (index === values.length - 1) return shortScaleNumber(value); + if (index === 0 || index === values.length - 1) { + return shortScaleNumber(value); + } }, }, grid: { @@ -615,7 +630,7 @@ export default { let max = yMax * 1.1; let xVal = timeRange(xMin, xMax, 100); let yVal = yTimeRange(data, 100, yMin, yMax); - data = xVal.map((x, index) => ({ x, y: yVal[index] })); + xVal.map((x, index) => ({ x, y: yVal[index] })); let formattedXVal = xVal.map(value => formatTime(value)); formattedXVal = formatMaxTwo(formattedXVal); let selectTimeMinIndex = getXIndex(xVal, this.selectDurationTime.min); diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue b/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue index 11f05dc..08dec0c 100644 --- a/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue +++ b/src/components/Discover/Conformance/ConformanceSidebar/ActSeqDrag.vue @@ -55,7 +55,6 @@ export default { }, computed: { datadata: function() { - // TODO Activity List 的 dblclick, drag & drop 要改假刪除 // Activity List 要排序 let newData; if(this.data !== null) { @@ -114,14 +113,16 @@ export default { // 拖曳結束要顯示箭頭，但最後一個不用 const lastChild = evt.item.lastChild; const listIndex = this.listSequence.length - 1 - evt.oldIndex !== listIndex ? lastChild.style.display = '' : null; + if (evt.oldIndex !== listIndex) { + lastChild.style.display = ''; + } // reset: 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏 this.lastItemIndex = null; }, }, created() { let newlist = JSON.parse(JSON.stringify(this.listSeq)); - this.isSubmit ? this.listSequence = newlist : this.listSequence = []; + this.listSequence = this.isSubmit ? newlist : []; this.$emitter.on('reset', (data) => { this.listSequence = []; }); diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue index 613424a..9717d06 100644 --- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue +++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceSelectResult.vue @@ -182,116 +182,52 @@ export default { this.containstTasksData = data; }); this.$emitter.on('actRadioData', (newData) => { - let data = JSON.parse(JSON.stringify(newData)); // 深拷貝原始 cases 的內容 - switch (data.category) { - // Activity sequence - case 'cfmSeqStart': - if(this.isStartSelected === true && data.task !== this.selectCfmSeqStart) this.selectCfmSeqEnd = null; - data.category = 'Start'; - this.selectCfmSeqStart = data; - break; - case 'cfmSeqEnd': - if(this.isEndSelected === true && data.task !== this.selectCfmSeqEnd)this.selectCfmSeqStart = null; - data.category = 'End'; - this.selectCfmSeqEnd = data; - break; - // Processing time - case 'cfmPtEteStart': - data.category = 'Start'; - this.selectCfmPtEteStart = [data]; - break; - case 'cfmPtEteEnd': - data.category = 'End'; - this.selectCfmPtEteEnd = [data]; - break; - case 'cfmPtEteSEStart': - if(this.isStartSelected === true && data.task !== this.selectCfmPtEteSEStart) this.selectCfmPtEteSEEnd = null; - data.category = 'Start'; - this.selectCfmPtEteSEStart = data; - break; - case 'cfmPtEteSEEnd': - if(this.isEndSelected === true && data.task !== this.selectCfmPtEteSEEnd)this.selectCfmPtEteSEStart = null; - data.category = 'End'; - this.selectCfmPtEteSEEnd = data; - break; - case 'cfmPtPStart': - data.category = 'From'; - this.selectCfmPtPStart = [data]; - break; - case 'cfmPtPEnd': - data.category = 'To'; - this.selectCfmPtPEnd = [data]; - break; - case 'cfmPtPSEStart': - if(this.isStartSelected === true && data.task !== this.selectCfmPtPSEStart) this.selectCfmPtPSEEnd = null; - data.category = 'From'; - this.selectCfmPtPSEStart = data; - break; - case 'cfmPtPSEEnd': - if(this.isEndSelected === true && data.task !== this.selectCfmPtPSEEnd)this.selectCfmPtPSEStart = null; - data.category = 'To'; - this.selectCfmPtPSEEnd = data; - break; - // Waiting time - case 'cfmWtEteStart': - data.category = 'Start'; - this.selectCfmWtEteStart = [data]; - break; - case 'cfmWtEteEnd': - data.category = 'End'; - this.selectCfmWtEteEnd = [data]; - break; - case 'cfmWtEteSEStart': - if(this.isStartSelected === true && data.task !== this.selectCfmWtEteSEStart) this.selectCfmWtEteSEEnd = null; - data.category = 'Start'; - this.selectCfmWtEteSEStart = data; - break; - case 'cfmWtEteSEEnd': - if(this.isEndSelected === true && data.task !== this.selectCfmWtEteSEEnd)this.selectCfmWtEteSEStart = null; - data.category = 'End'; - this.selectCfmWtEteSEEnd = data; - break; - case 'cfmWtPStart': - data.category = 'From'; - this.selectCfmWtPStart = [data]; - break; - case 'cfmWtPEnd': - data.category = 'To'; - this.selectCfmWtPEnd = [data]; - break; - case 'cfmWtPSEStart': - if(this.isStartSelected === true && data.task !== this.selectCfmWtPSEStart) this.selectCfmWtPSEEnd = null; - data.category = 'From'; - this.selectCfmWtPSEStart = data; - break; - case 'cfmWtPSEEnd': - if(this.isEndSelected === true && data.task !== this.selectCfmWtPSEEnd)this.selectCfmWtPSEStart = null; - data.category = 'To'; - this.selectCfmWtPSEEnd = data; - break; - // Cycle time - case 'cfmCtEteStart': - data.category = 'Start'; - this.selectCfmCtEteStart = [data]; - break; - case 'cfmCtEteEnd': - data.category = 'End'; - this.selectCfmCtEteEnd = [data]; - break; - case 'cfmCtEteSEStart': - if(this.isStartSelected === true && data.task !== this.selectCfmCtEteSEStart) this.selectCfmCtEteSEEnd = null; - data.category = 'Start'; - this.selectCfmCtEteSEStart = data; - break; - case 'cfmCtEteSEEnd': - if(this.isEndSelected === true && data.task !== this.selectCfmCtEteSEEnd)this.selectCfmCtEteSEStart = null; - data.category = 'End'; - this.selectCfmCtEteSEEnd = data; - break; - default: - if(this.selectedRuleType === 'Activity duration') this.durationData = [data.task]; - break; - }; + let data = JSON.parse(JSON.stringify(newData)); // 深拷貝原始 cases 的內容 + + const categoryMapping = { + 'cfmSeqStart': ['Start', 'selectCfmSeqStart', 'selectCfmSeqEnd'], + 'cfmSeqEnd': ['End', 'selectCfmSeqEnd', 'selectCfmSeqStart'], + 'cfmPtEteStart': ['Start', 'selectCfmPtEteStart'], + 'cfmPtEteEnd': ['End', 'selectCfmPtEteEnd'], + 'cfmPtEteSEStart': ['Start', 'selectCfmPtEteSEStart', 'selectCfmPtEteSEEnd'], + 'cfmPtEteSEEnd': ['End', 'selectCfmPtEteSEEnd', 'selectCfmPtEteSEStart'], + 'cfmPtPStart': ['From', 'selectCfmPtPStart'], + 'cfmPtPEnd': ['To', 'selectCfmPtPEnd'], + 'cfmPtPSEStart': ['From', 'selectCfmPtPSEStart', 'selectCfmPtPSEEnd'], + 'cfmPtPSEEnd': ['To', 'selectCfmPtPSEEnd', 'selectCfmPtPSEStart'], + 'cfmWtEteStart': ['Start', 'selectCfmWtEteStart'], + 'cfmWtEteEnd': ['End', 'selectCfmWtEteEnd'], + 'cfmWtEteSEStart': ['Start', 'selectCfmWtEteSEStart', 'selectCfmWtEteSEEnd'], + 'cfmWtEteSEEnd': ['End', 'selectCfmWtEteSEEnd', 'selectCfmWtEteSEStart'], + 'cfmWtPStart': ['From', 'selectCfmWtPStart'], + 'cfmWtPEnd': ['To', 'selectCfmWtPEnd'], + 'cfmWtPSEStart': ['From', 'selectCfmWtPSEStart', 'selectCfmWtPSEEnd'], + 'cfmWtPSEEnd': ['To', 'selectCfmWtPSEEnd', 'selectCfmWtPSEStart'], + 'cfmCtEteStart': ['Start', 'selectCfmCtEteStart'], + 'cfmCtEteEnd': ['End', 'selectCfmCtEteEnd'], + 'cfmCtEteSEStart': ['Start', 'selectCfmCtEteSEStart', 'selectCfmCtEteSEEnd'], + 'cfmCtEteSEEnd': ['End', 'selectCfmCtEteSEEnd', 'selectCfmCtEteSEStart'] + }; + + const updateSelection = (key, mainSelector, secondarySelector) => { + if (this[mainSelector]) { + if (data.task !== this[mainSelector]) this[secondarySelector] = null; + } + data.category = categoryMapping[key][0]; + this[mainSelector] = data; + }; + + if (categoryMapping[data.category]) { + const [category, mainSelector, secondarySelector] = categoryMapping[data.category]; + if (secondarySelector) { + updateSelection(data.category, mainSelector, secondarySelector); + } else { + data.category = category; + this[mainSelector] = [data]; + } + } else if (this.selectedRuleType === 'Activity duration') { + this.durationData = [data.task]; + } }); this.$emitter.on('getListSequence', (data) => { switch (data.category) { diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue index d2627b2..bf6c726 100644 --- a/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue +++ b/src/components/Discover/Conformance/ConformanceSidebar/ConformanceShowBar.vue @@ -288,7 +288,11 @@ export default { */ setStartAndEndData(data, category, task) { let oppositeCategory = ''; - category === 'start' ? oppositeCategory = 'end' : oppositeCategory = 'start'; + if (category === 'start') { + oppositeCategory = 'end'; + } else { + oppositeCategory = 'start'; + }; let newData = data.filter(i => i[category] === task).map(i => i[oppositeCategory]); newData = [...new Set(newData)]; return newData; @@ -361,8 +365,6 @@ export default { this.task = this.isSubmitShowDataSeq.task; this.isStartSelected = this.isSubmitShowDataSeq.isStartSelected; this.isEndSelected = this.isSubmitShowDataSeq.isEndSelected; - // this.taskStart = this.isSubmitShowDataSeq.taskStart; - // this.taskEnd = this.isSubmitShowDataSeq.taskEnd; break; case 'Processing time': switch (this.selectedProcessScope) { @@ -370,45 +372,36 @@ export default { this.task = this.isSubmitShowDataPtEte.task; this.isStartSelected = this.isSubmitShowDataPtEte.isStartSelected; this.isEndSelected = this.isSubmitShowDataPtEte.isEndSelected; - // this.taskStart = this.isSubmitShowDataPtEte.taskStart; - // this.taskEnd = this.isSubmitShowDataPtEte.taskEnd; break; case 'Partial': this.task = this.isSubmitShowDataPtP.task; this.isStartSelected = this.isSubmitShowDataPtP.isStartSelected; this.isEndSelected = this.isSubmitShowDataPtP.isEndSelected; - // this.taskStart = this.isSubmitShowDataPtP.taskStart; - // this.taskEnd = this.isSubmitShowDataPtP.taskEnd; break; default: break; } break; case 'Waiting time': - switch (this.selectedProcessScope) { - case 'End to end': - this.task = this.isSubmitShowDataWtEte.task; - this.isStartSelected = this.isSubmitShowDataWtEte.isStartSelected; - this.isEndSelected = this.isSubmitShowDataWtEte.isEndSelected; - // this.taskStart = this.isSubmitShowDataWtEte.taskStart; - // this.taskEnd = this.isSubmitShowDataWtEte.taskEnd; - break; - case 'Partial': - this.task = this.isSubmitShowDataWtP.task; - this.isStartSelected = this.isSubmitShowDataWtP.isStartSelected; - this.isEndSelected = this.isSubmitShowDataWtP.isEndSelected; - // this.taskStart = this.isSubmitShowDataWtP.taskStart; - // this.taskEnd = this.isSubmitShowDataWtP.taskEnd; - break; - default: - break; - } + switch (this.selectedProcessScope) { + case 'End to end': + this.task = this.isSubmitShowDataWtEte.task; + this.isStartSelected = this.isSubmitShowDataWtEte.isStartSelected; + this.isEndSelected = this.isSubmitShowDataWtEte.isEndSelected; + break; + case 'Partial': + this.task = this.isSubmitShowDataWtP.task; + this.isStartSelected = this.isSubmitShowDataWtP.isStartSelected; + this.isEndSelected = this.isSubmitShowDataWtP.isEndSelected; + break; + default: + break; + } + break; case 'Cycle time': this.task = this.isSubmitShowDataCt.task; this.isStartSelected = this.isSubmitShowDataCt.isStartSelected; this.isEndSelected = this.isSubmitShowDataCt.isEndSelected; - // this.taskStart = this.isSubmitShowDataCt.taskStart; - // this.taskEnd = this.isSubmitShowDataCt.taskEnd; break; default: break; diff --git a/src/components/Discover/Conformance/MoreModal.vue b/src/components/Discover/Conformance/MoreModal.vue index e17546a..be6a7e9 100644 --- a/src/components/Discover/Conformance/MoreModal.vue +++ b/src/components/Discover/Conformance/MoreModal.vue @@ -14,6 +14,7 @@

+ @@ -285,7 +286,8 @@ 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 @@ -294,9 +296,6 @@ export default { :deep(.p-column-header-content) { @apply justify-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; diff --git a/src/components/Discover/Map/Filter/ActAndSeq.vue b/src/components/Discover/Map/Filter/ActAndSeq.vue index 5093e4d..d4fe548 100644 --- a/src/components/Discover/Map/Filter/ActAndSeq.vue +++ b/src/components/Discover/Map/Filter/ActAndSeq.vue @@ -7,6 +7,7 @@
Trace
+ @@ -85,8 +86,8 @@ export default { data: function() { // Activity List 要排序 this.filteredData = this.filteredData.sort((x, y) => { - y.occurrences - x.occurrences - if(y.occurrences === x.occurrences) sortNumEngZhtwForFilter(x.label, y.label); + const diff = y.occurrences - x.occurrences; + return diff !== 0 ? diff : sortNumEngZhtwForFilter(x.label, y.label); }); return this.filteredData; } @@ -147,7 +148,9 @@ export default { // 拖曳結束要顯示箭頭，但最後一個不用 const lastChild = evt.item.lastChild; const listIndex = this.listSequence.length - 1 - evt.oldIndex !== listIndex ? lastChild.style.display = '' : null; + if (evt.oldIndex !== listIndex) { + lastChild.style.display = ''; + } // reset: 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏 this.lastItemIndex = null; }, diff --git a/src/components/Discover/Map/Filter/ActOcc.vue b/src/components/Discover/Map/Filter/ActOcc.vue index 3c42af3..a0ac56e 100644 --- a/src/components/Discover/Map/Filter/ActOcc.vue +++ b/src/components/Discover/Map/Filter/ActOcc.vue @@ -2,8 +2,6 @@

{{ tableTitle }} ({{ tableData.length }})

- -
diff --git a/src/components/Discover/Map/Filter/ActOccCase.vue b/src/components/Discover/Map/Filter/ActOccCase.vue index 06173d8..b771a47 100644 --- a/src/components/Discover/Map/Filter/ActOccCase.vue +++ b/src/components/Discover/Map/Filter/ActOccCase.vue @@ -2,8 +2,6 @@

{{ tableTitle }} ({{ data.length }})

- -
diff --git a/src/components/Discover/Map/Filter/Attributes.vue b/src/components/Discover/Map/Filter/Attributes.vue index f2134e2..df92c4e 100644 --- a/src/components/Discover/Map/Filter/Attributes.vue +++ b/src/components/Discover/Map/Filter/Attributes.vue @@ -134,6 +134,9 @@ export default { return { filterAttrs } }, + components: { + InputNumber, + }, data() { return { selectedAttName: {}, @@ -182,9 +185,12 @@ export default { attRangeTotal: function() { const type = this.selectedAttName.type; - return !this.classTypes.includes(type) ? null - : this.attRangeData ? `(${this.attRangeData.length})` - : null; + let result = null; // Initialize the result variable with null + + if (this.classTypes.includes(type) && this.attRangeData) { + result = `(${this.attRangeData.length})`; // Assign the length of attRangeData if it exists + } + return result; }, attRangeData: function() { let data = []; @@ -203,7 +209,12 @@ export default { occ_ratio: this.getPercentLabel(ratio), freq: item.freq }; - result.label = type !== 'boolean' ? null : item.value ? 'Yes' : 'No'; + result.label = null; + if (type === 'boolean') { + result.label = item.value ? 'Yes' : 'No'; + } else { + result.label = null; + } return result; }) return data.sort((x, y) => y.freq - x.freq); @@ -224,6 +235,7 @@ export default { let max = this.valueData.max; const type = this.valueData.type; switch (type) { + case 'dummy': case 'date': xAxisMin = new Date(min).getTime(); xAxisMax = new Date(max).getTime(); @@ -268,6 +280,7 @@ export default { const type = this.selectedAttName.type; switch (type) { + case 'dummy': //sonar-qube case 'date': start = getMoment(this.startTime).format('YYYY-MM-DDTHH:mm:00'); end = getMoment(this.endTime).format('YYYY-MM-DDTHH:mm:00'); @@ -366,6 +379,7 @@ export default { const min = this.valueData.min; const max = this.valueData.max; switch (this.selectedAttName.type) { + case 'dummy': //sonar-qube case 'date': // 除了 date 外雙向綁定為空 this.valueStart = null; @@ -394,7 +408,7 @@ export default { break; } // 傳給後端 - this.attValueTypeStartEnd; + // this.attValueTypeStartEnd; 是否有要呼叫函數? sonar-qube // 建立圖表 this.createChart(); } @@ -470,9 +484,15 @@ export default { break; case 'float': setLabels = data.map((item, index) => { - let x = index === 0 ? Math.floor(item.x * 100) / 100 : - index === data.length - 1 ? item.x = Math.ceil(item.x * 100) / 100 : - Math.round(item.x * 100) / 100; + let x; + if (index === 0) { + x = Math.floor(item.x * 100) / 100; + } else if (index === data.length - 1) { + item.x = Math.ceil(item.x * 100) / 100; + x = item.x; + } else { + x = Math.round(item.x * 100) / 100; + } return x }); break; @@ -574,13 +594,21 @@ export default { maxRotation: 0, // 不旋轉 lable 0~50 color: '#334155', callback: ((value, index, values) => { + let x; switch (valueData.type) { case 'int': return Math.round(value); case 'float': - let x = index === 0 ? Math.floor(value * 100) / 100 : - index === values.length - 1 ? value = Math.ceil(value * 100) / 100 : - Math.round(value * 100) / 100; + switch (index) { + case 0: + x = Math.floor(value * 100) / 100; + break; + case values.length - 1: + x = Math.ceil(value * 100) / 100; + break; + default: + x = Math.round(value * 100) / 100; + } // 處理科學記號等格式轉換 // Decimal 無法處理超過 16 位數 x = new Intl.NumberFormat(undefined, {useGrouping: false}).format(x); @@ -607,6 +635,7 @@ export default { let end = sliderData[e[1].toFixed()]; // 取得 index，須為整數。 switch (this.selectedAttName.type) { + case 'dummy': case 'date': this.startTime = new Date(start); this.endTime = new Date(end); @@ -625,7 +654,7 @@ export default { // 重新算圖 this.resizeMask(this.chartComplete); // 執行 timeFrameStartEnd 才會改變數據 - this.attValueTypeStartEnd; + // this.attValueTypeStartEnd; 是否有要呼叫函數? sonar-qube }, /** * 選取開始或結束時間時，要改變滑塊跟圖表 @@ -653,8 +682,20 @@ export default { this.selectArea = closestIndexes; // 重新設定 start end 日曆選取範圍 if(!isDateType) inputValue = Number(e.value.replace(/,/g, '')) ; - if(direction === 'start') isDateType ? this.endMinDate = e : this.valueEndMin = inputValue; - else if(direction === 'end') isDateType ? this.startMaxDate = e : this.valueStartMax = inputValue; + if(direction === 'start') { + if(isDateType){ + this.endMinDate = e; + } else { + this.valueEndMin = inputValue; + } + } + else if(direction === 'end') { + if(isDateType) { + this.startMaxDate = e; + } else { + this.valueStartMax = inputValue; + }; + } // 重新算圖 if(!isNaN(closestIndexes[0]) && !isNaN(closestIndexes[1])) this.resizeMask(this.chartComplete); else return; diff --git a/src/components/Discover/Map/Filter/Funnel.vue b/src/components/Discover/Map/Filter/Funnel.vue index 0c8f9e4..0847a87 100644 --- a/src/components/Discover/Map/Filter/Funnel.vue +++ b/src/components/Discover/Map/Filter/Funnel.vue @@ -50,7 +50,7 @@ export default { const { isLoading } = storeToRefs(loadingStore); const { hasResultRule, temporaryData, postRuleData, ruleData, isRuleData, tempFilterId } = storeToRefs(allMapDataStore); - return { isLoading, hasResultRule, temporaryData, postRuleData, ruleData, isRuleData, allMapDataStore, tempFilterId, allMapDataStore } + return { isLoading, hasResultRule, temporaryData, postRuleData, ruleData, isRuleData, allMapDataStore, tempFilterId } }, methods: { /** diff --git a/src/components/Discover/Map/Filter/Timeframes.vue b/src/components/Discover/Map/Filter/Timeframes.vue index 227dc7c..d06599a 100644 --- a/src/components/Discover/Map/Filter/Timeframes.vue +++ b/src/components/Discover/Map/Filter/Timeframes.vue @@ -103,17 +103,20 @@ export default{ let d = this.filterTimeframe.data[0].y; let e = 2; let f = this.filterTimeframe.data[1].y; - b = (e*d - a*d - f*a - f*c) / (e - c - a) - b < 0 ? b = 0 : b; + b = (e*d - a*d - f*a - f*c) / (e - c - a); + if(b < 0) { + b = 0; + } // y 軸最大值 let ma = 9; let mb = this.filterTimeframe.data[8].y; let mc = 10; let md = this.filterTimeframe.data[9].y; let me = 11; - let mf; - mf = (mb*me - mb*mc -md*me + md*ma) / (ma - mc); - mf < 0 ? mf = 0 : mf; + let mf = (mb*me - mb*mc -md*me + md*ma) / (ma - mc); + if(mf < 0) { + mf = 0; + } // 添加最小值 data.unshift({ @@ -304,7 +307,7 @@ export default{ // 重新算圖 this.resizeMask(this.chart); // 執行 timeFrameStartEnd 才會改變數據 - this.timeFrameStartEnd; + this.timeFrameStartEnd(); }, /** * 選取開始或結束時間時，要改變滑塊跟圖表 @@ -347,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 f07f845..9d2c97c 100644 --- a/src/components/Discover/Map/Filter/Trace.vue +++ b/src/components/Discover/Map/Filter/Trace.vue @@ -21,6 +21,7 @@

Activity
+ @@ -161,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 @@ -256,7 +257,6 @@ export default { async switchCaseData(id, count) { // 點同一筆 id 不要有動作 if(id == this.showTraceId) return; - // if(count >= 1000) this.isLoading = true; // 超過 1000 筆要 loading 畫面 this.isLoading = true; // 都要 loading 畫面 this.infinit404 = null; this.infinitMaxItems = false; @@ -363,14 +363,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; diff --git a/src/components/Discover/Map/SidebarFilter.vue b/src/components/Discover/Map/SidebarFilter.vue index b2d776e..618a02f 100644 --- a/src/components/Discover/Map/SidebarFilter.vue +++ b/src/components/Discover/Map/SidebarFilter.vue @@ -38,14 +38,6 @@ - -

Refine

@@ -218,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: { /** @@ -442,60 +396,39 @@ export default { 'occurred-around' : 'active in' }; - switch(e.type){ + switch(e.type) { //sonar-qube case "contains-task": - label = `${includeStr}, ${e.task}`; - type = "Sequence"; - break; case "starts-with": - label = `${includeStr}, start with ${e.task}`; - type = "Sequence"; - break; case "ends-with": - label = `${includeStr}, end with ${e.task}`; - type = "Sequence"; - break; - case "start-end": - label = `${includeStr}, start with ${e.starts_with}, end with ${e.ends_with}`; - type = "Sequence"; - break; case "directly-follows": - label = `${includeStr}, directly follows, ${e.task_seq.join(' -> ')}`; - type = "Sequence"; - break; case "eventually-follows": - label = `${includeStr}, eventually follows, ${e.task_seq.join(' -> ')}`; - type = "Sequence"; - break; + label = `${includeStr}, ${getTaskLabel(e)}`; + type = "Sequence"; + break; + case "start-end": + label = `${includeStr}, start with ${e.starts_with}, end with ${e.ends_with}`; + type = "Sequence"; + break; case "trace-freq": - label = `${includeStr}, from #${e.lower} to #${e.upper}`; - type = "Trace"; - break; + label = `${includeStr}, from #${e.lower} to #${e.upper}`; + type = "Trace"; + break; case 'string-attr': - label = `${includeStr}, ${e.key}, ${e.value}`; - type = "Attributes"; - break; case 'boolean-attr': - label = `${includeStr}, ${e.key}, ${this.selectAttribute?.label}`; - type = "Attributes"; - break; case 'int-attr': case 'float-attr': - label = `${includeStr}, ${e.key}, from ${e.min} to ${e.max}`; - type = "Attributes"; - break; case 'date-attr': - label = `${includeStr}, ${e.key}, from ${getMoment(e.min).format('YYYY-MM-DD HH:mm')} to ${getMoment(e.max).format('YYYY-MM-DD HH:mm')}`; - type = "Attributes"; - break; + label = `${includeStr}, ${getAttributeLabel(e)}`; + type = "Attributes"; + break; case "occurred-in": case "started-in": case "completed-in": case "occurred-around": - label = `${containmentMap[e.type]}, ${includeStr}, from ${getMoment(e.start).format("YYYY-MM-DD HH:mm")} to ${getMoment(e.end).format("YYYY-MM-DD HH:mm")} ` - type = "Timeframe" - break; - }; + label = `${containmentMap[e.type]}, ${includeStr}, from ${getMoment(e.start).format("YYYY-MM-DD HH:mm")} to ${getMoment(e.end).format("YYYY-MM-DD HH:mm")} `; + type = "Timeframe" + break; + }; return { type, label, @@ -528,7 +461,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 發送選取的資料 @@ -537,7 +472,7 @@ export default { this.isLoading = true; let data; let sele = this.selectValue; - let isExclude = sele[5] === 'Exclude' ? true : false; + let isExclude = sele[5] === 'Exclude'; let containmentMap = { 'Contained in': 'occurred-in', 'Started in': 'started-in', @@ -641,16 +576,17 @@ export default { break } break; - case 'Trace': // Filter Type 選 Trace 的行為 - let lowerIndex = this.$refs.filterTraceView.selectArea[0]; - let 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 '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]], @@ -668,7 +604,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); @@ -680,13 +619,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.'); @@ -698,6 +635,78 @@ 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; + }, + getTaskLabel(e) { + switch (e.type) { + case "contains-task": + return `${e.task}`; + case "starts-with": + return `start with ${e.task}`; + case "ends-with": + return `end with ${e.task}`; + case "directly-follows": + case "eventually-follows": + return `${e.type.replace('-', ' ')}, ${e.task_seq.join(' -> ')}`; + } + }, + getAttributeLabel(e) { + switch (e.type) { + case 'string-attr': + return `${e.key}, ${e.value}`; + case 'boolean-attr': + return `${e.key}, ${this.selectAttribute?.label}`; + case 'int-attr': + case 'float-attr': + return `${e.key}, from ${e.min} to ${e.max}`; + case 'date-attr': + return `${e.key}, from ${getMoment(e.min).format('YYYY-MM-DD HH:mm')} to ${getMoment(e.max).format('YYYY-MM-DD HH:mm')}`; + } + }, }, } diff --git a/src/components/Discover/Map/SidebarState.vue b/src/components/Discover/Map/SidebarState.vue index 0010af6..5713682 100644 --- a/src/components/Discover/Map/SidebarState.vue +++ b/src/components/Discover/Map/SidebarState.vue @@ -62,6 +62,8 @@

Case Duration

Trace
+ +
@@ -189,7 +191,9 @@ -
  • No data
    • +
      +
    • No data
      • +
    • {{ value }} arrow_forward  @@ -297,9 +301,6 @@ export default { :deep(.p-tabview-panel) { @apply animate-fadein } -/* .caseDurationTable td:first-child { - @apply pr-1 -} */ .caseDurationTable td { @apply scroll-pb-12 } diff --git a/src/components/Discover/Map/SidebarTraces.vue b/src/components/Discover/Map/SidebarTraces.vue index 064dd29..a29c363 100644 --- a/src/components/Discover/Map/SidebarTraces.vue +++ b/src/components/Discover/Map/SidebarTraces.vue @@ -12,6 +12,7 @@

      + @@ -125,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 @@ -175,7 +176,6 @@ export default { async switchCaseData(id, count) { // 點同一筆 id 不要有動作 if(id == this.showTraceId) return; - // if(count >= 1000) this.isLoading = true; // 超過 1000 筆要 loading 畫面 this.isLoading = true; // 都要 loading 畫面 this.infinit404 = null; this.infinitMaxItems = false; @@ -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; diff --git a/src/components/Discover/Map/SidebarView.vue b/src/components/Discover/Map/SidebarView.vue index 6a3466b..9aecd5b 100644 --- a/src/components/Discover/Map/SidebarView.vue +++ b/src/components/Discover/Map/SidebarView.vue @@ -141,13 +141,13 @@ export default { if(e.target.value !== 'freq' && e.target.value !== 'duration') value = e.target.value; switch (type) { case 'freq': - value = value ? value : this.selectedFreq ? this.selectedFreq : 'total'; + value = value || this.selectedFreq || 'total'; this.dataLayerType = type; this.dataLayerOption = value; this.selectedFreq = value; break; case 'duration': - value = value ? value : this.selectedDuration ? this.selectedDuration : 'total'; + value = value || this.selectedDuration || 'total'; this.dataLayerType = type; this.dataLayerOption = value; this.selectedDuration = value; diff --git a/src/components/Discover/StatusBar.vue b/src/components/Discover/StatusBar.vue index 86154af..8e4b06d 100644 --- a/src/components/Discover/StatusBar.vue +++ b/src/components/Discover/StatusBar.vue @@ -5,7 +5,6 @@

    • Cases

      -
      @@ -18,7 +17,6 @@

    • Traces

      -
      @@ -31,7 +29,6 @@

    • Activity Instances

      -
      @@ -44,7 +41,6 @@

    • Activities

      -
      diff --git a/src/components/Header.vue b/src/components/Header.vue index 3ef676a..69283de 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -75,7 +75,11 @@ export default { }, }, mounted() { - this.$route.name === 'Login' || this.$route.name === 'NotFound404' ? this.showMember = false : this.showMember = true; + if (this.$route.name === 'Login' || this.$route.name === 'NotFound404') { + this.showMember = false + } else { + this.showMember = true; + } } } diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index 5402b6e..c53f0e4 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -24,22 +24,6 @@
      - -
      Import @@ -54,7 +38,6 @@ :disabled="disabledSave" @click="saveModal"> Save -
      @@ -122,16 +105,16 @@ export default { case 'Map': case 'CheckMap': // 沒有 filter Id, 沒有暫存 tempFilterId Id 就不能存檔 - return this.tempFilterId ? false : true; + return !this.tempFilterId; case 'Conformance': case 'CheckConformance': - return this.conformanceFilterTempCheckId || this.conformanceLogTempCheckId ? false : true; + return !(this.conformanceFilterTempCheckId || this.conformanceLogTempCheckId); } }, showIcon: function() { let result = true; - result = ['FILES', 'UPLOAD'].includes(this.navViewName) ? false : true; + result = !['FILES', 'UPLOAD'].includes(this.navViewName); return result; }, noShowSaveButton: function() { @@ -157,7 +140,7 @@ export default { if(this.$route.params.type === 'filter') { this.createFilterId= this.$route.params.fileId; } - this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer') ? true : false; + this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer'); this.getNavViewName(); }, methods: { @@ -251,9 +234,12 @@ export default { break; case 'COMPARE': switch(name) { + case 'dummy': case 'CompareDashboard': valueToSet = 'DASHBOARD'; break; + default: + break; } break; } @@ -274,7 +260,6 @@ export default { */ async saveModal() { // 協助判斷 MAP, CONFORMANCE 儲存有「送出」或「取消」。 - let isSaved; // 傳給 Map，通知 Sidebar 要關閉。 this.$emitter.emit('saveModal', false); diff --git a/src/components/Search.vue b/src/components/Search.vue index 28fa343..75c553d 100644 --- a/src/components/Search.vue +++ b/src/components/Search.vue @@ -1,7 +1,9 @@
      • Trace