356 lines
12 KiB
Vue
356 lines
12 KiB
Vue
<template>
|
||
<nav id='nav_bar' class="bg-neutral-700">
|
||
<div class="mx-auto px-4" :class="[showNavbarBreadcrumb? 'min-h-12': 'h-12']">
|
||
<div class="flex justify-between items-center flex-wrap relative" v-show="showNavbarBreadcrumb">
|
||
<div id="nav_bar_logged_in" class="flex flex-1 items-center">
|
||
<!-- 回 Files 頁 -->
|
||
<router-link to="/files" class="mr-4" v-if="showIcon" id="backPage">
|
||
<span class="material-symbols-outlined text-neutral-10 !leading-loose">
|
||
arrow_back
|
||
</span>
|
||
</router-link>
|
||
<div>
|
||
<h2 v-if="navViewName !== 'UPLOAD'" class="mr-14 py-3 text-2xl font-black text-neutral-10">{{ navViewName }}</h2>
|
||
<h2 v-else class="mr-14 py-3 text-2xl font-black text-neutral-10">FILES</h2>
|
||
</div>
|
||
<ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer">
|
||
<li @click="onNavItemBtnClick($event, item)"
|
||
v-for="(item, index) in navViewData[navViewName]"
|
||
:key="index" class="nav-item"
|
||
:class="{'active': activePage === item}">
|
||
{{ item }}
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- Files Page: Search and Upload -->
|
||
<div class="flex justify-end items-center" v-if="navViewName === 'FILES'">
|
||
<div id="import_btn" class="btn btn-sm btn-neutral cursor-pointer" @click="uploadModal = true">
|
||
Import
|
||
<UploadModal :visible="uploadModal" @closeModal="uploadModal = $event"></UploadModal>
|
||
</div>
|
||
</div>
|
||
<!-- Upload, Performance, Compare 無按鈕行為 -->
|
||
<div v-else-if="noShowSaveButton"></div>
|
||
<!-- Other Page: Save and Download -->
|
||
<!-- Save 有 data 跳重新命名，沒有 data 跳要不要儲存，沒有動都不跳 -->
|
||
<div v-else class="space-x-4">
|
||
<button class="btn btn-sm" :class="[ disabledSave ? 'btn-disable' : 'btn-neutral']"
|
||
:disabled="disabledSave" @click="saveModal">
|
||
Save
|
||
</button>
|
||
</div>
|
||
<AcctMenu v-if="showNavbarBreadcrumb"/>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</template>
|
||
<script>
|
||
import { storeToRefs, mapState, mapActions, } from 'pinia';
|
||
import filesStore from '@/stores/files.js';
|
||
import AllMapDataStore from '@/stores/allMapData.js';
|
||
import ConformanceStore from '@/stores/conformance.js';
|
||
import PageAdminStore from '@/stores/pageAdmin.js';
|
||
import MapCompareStore from '@/stores/mapCompareStore';
|
||
import IconSearch from '@/components/icons/IconSearch.vue';
|
||
import IconSetting from '@/components/icons/IconSetting.vue';
|
||
import { saveFilter, savedSuccessfully, saveConformance } from '@/module/alertModal.js';
|
||
import UploadModal from './File/UploadModal.vue';
|
||
import AcctMenu from './AccountMenu/AcctMenu.vue';
|
||
|
||
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,
|
||
UploadModal,
|
||
AcctMenu,
|
||
},
|
||
data() {
|
||
return {
|
||
mapCompareStore: MapCompareStore(),
|
||
showNavbarBreadcrumb: false,
|
||
navViewData:
|
||
{
|
||
// 舉例：FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN', 'SIMULATION'],
|
||
FILES: ['ALL', 'DISCOVER', 'COMPARE'],
|
||
// 舉例：DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
|
||
DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE'],
|
||
// 舉例：COMPARE: ['PROCESS MAP', 'DASHBOARD']
|
||
COMPARE: ['MAP', 'PERFORMANCE'],
|
||
'ACCOUNT MANAGEMENT': [],
|
||
'MY ACCOUNT': [],
|
||
},
|
||
navViewName: 'FILES',
|
||
uploadModal: false,
|
||
};
|
||
},
|
||
computed: {
|
||
disabledSave: function () {
|
||
switch (this.$route.name) {
|
||
case 'Map':
|
||
case 'CheckMap':
|
||
// 沒有 filter Id, 沒有暫存 tempFilterId Id 就不能存檔
|
||
return !this.tempFilterId;
|
||
case 'Conformance':
|
||
case 'CheckConformance':
|
||
return !(this.conformanceFilterTempCheckId || this.conformanceLogTempCheckId);
|
||
}
|
||
},
|
||
showIcon: function() {
|
||
let result = true;
|
||
|
||
result = !['FILES', 'UPLOAD'].includes(this.navViewName);
|
||
return result;
|
||
},
|
||
noShowSaveButton: function() {
|
||
return this.navViewName === 'UPLOAD' || this.navViewName === 'COMPARE' ||
|
||
this.navViewName === 'ACCOUNT MANAGEMENT' ||
|
||
this.activePage === 'PERFORMANCE';
|
||
},
|
||
...mapState(PageAdminStore, [
|
||
'activePage',
|
||
'pendingActivePage',
|
||
'activePageComputedByRoute',
|
||
'shouldKeepPreviousPage',
|
||
]),
|
||
},
|
||
watch: {
|
||
'$route':'getNavViewName',
|
||
filterName: function(newVal,) {
|
||
this.filterName = newVal;
|
||
},
|
||
},
|
||
mounted() {
|
||
this.handleNavItemBtn();
|
||
if(this.$route.params.type === 'filter') {
|
||
this.createFilterId= this.$route.params.fileId;
|
||
}
|
||
this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer');
|
||
this.getNavViewName();
|
||
},
|
||
methods: {
|
||
/**
|
||
* switch navbar item
|
||
* @param {event} event 選取 Navbar 選項後傳入的值
|
||
*/
|
||
onNavItemBtnClick(event) {
|
||
let type;
|
||
let fileId;
|
||
let isCheckPage;
|
||
const navItemCandidate = event.target.innerText;
|
||
|
||
this.setPendingActivePage(navItemCandidate);
|
||
|
||
switch (this.navViewName) {
|
||
case 'FILES':
|
||
this.store.filesTag = navItemCandidate;
|
||
break;
|
||
case 'DISCOVER':
|
||
type = this.$route.params.type;
|
||
fileId = this.$route.params.fileId;
|
||
isCheckPage = this.$route.name.includes('Check');
|
||
|
||
switch (navItemCandidate) {
|
||
case 'MAP':
|
||
if(isCheckPage) {
|
||
this.$router.push({name: 'CheckMap', params: { type: type, fileId: fileId }});
|
||
}
|
||
else {
|
||
this.$router.push({name: 'Map', params: { type: type, fileId: fileId }});
|
||
}
|
||
break;
|
||
case 'CONFORMANCE':
|
||
if(isCheckPage) { // Beware of Swal popup, it might disturb which is the current active page
|
||
this.$router.push({name: 'CheckConformance', params: { type: type, fileId: fileId }});
|
||
}
|
||
else { // Beware of Swal popup, it might disturb which is the current active page
|
||
this.$router.push({name: 'Conformance', params: { type: type, fileId: fileId }});
|
||
}
|
||
break
|
||
case 'PERFORMANCE':
|
||
if(isCheckPage) {
|
||
this.$router.push({name: 'CheckPerformance', params: { type: type, fileId: fileId }});
|
||
}
|
||
else {
|
||
this.$router.push({name: 'Performance', params: { type: type, fileId: fileId }});
|
||
}
|
||
break;
|
||
}
|
||
break;
|
||
case 'COMPARE':
|
||
switch (navItemCandidate) {
|
||
case 'MAP':
|
||
this.$router.push({name: 'MapCompare', params: this.mapCompareStore.routeParam});
|
||
break;
|
||
case 'PERFORMANCE':
|
||
this.$router.push({name: 'CompareDashboard', params: this.mapCompareStore.routeParam});
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
};
|
||
},
|
||
/**
|
||
* Based on the route.name, decide the navViewName.
|
||
* @returns {string} the string of navigation name to return
|
||
*/
|
||
getNavViewName() {
|
||
|
||
let name = this.$route.name;
|
||
let valueToSet;
|
||
|
||
if(this.$route.name === 'NotFound404') {
|
||
return;
|
||
}
|
||
|
||
// 說明this.$route.matched[1] 表示當前路由匹配的第二個路由記錄
|
||
this.navViewName = this.$route.matched[1].name.toUpperCase();
|
||
this.store.filesTag = 'ALL';
|
||
switch (this.navViewName) {
|
||
case 'FILES':
|
||
valueToSet = this.navItemCandidate;
|
||
break;
|
||
case 'DISCOVER':
|
||
switch (name) {
|
||
case 'Map':
|
||
case 'CheckMap':
|
||
valueToSet = 'MAP';
|
||
break;
|
||
case 'Conformance':
|
||
case 'CheckConformance':
|
||
valueToSet = 'CONFORMANCE';
|
||
break;
|
||
case 'Performance':
|
||
case 'CheckPerformance':
|
||
valueToSet = 'PERFORMANCE';
|
||
break;
|
||
}
|
||
break;
|
||
case 'COMPARE':
|
||
switch(name) {
|
||
case 'dummy':
|
||
case 'CompareDashboard':
|
||
valueToSet = 'DASHBOARD';
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
break;
|
||
}
|
||
|
||
// Frontend is not sure which button will the user press on the modal,
|
||
// so here we need to save to a pending state
|
||
// 前端無法確定用戶稍後會按下彈窗上的哪個按鈕(取消還是確認、儲存)，
|
||
// 因此我們需要將其保存到待處理狀態
|
||
if(!this.shouldKeepPreviousPage) { // 若使用者不是按下取消按鈕或是點選按鈕時
|
||
this.setPendingActivePage(valueToSet);
|
||
}
|
||
|
||
|
||
return valueToSet;
|
||
},
|
||
/**
|
||
* Save button' modal
|
||
*/
|
||
async saveModal() {
|
||
// 協助判斷 MAP, CONFORMANCE 儲存有「送出」或「取消」。
|
||
// 傳給 Map，通知 Sidebar 要關閉。
|
||
this.$emitter.emit('saveModal', false);
|
||
|
||
switch (this.$route.name) {
|
||
case 'Map':
|
||
await this.handleMapSave();
|
||
break;
|
||
case 'CheckMap':
|
||
await this.handleCheckMapSave();
|
||
break;
|
||
case 'Conformance':
|
||
case 'CheckConformance':
|
||
await this.handleConformanceSave();
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
},
|
||
/**
|
||
* Set nav item button background color in case the variable is an empty string
|
||
*/
|
||
handleNavItemBtn() {
|
||
if(this.activePageComputedByRoute === "") {
|
||
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',
|
||
'setActivePage',
|
||
'setActivePageComputedByRoute',
|
||
'setIsPagePendingBoolean',
|
||
],),
|
||
},
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
#searchFiles::-webkit-search-cancel-button{
|
||
appearance: none;
|
||
}
|
||
</style>
|