refactor NavBar.vue
This commit is contained in:
@@ -272,63 +272,25 @@ export default {
|
|||||||
/**
|
/**
|
||||||
* Save button' modal
|
* Save button' modal
|
||||||
*/
|
*/
|
||||||
async saveModal() {
|
async saveModal() {
|
||||||
// 協助判斷 MAP, CONFORMANCE 儲存有「送出」或「取消」。
|
// 協助判斷 MAP, CONFORMANCE 儲存有「送出」或「取消」。
|
||||||
let isSaved;
|
let isSaved;
|
||||||
// 傳給 Map,通知 Sidebar 要關閉。
|
// 傳給 Map,通知 Sidebar 要關閉。
|
||||||
this.$emitter.emit('saveModal', false);
|
this.$emitter.emit('saveModal', false);
|
||||||
// 判斷在哪個子頁面
|
|
||||||
switch (this.$route.name) {
|
switch (this.$route.name) {
|
||||||
case 'Map':
|
case 'Map':
|
||||||
// 先判斷有沒有 filter Id,有就儲存 return,沒有就往下走
|
await this.handleMapSave();
|
||||||
// 沒有 filter Id, 有暫存 tempFilterId Id 可以另存新檔
|
break;
|
||||||
if(this.createFilterId) {
|
|
||||||
await this.allMapDataStore.updataFilter();
|
|
||||||
if(this.isUpdataFilter) {
|
|
||||||
await savedSuccessfully(this.filterName);
|
|
||||||
}
|
|
||||||
}else if(this.logId){
|
|
||||||
isSaved = await saveFilter(this.allMapDataStore.addFilterId);
|
|
||||||
// 存檔後為 filterID,換網址不跳頁,使用 push 記錄歷史路由
|
|
||||||
if(isSaved) {
|
|
||||||
this.setActivePage('MAP');
|
|
||||||
await this.$router.push(`/discover/filter/${this.createFilterId}/map`);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
break;
|
|
||||||
case 'CheckMap':
|
case 'CheckMap':
|
||||||
// 無論 parentLog, parentFilter,做新 filter 皆另存新檔
|
await this.handleCheckMapSave();
|
||||||
isSaved = await saveFilter(this.allMapDataStore.addFilterId);
|
break;
|
||||||
// 存檔後為 filterID,換網址不跳頁,使用 push 記錄歷史路由
|
|
||||||
if(isSaved) {
|
|
||||||
this.setActivePage('MAP');
|
|
||||||
await this.$router.push(`/discover/filter/${this.createFilterId}/map`);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 'Conformance':
|
case 'Conformance':
|
||||||
case 'CheckConformance':
|
case 'CheckConformance':
|
||||||
// 先判斷有沒有 check Id,有就儲存 return,沒有就往下走
|
await this.handleConformanceSave();
|
||||||
// 沒有 check Id, 有暫存 temp Id 可以另存新檔
|
break;
|
||||||
if(this.conformanceFilterCreateCheckId || this.conformanceLogCreateCheckId){
|
default:
|
||||||
await this.conformanceStore.updataConformance();
|
break;
|
||||||
if(this.isUpdataConformance) {
|
|
||||||
await savedSuccessfully(this.conformanceFileName);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
isSaved = await saveConformance(this.conformanceStore.addConformanceCreateCheckId);
|
|
||||||
// 存檔後為 checkID,換網址不跳頁,使用 push 記錄歷史路由
|
|
||||||
if(isSaved) {
|
|
||||||
if(this.conformanceLogId) {
|
|
||||||
this.setActivePage('CONFORMANCE');
|
|
||||||
await this.$router.push(`/discover/conformance/log/${this.conformanceLogCreateCheckId}/conformance`);
|
|
||||||
}
|
|
||||||
else if(this.conformanceFilterId) {
|
|
||||||
this.setActivePage('CONFORMANCE');
|
|
||||||
await this.$router.push(`/discover/conformance/filter/${this.conformanceFilterCreateCheckId}/conformance`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
@@ -339,6 +301,46 @@ export default {
|
|||||||
this.setActivePageComputedByRoute(this.$route.matched[this.$route.matched.length - 1].name);
|
this.setActivePageComputedByRoute(this.$route.matched[this.$route.matched.length - 1].name);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
async handleMapSave() {
|
||||||
|
if (this.createFilterId) {
|
||||||
|
await this.allMapDataStore.updataFilter();
|
||||||
|
if (this.isUpdataFilter) {
|
||||||
|
await savedSuccessfully(this.filterName);
|
||||||
|
}
|
||||||
|
} else if (this.logId) {
|
||||||
|
const isSaved = await saveFilter(this.allMapDataStore.addFilterId);
|
||||||
|
if (isSaved) {
|
||||||
|
this.setActivePage('MAP');
|
||||||
|
await this.$router.push(`/discover/filter/${this.createFilterId}/map`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async handleCheckMapSave() {
|
||||||
|
const isSaved = await saveFilter(this.allMapDataStore.addFilterId);
|
||||||
|
if (isSaved) {
|
||||||
|
this.setActivePage('MAP');
|
||||||
|
await this.$router.push(`/discover/filter/${this.createFilterId}/map`);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async handleConformanceSave() {
|
||||||
|
if (this.conformanceFilterCreateCheckId || this.conformanceLogCreateCheckId) {
|
||||||
|
await this.conformanceStore.updataConformance();
|
||||||
|
if (this.isUpdataConformance) {
|
||||||
|
await savedSuccessfully(this.conformanceFileName);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const isSaved = await saveConformance(this.conformanceStore.addConformanceCreateCheckId);
|
||||||
|
if (isSaved) {
|
||||||
|
if (this.conformanceLogId) {
|
||||||
|
this.setActivePage('CONFORMANCE');
|
||||||
|
await this.$router.push(`/discover/conformance/log/${this.conformanceLogCreateCheckId}/conformance`);
|
||||||
|
} else if (this.conformanceFilterId) {
|
||||||
|
this.setActivePage('CONFORMANCE');
|
||||||
|
await this.$router.push(`/discover/conformance/filter/${this.conformanceFilterCreateCheckId}/conformance`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
...mapActions(PageAdminStore, [
|
...mapActions(PageAdminStore, [
|
||||||
'setPendingActivePage',
|
'setPendingActivePage',
|
||||||
'setPrevioiusPage',
|
'setPrevioiusPage',
|
||||||
|
|||||||
@@ -1,15 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="relative two-imgs-container w-[18px] h-[24px] cursor-pointer mt-1 mr-2"> <!--一個relative的div承接兩個absolute的imgs元素-->
|
class="relative two-imgs-container w-[18px] h-[24px] cursor-pointer mt-1 mr-2"> <!--一個relative的div承接兩個absolute的imgs元素-->
|
||||||
<img v-if="!isChecked" :src="ImgCheckboxGrayFrame" class="absolute"/>
|
<img v-if="!isChecked" :src="ImgCheckboxGrayFrame" class="absolute" alt="checkbox"/>
|
||||||
<img v-if="isChecked" :src="ImgCheckboxBlueFrame" class="absolute"/>
|
<img v-if="isChecked" :src="ImgCheckboxBlueFrame" class="absolute" alt="checkbox"/>
|
||||||
<img v-if="isChecked" :src="ImgCheckboxCheckedMark" class="absolute top-[11x] left-[2px] h-[16px] w-[14px]"/>
|
<img v-if="isChecked" :src="ImgCheckboxCheckedMark" class="absolute top-[11x] left-[2px] h-[16px] w-[14px]" alt="checkbox"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { defineComponent, computed, ref, } from 'vue';
|
import { defineComponent, computed, } from 'vue';
|
||||||
import ImgCheckboxBlueFrame from "@/assets/icon-blue-checkbox.svg";
|
import ImgCheckboxBlueFrame from "@/assets/icon-blue-checkbox.svg";
|
||||||
import ImgCheckboxCheckedMark from "@/assets/icon-checkbox-checked.svg";
|
import ImgCheckboxCheckedMark from "@/assets/icon-checkbox-checked.svg";
|
||||||
import ImgCheckboxGrayFrame from "@/assets/icon-checkbox-empty.svg";
|
import ImgCheckboxGrayFrame from "@/assets/icon-checkbox-empty.svg";
|
||||||
|
|||||||
@@ -22,7 +22,6 @@ import 'sweetalert2/dist/sweetalert2.min.css';
|
|||||||
// import PrimeVue
|
// import PrimeVue
|
||||||
import PrimeVue from 'primevue/config';
|
import PrimeVue from 'primevue/config';
|
||||||
import 'primevue/resources/themes/saga-blue/theme.css'; //theme
|
import 'primevue/resources/themes/saga-blue/theme.css'; //theme
|
||||||
// import 'primevue/resources/primevue.min.css'; //core css 官網更新 3.40 後移除基礎樣式
|
|
||||||
import 'primeicons/primeicons.css'; //icons
|
import 'primeicons/primeicons.css'; //icons
|
||||||
import Sidebar from 'primevue/sidebar';
|
import Sidebar from 'primevue/sidebar';
|
||||||
import Button from 'primevue/button';
|
import Button from 'primevue/button';
|
||||||
|
|||||||
@@ -57,10 +57,11 @@ export async function saveFilter(addFilterId, next = null) {
|
|||||||
return true;
|
return true;
|
||||||
} else { // 點擊取消或空白處,為存檔失敗。
|
} else { // 點擊取消或空白處,為存檔失敗。
|
||||||
pageAdminStore.keepPreviousPage();
|
pageAdminStore.keepPreviousPage();
|
||||||
// console.log("現在 pageAdminStore.activePage", pageAdminStore.activePage);
|
|
||||||
|
|
||||||
// Not every time we have nontrivial next value
|
// Not every time we have nontrivial next value
|
||||||
next !== null ? next(false) : 1;
|
if (next !== null) {
|
||||||
|
next(false);
|
||||||
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -106,8 +107,6 @@ export async function leaveFilter(next, addFilterId, toPath, logOut) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
if(result.isConfirmed) {
|
if(result.isConfirmed) {
|
||||||
// console.log('popup confirm case', );
|
|
||||||
|
|
||||||
if(allMapDataStore.createFilterId) {
|
if(allMapDataStore.createFilterId) {
|
||||||
await allMapDataStore.updataFilter();
|
await allMapDataStore.updataFilter();
|
||||||
if(allMapDataStore.isUpdataFilter) {
|
if(allMapDataStore.isUpdataFilter) {
|
||||||
@@ -503,9 +502,7 @@ export async function leaveAccountManagementToRemind(){
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
if(result.isConfirmed) {
|
if(result.isConfirmed) {
|
||||||
//TODO: Call Pinia Save Backend API
|
|
||||||
} else {
|
} else {
|
||||||
//TODO:
|
|
||||||
modalStore.openModal();
|
modalStore.openModal();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -259,6 +259,7 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
|
await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
|
||||||
isEditable.value = false;
|
isEditable.value = false;
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -635,6 +635,7 @@ console.log("TODO:", datasetsPrimary, )
|
|||||||
};
|
};
|
||||||
break;
|
break;
|
||||||
case 'count':
|
case 'count':
|
||||||
|
default:
|
||||||
primeVueSetOption.scales.x.ticks.precision = 0; // x 軸顯示小數點後 0 位
|
primeVueSetOption.scales.x.ticks.precision = 0; // x 軸顯示小數點後 0 位
|
||||||
primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
|
primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
|
||||||
let value = context.parsed.y;
|
let value = context.parsed.y;
|
||||||
@@ -1210,6 +1211,7 @@ console.log("TODO:", datasetsPrimary, )
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
switch (xUnit) {
|
switch (xUnit) {
|
||||||
|
case 'dummy': //sonar-qube
|
||||||
case 'date':
|
case 'date':
|
||||||
default:
|
default:
|
||||||
primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
|
primeVueSetOption.plugins.tooltip.callbacks.label = function(context) {
|
||||||
|
|||||||
@@ -55,7 +55,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { onBeforeMount, computed } from 'vue';
|
import { onBeforeMount, computed } from 'vue';
|
||||||
import { storeToRefs } from 'pinia';
|
import { storeToRefs } from 'pinia';
|
||||||
import { useRouter, useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import LoadingStore from '@/stores/loading.js';
|
import LoadingStore from '@/stores/loading.js';
|
||||||
import AllMapDataStore from '@/stores/allMapData.js';
|
import AllMapDataStore from '@/stores/allMapData.js';
|
||||||
|
|||||||
@@ -85,7 +85,6 @@ export default {
|
|||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
|
|
||||||
const customizedScaleOption = computed(() => {});
|
|
||||||
const primeVueSetDataState = ref(null);
|
const primeVueSetDataState = ref(null);
|
||||||
const primeVueSetOptionsState = ref(null);
|
const primeVueSetOptionsState = ref(null);
|
||||||
const colorPrimary = ref('#0099FF');
|
const colorPrimary = ref('#0099FF');
|
||||||
@@ -123,7 +122,7 @@ export default {
|
|||||||
ticks: {
|
ticks: {
|
||||||
...scaleObjectToAlter.x.ticks,
|
...scaleObjectToAlter.x.ticks,
|
||||||
callback: function(value, index) {
|
callback: function(value, index) {
|
||||||
// console.log('根據不同的級距客製化 x 軸的時間刻度');
|
// 根據不同的級距客製化 x 軸的時間刻度
|
||||||
return ticksOfXAxis[index];
|
return ticksOfXAxis[index];
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@@ -173,13 +172,9 @@ export default {
|
|||||||
let datasetsSecondary; // For Compare page case
|
let datasetsSecondary; // For Compare page case
|
||||||
let minX = chartData?.x_axis?.min;
|
let minX = chartData?.x_axis?.min;
|
||||||
let maxX = chartData?.x_axis?.max;
|
let maxX = chartData?.x_axis?.max;
|
||||||
let maxY = chartData?.y_axis?.max;
|
|
||||||
let xData;
|
let xData;
|
||||||
let primeVueSetData = {};
|
let primeVueSetData = {};
|
||||||
let primeVueSetOption = {};
|
let primeVueSetOption = {};
|
||||||
const getMoment = (time)=> {
|
|
||||||
return Moment(time).format('YYYY/M/D hh:mm:ss')
|
|
||||||
};
|
|
||||||
|
|
||||||
// 考慮 chartData.data 的dimension
|
// 考慮 chartData.data 的dimension
|
||||||
// 當我們遇到了 Compare 頁面的案例
|
// 當我們遇到了 Compare 頁面的案例
|
||||||
@@ -253,11 +248,8 @@ export default {
|
|||||||
titleFont: {weight: 'normal'},
|
titleFont: {weight: 'normal'},
|
||||||
callbacks: {
|
callbacks: {
|
||||||
label: function(tooltipItem) {
|
label: function(tooltipItem) {
|
||||||
// 取得顏色
|
|
||||||
const color = tooltipItem.dataset.borderColor;
|
|
||||||
// 取得數據
|
// 取得數據
|
||||||
const label = tooltipItem.dataset.label || '';
|
const label = tooltipItem.dataset.label || '';
|
||||||
const value = tooltipItem.raw || '';
|
|
||||||
|
|
||||||
// 建立一個小方塊顯示顏色
|
// 建立一個小方塊顯示顏色
|
||||||
return `${label}: ${tooltipItem.parsed.y}`; // 使用 Unicode 方塊表示顏色
|
return `${label}: ${tooltipItem.parsed.y}`; // 使用 Unicode 方塊表示顏色
|
||||||
|
|||||||
@@ -118,7 +118,6 @@
|
|||||||
<ul>
|
<ul>
|
||||||
<li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
|
<li class="bg-neutral-10 mb-4 p-1 border border-neutral-300 rounded">
|
||||||
<span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.freq.title }}</span>
|
<span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.freq.title }}</span>
|
||||||
<!-- <Chart type="line" :data="freqData" :options="freqOptions" class="h-96" /> -->
|
|
||||||
<FreqChart v-if="performanceData" :chartData="performanceData?.freq?.cases" :content="contentData?.freq" yUnit="count"
|
<FreqChart v-if="performanceData" :chartData="performanceData?.freq?.cases" :content="contentData?.freq" yUnit="count"
|
||||||
pageName="Performance"
|
pageName="Performance"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -36,7 +36,6 @@ export default {
|
|||||||
const { tempFilterId, createFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
|
const { tempFilterId, createFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
|
||||||
const { conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
|
const { conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
``
|
|
||||||
const setHighlightedNavItemOnLanding = () => {
|
const setHighlightedNavItemOnLanding = () => {
|
||||||
const currentPath = router.currentRoute.value.path;
|
const currentPath = router.currentRoute.value.path;
|
||||||
const pathSegments: string[] = currentPath.split('/').filter(segment => segment !== '');
|
const pathSegments: string[] = currentPath.split('/').filter(segment => segment !== '');
|
||||||
|
|||||||
Reference in New Issue
Block a user