imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor NavBar.vue

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/Navbar.vue
View File

@@ -272,63 +272,25 @@ export default {
/**
* Save button' modal
*/
async saveModal() {
// 協助判斷 MAP, CONFORMANCE 儲存有「送出」或「取消」。
let isSaved;
// 傳給 Map，通知 Sidebar 要關閉。
this.$emitter.emit('saveModal', false);
// 判斷在哪個子頁面
switch (this.$route.name) {
async saveModal() {
// 協助判斷 MAP, CONFORMANCE 儲存有「送出」或「取消」。
let isSaved;
// 傳給 Map，通知 Sidebar 要關閉。
this.$emitter.emit('saveModal', false);
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);
}
}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;
await this.handleMapSave();
break;
case 'CheckMap':
// 無論 parentLog, parentFilter，做新 filter 皆另存新檔
isSaved = await saveFilter(this.allMapDataStore.addFilterId);
// 存檔後為 filterID，換網址不跳頁，使用 push 記錄歷史路由
if(isSaved) {
this.setActivePage('MAP');
await this.$router.push(`/discover/filter/${this.createFilterId}/map`);
}
break;
await this.handleCheckMapSave();
break;
case 'Conformance':
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 {
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;
await this.handleConformanceSave();
break;
default:
break;
}
},
/**
@@ -339,6 +301,46 @@ export default {
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, [
'setPendingActivePage',
'setPrevioiusPage',

8
src/components/icons/IconChecked.vue
View File

@@ -1,15 +1,15 @@
<template>
<div
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="ImgCheckboxBlueFrame" class="absolute"/>
<img v-if="isChecked" :src="ImgCheckboxCheckedMark" class="absolute top-[11x] left-[2px] h-[16px] w-[14px]"/>
<img v-if="!isChecked" :src="ImgCheckboxGrayFrame" class="absolute" alt="checkbox"/>
<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]" alt="checkbox"/>
</div>
</template>
<script>
import { defineComponent, computed, ref, } from 'vue';
import { defineComponent, computed, } from 'vue';
import ImgCheckboxBlueFrame from "@/assets/icon-blue-checkbox.svg";
import ImgCheckboxCheckedMark from "@/assets/icon-checkbox-checked.svg";
import ImgCheckboxGrayFrame from "@/assets/icon-checkbox-empty.svg";