From 1f0a6aa900050c20e6fa572411eb741cde60a434 Mon Sep 17 00:00:00 2001 From: chiayin Date: Wed, 29 Nov 2023 16:47:25 +0800 Subject: [PATCH] feat: Conformance Save Log Done. --- .../Conformance/ConformanceResults.vue | 8 +- .../Conformance/ConformanceSidebar.vue | 225 +++++++++++++++++- .../ConformanceSidebar/ActList.vue | 3 + .../ConformanceSidebar/ResultArrow.vue | 15 +- .../ConformanceSidebar/ResultCheck.vue | 3 + .../Discover/Conformance/StatusBar.vue | 20 +- src/components/Header.vue | 1 - src/components/Navbar.vue | 82 +++++-- src/module/alertModal.js | 93 +++++++- src/router/index.js | 14 ++ src/stores/conformance.js | 97 +++++++- src/stores/files.js | 68 +++++- src/views/Discover/Conformance/index.vue | 56 ++++- src/views/Files/index.vue | 14 +- 14 files changed, 628 insertions(+), 71 deletions(-) diff --git a/src/components/Discover/Conformance/ConformanceResults.vue b/src/components/Discover/Conformance/ConformanceResults.vue index de3996c..36731f5 100644 --- a/src/components/Discover/Conformance/ConformanceResults.vue +++ b/src/components/Discover/Conformance/ConformanceResults.vue @@ -267,9 +267,15 @@ export default { watch: { conformanceTempReportData: { handler: function(newValue) { + if(newValue?.rule && newValue.rule.min) { + this.selectDurationTime = { + min: newValue.rule.min, + max: newValue.rule.max, + } + } this.data = this.setConformanceTempReportData(newValue); }, - } + }, }, methods: { /** diff --git a/src/components/Discover/Conformance/ConformanceSidebar.vue b/src/components/Discover/Conformance/ConformanceSidebar.vue index a133921..942ab04 100644 --- a/src/components/Discover/Conformance/ConformanceSidebar.vue +++ b/src/components/Discover/Conformance/ConformanceSidebar.vue @@ -119,9 +119,9 @@ export default { const loadingStore = LoadingStore(); const conformanceStore = ConformanceStore(); const { isLoading } = storeToRefs(loadingStore); - const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, cfmPtEteWhole, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteWhole, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE, cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteWhole, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected, isEndSelected } = storeToRefs(conformanceStore); + const { selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceAllTasks, cfmPtEteWhole, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteWhole, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE, cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteWhole, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected, isEndSelected, conformanceRuleData, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, conformanceTempReportData } = storeToRefs(conformanceStore); - return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceStore, conformanceAllTasks, cfmPtEteWhole, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteWhole, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE, cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteWhole, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected, isEndSelected } + return { isLoading, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceStore, conformanceAllTasks, cfmPtEteWhole, cfmPtEteStart, cfmPtEteEnd, cfmPtEteSE, cfmPtPStart, cfmPtPEnd, cfmPtPSE, cfmWtEteWhole, cfmWtEteStart, cfmWtEteEnd, cfmWtEteSE, cfmWtPStart, cfmWtPEnd, cfmWtPSE, cfmCtEteWhole, cfmCtEteStart, cfmCtEteEnd, cfmCtEteSE, isStartSelected, isEndSelected, conformanceRuleData, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, conformanceTempReportData } }, data() { return { @@ -396,6 +396,220 @@ export default { watch: { isSubmitData: function(newValue) { this.isSubmitData = newValue; + }, + // 打開 rule 檔要顯示儲存的選項、規則、時間 + conformanceTempReportData: { + handler: function(newValue) { + this.isLoading = true; + setTimeout(() => { + if(newValue !== null) { + const rule = newValue.rule; + + this.isSubmitData = newValue.rule; + this.isSubmit = true; + switch (rule.type) { + case 'contains-tasks': // Rule Type 選 Have activity 的行為 + this.selectedRuleType = 'Have activity'; + this.isSubmitTask = rule.tasks; + break; + case 'start-end': // Rule Type 選 Activity sequence 的行為 + this.selectedRuleType = 'Activity sequence'; + this.isSubmitStartAndEnd = [ + {category: 'Start', task: rule.starts_with}, + {category: 'End', task: rule.ends_with}, + ]; + // this.isSubmitShowDataSeq = this.setSubmitShowData(rule.start, rule.end); + break; + case 'directly-follows': // Activity Sequence 選 Sequence 的行為 + this.selectedRuleType = 'Sequence'; + this.selectedMode = 'Directly follows'; + this.isSubmitCfmSeqDirectly = rule.task_seq; + break; + case 'eventually-follows': + this.selectedRuleType = 'Sequence'; + this.selectedMode = 'Eventually follows'; + this.isSubmitCfmSeqEventually = rule.task_seq; + break; + case 'short-loops': + this.selectedRuleType = 'Sequence'; + this.selectedMode = 'Short loop(s)'; + break; + case 'self-loops': + this.selectedRuleType = 'Sequence'; + this.selectedMode = 'Self loop(s)'; + break; + case 'task-duration': // Rule Type 選 Activity duration 的行為 + this.selectedRuleType = 'Activity duration'; + this.isSubmitDurationData = [rule.task]; + this.isSubmitDurationTime = { min: rule.min, max: rule.max}; + break; + case 'processing-time-end-to-end-whole': // Rule Type 選 Processing time 的行為 + this.selectedRuleType = 'Processing time'; + this.selectedProcessScope = 'End to end'; + this.selectedActSeqMore = 'All'; + this.isSubmitTimeCfmPtEteAll = { min: rule.min, max: rule.max}; + break; + case 'processing-time-end-to-end-starts-with': + this.selectedRuleType = 'Processing time'; + this.selectedProcessScope = 'End to end'; + this.selectedActSeqMore = 'Start'; + this.isSubmitCfmPtEteStart = [ + {category: 'Start', task: rule.task} + ]; + this.isSubmitTimeCfmPtEteStart = { min: rule.min, max: rule.max}; + break; + case 'processing-time-end-to-end-ends-with': + this.selectedRuleType = 'Processing time'; + this.selectedProcessScope = 'End to end'; + this.selectedActSeqMore = 'End'; + this.isSubmitCfmPtEteEnd = [ + {category: 'End', task: rule.task} + ]; + this.isSubmitTimeCfmPtEteEnd = { min: rule.min, max: rule.max}; + break; + case 'processing-time-end-to-end-start-end': + this.selectedRuleType = 'Processing time'; + this.selectedProcessScope = 'End to end'; + this.selectedActSeqMore = 'Start & End'; + this.isSubmitCfmPtEteSE = [ + {category: 'Start', task: rule.start}, + {category: 'End', task: rule.end} + ]; + this.isSubmitTimeCfmPtEteSE = { min: rule.min, max: rule.max}; + // this.isSubmitShowDataPtEte = this.setSubmitShowData(rule.start, rule.end); + break; + case 'processing-time-partial-starts-with': + this.selectedRuleType = 'Processing time'; + this.selectedProcessScope = 'Partial'; + this.selectedActSeqFromTo = 'From'; + this.isSubmitCfmPtPStart = [ + {category: 'From', task: rule.task} + ]; + this.isSubmitTimeCfmPtPStart = { min: rule.min, max: rule.max}; + break; + case 'processing-time-partial-ends-with': + this.selectedRuleType = 'Processing time'; + this.selectedProcessScope = 'Partial'; + this.selectedActSeqFromTo = 'To'; + this.isSubmitCfmPtPEnd = [ + {category: 'To', task: rule.task} + ]; + this.isSubmitTimeCfmPtPEnd = { min: rule.min, max: rule.max}; + break; + case 'processing-time-partial-start-end': + this.selectedRuleType = 'Processing time'; + this.selectedProcessScope = 'Partial'; + this.selectedActSeqFromTo = 'From & To'; + this.isSubmitCfmPtPSE = [ + {category: 'From', task: rule.start}, + {category: 'To', task: rule.end} + ]; + this.isSubmitTimeCfmPtPSE = { min: rule.min, max: rule.max}; + this.isSubmitShowDataPtP = this.setSubmitShowData(rule.start, rule.end); + break; + case 'waiting-time-end-to-end-whole': // Rule Type 選 Waiting time 的行為 + this.selectedRuleType = 'Waiting time'; + this.selectedProcessScope = 'End to end'; + this.selectedActSeqMore = 'All'; + this.isSubmitTimeCfmWtEteAll = { min: rule.min, max: rule.max}; + break; + case 'waiting-time-end-to-end-starts-with': + this.selectedRuleType = 'Waiting time'; + this.selectedProcessScope = 'End to end'; + this.selectedActSeqMore = 'Start'; + this.isSubmitCfmWtEteStart = [ + {category: 'Start', task: rule.task} + ]; + this.isSubmitTimeCfmWtEteStart = { min: rule.min, max: rule.max}; + break; + case 'waiting-time-end-to-end-ends-with': + this.selectedRuleType = 'Waiting time'; + this.selectedProcessScope = 'End to end'; + this.selectedActSeqMore = 'End'; + this.isSubmitCfmWtEteEnd = [ + {category: 'End', task: rule.task} + ]; + this.isSubmitTimeCfmWtEteEnd = { min: rule.min, max: rule.max}; + break; + case 'waiting-time-end-to-end-start-end': + this.selectedRuleType = 'Waiting time'; + this.selectedProcessScope = 'End to end'; + this.selectedActSeqMore = 'Start & End'; + this.isSubmitCfmWtEteSE = [ + {category: 'Start', task: rule.start}, + {category: 'End', task: rule.end} + ]; + this.isSubmitTimeCfmWtEteSE = { min: rule.min, max: rule.max}; + this.isSubmitShowDataWtEte = this.setSubmitShowData(rule.start, rule.end); + break; + case 'waiting-time-partial-starts-with': + this.selectedRuleType = 'Waiting time'; + this.selectedProcessScope = 'Partial'; + this.selectedActSeqFromTo = 'From'; + this.isSubmitCfmWtPStart = [ + {category: 'From', task: rule.task} + ]; + this.isSubmitTimeCfmWtPStart = { min: rule.min, max: rule.max}; + break; + case 'waiting-time-partial-ends-with': + this.selectedRuleType = 'Waiting time'; + this.selectedProcessScope = 'Partial'; + this.selectedActSeqFromTo = 'To'; + this.isSubmitCfmWtPEnd = [ + {category: 'To', task: rule.task} + ]; + this.isSubmitTimeCfmWtPEnd = { min: rule.min, max: rule.max}; + break; + case 'waiting-time-partial-start-end': + this.selectedRuleType = 'Waiting time'; + this.selectedProcessScope = 'Partial'; + this.selectedActSeqFromTo = 'From & To'; + this.isSubmitCfmWtPSE = [ + {category: 'From', task: rule.start}, + {category: 'To', task: rule.end} + ]; + this.isSubmitTimeCfmWtPSE = { min: rule.min, max: rule.max}; + this.isSubmitShowDataWtP = this.setSubmitShowData(rule.start, rule.end); + break; + case 'cycle-time-end-to-end-whole': // Rule Type 選 Cycle time 的行為 + this.selectedRuleType = 'Cycle time'; + this.selectedProcessScope = 'End to end'; + this.selectedActSeqMore = 'All'; + this.isSubmitTimeCfmCtEteAll = { min: rule.min, max: rule.max}; + break; + case 'cycle-time-end-to-end-starts-with': + this.selectedRuleType = 'Cycle time'; + this.selectedProcessScope = 'End to end'; + this.selectedActSeqMore = 'Start'; + this.isSubmitCfmCtEteStart = [ + {category: 'Start', task: rule.task} + ]; + this.isSubmitTimeCfmCtEteStart = { min: rule.min, max: rule.max}; + break; + case 'cycle-time-end-to-end-ends-with': + this.selectedRuleType = 'Cycle time'; + this.selectedProcessScope = 'End to end'; + this.selectedActSeqMore = 'End'; + this.isSubmitCfmCtEteEnd = [ + {category: 'End', task: rule.task} + ]; + this.isSubmitTimeCfmCtEteEnd = { min: rule.min, max: rule.max}; + break; + case 'cycle-time-end-to-end-start-end': + this.selectedRuleType = 'Cycle time'; + this.selectedProcessScope = 'End to end'; + this.selectedActSeqMore = 'Start & End'; + this.isSubmitCfmCtEteSE = [ + {category: 'Start', task: rule.start}, + {category: 'End', task: rule.end} + ]; + this.isSubmitTimeCfmCtEteSE = { min: rule.min, max: rule.max}; + this.isSubmitShowDataCt = this.setSubmitShowData(rule.start, rule.end); + break; + } + } + }, 200); + } } }, methods: { @@ -675,8 +889,6 @@ export default { this.isSubmitTimeCfmPtEteSE = this.selectDurationTime; this.isSubmitShowDataPtEte = this.setSubmitShowData(this.selectCfmPtEteSEStart, this.selectCfmPtEteSEEnd); break; - default: - break; }; break; case 'Partial': @@ -899,8 +1111,6 @@ export default { break; }; break; - default: - break; }; if(data.min > data.max) return this.$toast.error('Please check time range setting.'); if(JSON.stringify(data) === JSON.stringify(this.isSubmitData)) return this.$toast.error('Please set the new rule.'); @@ -908,6 +1118,7 @@ export default { this.isLoading = true; this.isSubmit = true; this.isSubmitData = data; // 已 Apply 後，沒有重新改變規則的 Data + this.conformanceRuleData = data; // 給存檔的 Data await this.conformanceStore.addConformanceCheckId(data); await this.conformanceStore.getConformanceReport(); this.isShowBar = false; @@ -918,7 +1129,7 @@ export default { }, }, created() { - this.isShowBar = true; + this.isShowBar = this.conformanceLogCreateCheckId || this.conformanceFilterCreateCheckId ? false : true; // 選取 list 的結果 this.$emitter.on('actListData', (data) => { this.selectConformanceTask = data; diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue b/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue index 290cc31..a4ea585 100644 --- a/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue +++ b/src/components/Discover/Conformance/ConformanceSidebar/ActList.vue @@ -27,6 +27,9 @@ export default { }, immediate: true, // 立即執行一次排序 }, + select: function(newValue) { + this.actList = newValue; + } }, methods: { actListData() { diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue b/src/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue index dcefbe9..6f1ca91 100644 --- a/src/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue +++ b/src/components/Discover/Conformance/ConformanceSidebar/ResultArrow.vue @@ -11,6 +11,19 @@ diff --git a/src/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue b/src/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue index 91a7047..f362611 100644 --- a/src/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue +++ b/src/components/Discover/Conformance/ConformanceSidebar/ResultCheck.vue @@ -20,6 +20,9 @@ export default { watch: { data: function(newValue) { this.datadata = newValue; + }, + select: function(newValue) { + this.datadata = newValue; } }, created() { diff --git a/src/components/Discover/Conformance/StatusBar.vue b/src/components/Discover/Conformance/StatusBar.vue index 75ed8e8..7878fd2 100644 --- a/src/components/Discover/Conformance/StatusBar.vue +++ b/src/components/Discover/Conformance/StatusBar.vue @@ -148,15 +148,23 @@ export default { } }, async mounted() { - if(this.$route.params.type === 'log') this.logId = this.$route.params.fileId; - switch (this.$route.params.type) { + let params = this.$route.params; + + switch (params.type) { case 'log': - this.logId = this.$route.params.fileId; + this.logId = params.fileId; break; case 'filter': - this.createFilterId = this.$route.params.fileId; - break; - default: + this.createFilterId = params.fileId; + break; + case 'rule': + switch (params.checkType) { + case 'log': + this.logId = params.checkFileId; + break; + case 'filter': + this.createFilterId = params.checkFileId; + } break; } await this.allMapDataStore.getAllMapData(); diff --git a/src/components/Header.vue b/src/components/Header.vue index 20f5079..3ff4362 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -24,7 +24,6 @@ import loginStore from '@/stores/login.js'; import DspLogo from '@/components/icons/DspLogo.vue'; import IconMember from '@/components/icons/IconMember.vue'; import AllMapDataStore from '@/stores/allMapData.js'; -import { logoutLeave } from '@/module/alertModal.js'; export default { data() { diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index b5f002d..4a373d4 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -48,11 +48,27 @@ import { storeToRefs } from 'pinia'; import filesStore from '@/stores/files.js'; import AllMapDataStore from '@/stores/allMapData.js'; +import ConformanceStore from '@/stores/conformance.js'; import IconSearch from '@/components/icons/IconSearch.vue'; import IconSetting from '@/components/icons/IconSetting.vue'; import { saveFilter, savedSuccessfully } from '@/module/alertModal.js'; export default { + setup() { + const store = filesStore(); + const allMapDataStore = AllMapDataStore(); + const conformanceStore = ConformanceStore(); + const { logId, tempFilterId, createFilterId, filterName, postRuleData, isUpdataFilter } = storeToRefs(allMapDataStore); + const { conformanceRuleData, conformanceLogId, conformanceFilterId, conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, isUpdataConformance, conformanceFileName } = storeToRefs(conformanceStore); + + return { store, allMapDataStore, logId, tempFilterId, createFilterId, filterName, postRuleData, isUpdataFilter, conformanceStore, conformanceRuleData, conformanceLogId, conformanceFilterId, conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, isUpdataConformance, conformanceFileName } + }, + components: { + IconSearch, + IconSetting, + saveFilter, + savedSuccessfully + }, data() { return { showNavbarBreadcrumb: false, @@ -67,9 +83,16 @@ export default { }; }, computed: { - // 沒有 filter Id, 沒有暫存 tempFilterId Id 就不能存檔 disabledSave: function () { - return this.tempFilterId ? false : true; + switch (this.$route.name) { + case 'Map': + case 'CheckMap': + // 沒有 filter Id, 沒有暫存 tempFilterId Id 就不能存檔 + return this.tempFilterId ? false : true; + case 'Conformance': + case 'CheckConformance': + return this.conformanceFilterTempCheckId || this.conformanceLogTempCheckId ? false : true; + } } }, watch: { @@ -78,19 +101,6 @@ export default { this.filterName = newVal; }, }, - setup() { - const store = filesStore(); - const allMapDataStore = AllMapDataStore(); - const { logId, tempFilterId, createFilterId, filterName, postRuleData, isUpdataFilter } = storeToRefs(allMapDataStore); - - return { store, allMapDataStore, logId, tempFilterId, createFilterId, filterName, postRuleData, isUpdataFilter} - }, - components: { - IconSearch, - IconSetting, - saveFilter, - savedSuccessfully - }, mounted() { if(this.$route.params.type === 'filter') this.createFilterId= this.$route.params.fileId; this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false; @@ -125,17 +135,37 @@ export default { async saveModal() { // 傳給 Map，通知 Sidebar 要關閉。 this.$emitter.emit('saveModal', false); - // 先判斷有沒有 filter Id，有就儲存 return，沒有就往下走 - // 沒有 filter Id, 有暫存 tempFilterId Id 可以另存新檔 - if(this.createFilterId) { - await this.allMapDataStore.updataFilter(); - if(this.isUpdataFilter) await savedSuccessfully(this.filterName); - this.tempFilterId = null; - }else if(this.logId){ - await saveFilter(this.allMapDataStore.addFilterId); - // 存檔後為 filterID，換網址不跳頁，使用 push 記錄歷史路由 - await this.$router.push(`/discover/map/filter/${this.createFilterId}`); - }; + // 判斷在哪個子頁面 + switch (this.$route.name) { + case 'Map': + // 先判斷有沒有 filter Id，有就儲存 return，沒有就往下走 + // 沒有 filter Id, 有暫存 tempFilterId Id 可以另存新檔 + if(this.createFilterId) { + await this.allMapDataStore.updataFilter(); + if(this.isUpdataFilter) await savedSuccessfully(this.filterName); + this.tempFilterId = null; + }else if(this.logId){ + await saveFilter(this.allMapDataStore.addFilterId); + // 存檔後為 filterID，換網址不跳頁，使用 push 記錄歷史路由 + await this.$router.push(`/discover/map/filter/${this.createFilterId}`); + }; + break; + case 'Conformance': + case 'CheckMap': + case 'CheckConformance': + // 先判斷有沒有 check Id，有就儲存 return，沒有就往下走 + // 沒有 check Id, 有暫存 temp Id 可以另存新檔 + if(this.conformanceFilterCreateCheckId || this.conformanceLogCreateCheckId){ + await this.conformanceStore.updataConformance(); + if(this.isUpdataConformance) await savedSuccessfully(this.conformanceFileName); + } else { + await saveFilter(this.conformanceStore.addConformanceCreateCheckId); + // 存檔後為 checkID，換網址不跳頁，使用 push 記錄歷史路由 + if(this.conformanceLogId) await this.$router.push(`/rule/log/${this.conformanceLogCreateCheckId}/conformance/${this.conformanceLogId}`); + else if(this.conformanceFilterId) await this.$router.push(`/rule/filter/${this.conformanceFilterCreateCheckId}/conformance/${this.conformanceFilterId}`); + } + break; + } } }, } diff --git a/src/module/alertModal.js b/src/module/alertModal.js index b0624d5..5a5bd44 100644 --- a/src/module/alertModal.js +++ b/src/module/alertModal.js @@ -1,5 +1,6 @@ import Swal from 'sweetalert2'; import AllMapDataStore from '@/stores/allMapData.js'; +import ConformanceStore from '@/stores/conformance.js'; import LoginStore from '@/stores/login.js'; const customClass = { @@ -12,18 +13,20 @@ const customClass = { confirmButton: '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px]', cancelButton: '!inline-block !rounded-full !text-sm !font-medium !text-center !align-middle !transition-colors !duration-300 !px-5 !py-2 !w-[100px] !h-[40px] ', }; - -// 帶入參數 pinia aciton this.sweetVal +/** + * Map Saved + * @param { function } addFilterId + */ export async function saveFilter(addFilterId) { - let filterName = ''; + let fileName = ''; const { value, isConfirmed } = await Swal.fire({ title: 'SAVE NEW FILTER', input: 'text', inputPlaceholder: 'Enter Filter Name.', - inputValue: filterName, + inputValue: fileName, inputValidator: (value) => { if (!value) return 'You need to write something!'; - filterName = value; + fileName = value; }, icon: 'info', iconHtml: 'cloud_upload', @@ -35,13 +38,16 @@ export async function saveFilter(addFilterId) { customClass: customClass, }); // 存檔成功 - if(isConfirmed) await addFilterId(filterName); + if(isConfirmed) await addFilterId(fileName); // 顯示儲存完成 if (value) savedSuccessfully(value); // 清空欄位 - filterName = ''; + fileName = ''; } - +/** + * Saved Success + * @param { string } value + */ export async function savedSuccessfully(value) { value = value ? value : ''; await Swal.fire({ @@ -54,7 +60,12 @@ export async function savedSuccessfully(value) { customClass: customClass }) }; - +/** + * leave Map page + * @param { function } next + * @param { function } addFilterId + * @param { string } toPath + */ export async function leaveFilter(next, addFilterId, toPath) { const allMapDataStore = AllMapDataStore(); const result = await Swal.fire({ @@ -80,7 +91,69 @@ export async function leaveFilter(next, addFilterId, toPath) { next(false); } }; - +/** + * Conformance Saved + * @param { function } addConformanceCreateCheckId + */ +export async function saveConformance(addConformanceCreateCheckId) { + let fileName = ''; + const { value, isConfirmed } = await Swal.fire({ + title: 'SAVE NEW RULE', + input: 'text', + inputPlaceholder: 'Enter Rule Name.', + inputValue: fileName, + inputValidator: (value) => { + if (!value) return 'You need to write something!'; + fileName = value; + }, + icon: 'info', + iconHtml: 'cloud_upload', + iconColor: '#0099FF', + reverseButtons:true, + confirmButtonColor: '#0099FF', + showCancelButton: true, + cancelButtonColor: '#94a3b8', + customClass: customClass, + }); + // 存檔成功 + if(isConfirmed) await addConformanceCreateCheckId(fileName); + // 顯示儲存完成 + if (value) savedSuccessfully(value); + // 清空欄位 + fileName = ''; +} +/** + * leave Conformance page + * @param { function } next + * @param { function } addConformanceCreateCheckId + * @param { string } toPath + */ +export async function leaveConformance(next, addConformanceCreateCheckId, toPath) { + const allMapDataStore = AllMapDataStore(); + const result = await Swal.fire({ + title: 'SAVE YOUR RULE?', + icon: 'warning', + iconColor: '#FF3366', + reverseButtons:true, + confirmButtonText: 'Yes', + confirmButtonColor: '#FF3366', + showCancelButton: true, + cancelButtonText: 'No', + cancelButtonColor: '#94a3b8', + customClass: customClass + }) + if(result.isConfirmed) { + await saveFilter(addConformanceCreateCheckId) + next(toPath); + } else if(result.dismiss === 'cancel') { + ConformanceStore.conformanceFilterTempCheckId = null; + ConformanceStore.conformanceLogTempCheckId = null; + next(toPath); + } else if(result.dismiss === 'backdrop') { + next(false); + } +}; +// 登出 button 規則，暫時沒用到 export async function logoutLeave(addFilterId) { const allMapDataStore = AllMapDataStore(); const loginStore = LoginStore(); diff --git a/src/router/index.js b/src/router/index.js index 9757f64..009ef88 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -58,6 +58,20 @@ const routes = [ name: "Conformance", component: Conformance, }, + { + // type: rule(名稱待討論) + // checkType: log | filter + path: "/:type/:checkType/:checkId/map/:checkFileId", + name: "CheckMap", + component: Map, + props: true, + }, + { + path: "/:type/:checkType/:checkId/conformance/:checkFileId", + name: "CheckConformance", + component: Conformance, + props: true, + }, ] }, ] diff --git a/src/stores/conformance.js b/src/stores/conformance.js index 721232a..5a910b3 100644 --- a/src/stores/conformance.js +++ b/src/stores/conformance.js @@ -10,6 +10,8 @@ export default defineStore('conformanceStore', { conformanceFilterId: null, // filter 檔 conformanceLogTempCheckId: null, // log 檔存檔前的 check Id conformanceFilterTempCheckId: null, // Filter 檔存檔前的 check Id + conformanceLogCreateCheckId: null, // log 檔存檔後的 check Id + conformanceFilterCreateCheckId: null, // Filter 檔存檔後的 check Id allConformanceTask: [], allCfmSeqStart: [], allCfmSeqEnd: [], @@ -32,6 +34,9 @@ export default defineStore('conformanceStore', { infinite404: null, isStartSelected: null, // start & end 連動先選擇 start isEndSelected: null, // start & end 連動先選擇 end + conformanceRuleData: null, // create checkId's data to save + isUpdataConformance: false, // 成功儲存後要跳 Modal + conformanceFileName: null, // 儲存成功的 Modal 用 }), getters: { conformanceAllTasks: state => { @@ -225,11 +230,15 @@ export default defineStore('conformanceStore', { async getConformanceReport() { let logTempCheckId = this.conformanceLogTempCheckId; let filterTempCheckId = this.conformanceFilterTempCheckId; + let logCreateCheckId = this.conformanceLogCreateCheckId; + let filterCreateCheckId = this.conformanceFilterCreateCheckId; let api = ''; - // 先判斷 filter 檔，再判斷 log 檔。 + // 先判斷 Temp 再判斷原 ID；先判斷 filter 檔，再判斷 log 檔。 if(filterTempCheckId !== null) api = `/api/temp-filter-checks/${filterTempCheckId}`; - else api = `/api/temp-log-checks/${logTempCheckId}`; + else if(logTempCheckId !== null) api = `/api/temp-log-checks/${logTempCheckId}`; + else if(filterCreateCheckId !== null) api = `/api/filter-checks/${filterCreateCheckId}`; + else if(logCreateCheckId !== null) api = `/api/log-checks/${logCreateCheckId}`; try { const response = await this.$axios.get(api); @@ -243,12 +252,16 @@ export default defineStore('conformanceStore', { */ async getConformanceIssue(issueNo) { let logTempCheckId = this.conformanceLogTempCheckId; - let filterTempCheckId = this.conformanceFilterTempCheckId + let filterTempCheckId = this.conformanceFilterTempCheckId; + let logCreateCheckId = this.conformanceLogCreateCheckId; + let filterCreateCheckId = this.conformanceFilterCreateCheckId; let api = ''; // 先判斷 filter 檔，再判斷 log 檔。 if(filterTempCheckId !== null) api = `/api/temp-filter-checks/${filterTempCheckId}/issues/${issueNo}`; - else api = `/api/temp-log-checks/${logTempCheckId}/issues/${issueNo}`; + else if(logTempCheckId !== null) api = `/api/temp-log-checks/${logTempCheckId}/issues/${issueNo}`; + else if(filterCreateCheckId !== null) api = `/api/filter-checks/${filterCreateCheckId}/issues/${issueNo}`; + else if(logCreateCheckId !== null) api = `/api/log-checks/${logCreateCheckId}/issues/${issueNo}`; try { const response = await this.$axios.get(api); @@ -262,12 +275,16 @@ export default defineStore('conformanceStore', { */ async getConformanceTraceDetail(issueNo, traceId, start) { let logTempCheckId = this.conformanceLogTempCheckId; - let filterTempCheckId = this.conformanceFilterTempCheckId + let filterTempCheckId = this.conformanceFilterTempCheckId; + let logCreateCheckId = this.conformanceLogCreateCheckId; + let filterCreateCheckId = this.conformanceFilterCreateCheckId; let api = ''; // 先判斷 filter 檔，再判斷 log 檔。 if(filterTempCheckId !== null) api = `/api/temp-filter-checks/${filterTempCheckId}/issues/${issueNo}/traces/${traceId}?start=${start}&page_size=20`; - else api = `/api/temp-log-checks/${logTempCheckId}/issues/${issueNo}/traces/${traceId}?start=${start}&page_size=20`; + else if(logTempCheckId !== null) api = `/api/temp-log-checks/${logTempCheckId}/issues/${issueNo}/traces/${traceId}?start=${start}&page_size=20`; + else if(filterCreateCheckId !== null) api = `/api/filter-checks/${filterCreateCheckId}/issues/${issueNo}/traces/${traceId}?start=${start}&page_size=20`; + else if(logCreateCheckId !== null) api = `/api/log-checks/${logCreateCheckId}/issues/${issueNo}/traces/${traceId}?start=${start}&page_size=20`; try { const response = await this.$axios.get(api); @@ -284,12 +301,16 @@ export default defineStore('conformanceStore', { */ async getConformanceLoop(loopNo) { let logTempCheckId = this.conformanceLogTempCheckId; - let filterTempCheckId = this.conformanceFilterTempCheckId + let filterTempCheckId = this.conformanceFilterTempCheckId; + let logCreateCheckId = this.conformanceLogCreateCheckId; + let filterCreateCheckId = this.conformanceFilterCreateCheckId; let api = ''; // 先判斷 filter 檔，再判斷 log 檔。 if(filterTempCheckId !== null) api = `/api/temp-filter-checks/${filterTempCheckId}/loops/${loopNo}`; - else api = `/api/temp-log-checks/${logTempCheckId}/loops/${loopNo}`; + else if(logTempCheckId !== null) api = `/api/temp-log-checks/${logTempCheckId}/loops/${loopNo}`; + else if(filterCreateCheckId !== null) api = `/api/filter-checks/${filterCreateCheckId}/loops/${loopNo}`; + else if(logCreateCheckId !== null) api = `/api/log-checks/${logCreateCheckId}/loops/${loopNo}`; try { const response = await this.$axios.get(api); @@ -303,12 +324,16 @@ export default defineStore('conformanceStore', { */ async getConformanceLoopsTraceDetail(loopNo, traceId, start) { let logTempCheckId = this.conformanceLogTempCheckId; - let filterTempCheckId = this.conformanceFilterTempCheckId + let filterTempCheckId = this.conformanceFilterTempCheckId; + let logCreateCheckId = this.conformanceLogCreateCheckId; + let filterCreateCheckId = this.conformanceFilterCreateCheckId; let api = ''; // 先判斷 filter 檔，再判斷 log 檔。 if(filterTempCheckId !== null) api = `/api/temp-filter-checks/${filterTempCheckId}/loops/${loopNo}/traces/${traceId}?start=${start}&page_size=20`; - else api = `/api/temp-log-checks/${logTempCheckId}/loops/${loopNo}/traces/${traceId}?start=${start}&page_size=20`; + else if(logTempCheckId !== null) api = `/api/temp-log-checks/${logTempCheckId}/loops/${loopNo}/traces/${traceId}?start=${start}&page_size=20`; + else if(filterCreateCheckId !== null) api = `/api/filter-checks/${filterCreateCheckId}/loops/${loopNo}/traces/${traceId}?start=${start}&page_size=20`; + else if(logCreateCheckId !== null) api = `/api/log-checks/${logCreateCheckId}/loops/${loopNo}/traces/${traceId}?start=${start}&page_size=20`; try { const response = await this.$axios.get(api); @@ -320,5 +345,57 @@ export default defineStore('conformanceStore', { apiError(error, 'Failed to Get the detail of a temporary log conformance loop.'); }; }, + /** + * Add a New Log Conformance Check, Save the log file. + */ + async addConformanceCreateCheckId(value) { + let logId = this.conformanceLogId; + let filterId = this.conformanceFilterId; + let api = ''; + let data = { + name: value, + rule: this.conformanceRuleData + }; + + // 先判斷 filter 檔，再判斷 log 檔。 + if(filterId !== null) api = `/api/filter-checks?filter_id=${filterId}`; + else api = `/api/log-checks?log_id=${logId}`; + + try { + const response = await this.$axios.post(api, data); + if(filterId !== null) { + this.conformanceFilterCreateCheckId = response.data.id; + this.conformanceFilterTempCheckId = null; + } + else { + this.conformanceLogCreateCheckId = response.data.id; + this.conformanceLogTempCheckId= null; + } + }catch(error) { + apiError(error, 'Failed to add the Conformance Check for a file.'); + }; + }, + /** + * Updata an Existing Conformance Check, log and filter + */ + async updataConformance() { + let logCreateCheckId = this.conformanceLogCreateCheckId; + let filterCreateCheckId = this.conformanceFilterCreateCheckId; + let api = ''; + const data = this.conformanceRuleData; + + // 先判斷有無 Temp ID，再判斷原始檔 ID + if(filterCreateCheckId !== null) api = `/api/filter-checks/${filterCreateCheckId}`; + else if(logCreateCheckId !== null) api = `/api/log-checks/${logCreateCheckId}`; + + try { + const response = await this.$axios.put(api, data); + this.isUpdataConformance = response.status === 200; + this.conformanceLogTempCheckId = null; + this.conformanceFilterTempCheckId = null; + }catch(error) { + apiError(error, 'Failed to updata an Existing Conformance.'); + } + }, }, }) diff --git a/src/stores/files.js b/src/stores/files.js index c1827d6..151de49 100644 --- a/src/stores/files.js +++ b/src/stores/files.js @@ -16,6 +16,20 @@ export default defineStore('filesStore', { ownerName: '', } ], + allConformanceLog: [ + { + log: {}, + fileType: '', + ownerName: '', + } + ], + allConformanceFilter: [ + { + filter: {}, + fileType: '', + ownerName: '', + } + ], allEventLog: [ { parentLog: '', @@ -39,7 +53,9 @@ export default defineStore('filesStore', { allFiles: state => { let result = [ ...state.allEventLog, - ...state.allFilter + ...state.allFilter, + ...state.allConformanceLog, + ...state.allConformanceFilter ]; let data = state.switchFilesTagData; let filesTag = state.filesTag; @@ -101,6 +117,56 @@ export default defineStore('filesStore', { apiError(error, 'Failed to load the filters.'); }; }, + /** + * Fetch Conformance Log api + */ + async fetchConformanceLog() { + const api = '/api/log-checks'; + + try { + const response = await axios.get(api); + + this.allConformanceLog = response.data; + this.allConformanceLog.map(o => { + o.icon = 'local_police'; + o.parentLog = o.log.name; + o.fileType = "Rule"; + o.ownerName = o.owner.name; + o.updated_base = o.updated_at; + o.accessed_base = o.accessed_at; + o.updated_at = moment(o.updated_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm'); + o.accessed_at = o.accessed_at ? moment(o.accessed_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm') : null; + }); + if(this.httpStatus < 300) loading.isLoading = false; + } catch(error) { + apiError(error, 'Failed to load the filters.'); + }; + }, + /** + * Fetch Conformance Filter api + */ + async fetchConformanceFilter() { + const api = '/api/filter-checks'; + + try { + const response = await axios.get(api); + + this.allConformancefilter = response.data; + this.allConformancefilter.map(o => { + o.icon = 'local_police'; + o.parentLog = o.filter.name; + o.fileType = "Rule"; + o.ownerName = o.owner.name; + o.updated_base = o.updated_at; + o.accessed_base = o.accessed_at; + o.updated_at = moment(o.updated_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm'); + o.accessed_at = o.accessed_at ? moment(o.accessed_at).utcOffset('+08:00').format('YYYY-MM-DD HH:mm') : null; + }); + if(this.httpStatus < 300) loading.isLoading = false; + } catch(error) { + apiError(error, 'Failed to load the filters.'); + }; + }, // fetchRule(){o.icon = local_police} // fetchDesign(){o.icon = shape_line} }, diff --git a/src/views/Discover/Conformance/index.vue b/src/views/Discover/Conformance/index.vue index 07c3ba5..19c5988 100644 --- a/src/views/Discover/Conformance/index.vue +++ b/src/views/Discover/Conformance/index.vue @@ -1,4 +1,10 @@ diff --git a/src/views/Files/index.vue b/src/views/Files/index.vue index 1723f66..d1dbff9 100644 --- a/src/views/Files/index.vue +++ b/src/views/Files/index.vue @@ -154,7 +154,17 @@ this.$router.push({name: 'Map', params: params}); // this.$router.push({name: 'Map', params: params, query: params}); break; - default: + // 先不考慮 MAP 只做 CONFORMANCE + case 'Rule': + // path: "/:type/:checkType/:checkId/conformance/:checkFileId" + type = 'rule'; + if(file.log){ + params = { type: type, checkType: 'log', checkId: file.id, checkFileId: file.log.id }; + this.$router.push({name: 'CheckConformance', params: params}); + } else if(file.filter) { + params = { type: type, checkType: 'filter', checkId: file.id, checkFileId: file.filter.id }; + this.$router.push({name: 'CheckConformance', params: params}); + } break; } } @@ -162,6 +172,8 @@ mounted() { this.store.fetchEventLog(); this.store.fetchFilter(); + this.store.fetchConformanceLog(); + this.store.fetchConformanceFilter(); } }