refactor NavBar.vue

This commit is contained in:
Cindy Chang
2024-07-22 13:52:48 +08:00
parent 258a25972a
commit adcdb2bdc0
10 changed files with 67 additions and 76 deletions

View File

@@ -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',

View File

@@ -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";

View File

@@ -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';

View File

@@ -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();
} }
}; };

View File

@@ -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;
} }

View File

@@ -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) {

View File

@@ -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';

View File

@@ -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 方塊表示顏色

View File

@@ -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"
/> />

View File

@@ -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 !== '');