94 lines
3.4 KiB
Vue
94 lines
3.4 KiB
Vue
<template>
|
||
<header class="sticky inset-x-0 top-0 w-full bg-neutral-10 z-10">
|
||
<Header/>
|
||
<Navbar/>
|
||
</header>
|
||
<main class="w-full">
|
||
<Loading v-if="loadingStore.isLoading" />
|
||
<router-view></router-view>
|
||
</main>
|
||
</template>
|
||
|
||
<script>
|
||
import { storeToRefs, mapActions, mapState, } from 'pinia';
|
||
import LoadingStore from '@/stores/loading.js';
|
||
import AllMapDataStore from '@/stores/allMapData.js';
|
||
import ConformanceStore from '@/stores/conformance.js';
|
||
import Header from "@/components/Header.vue";
|
||
import Navbar from "@/components/Navbar.vue";
|
||
import Loading from '@/components/Loading.vue';
|
||
import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
|
||
import PageAdminStore from '@/stores/pageAdmin.js';
|
||
|
||
export default {
|
||
name: 'MainContainer',
|
||
setup() {
|
||
const loadingStore = LoadingStore();
|
||
const allMapDataStore = AllMapDataStore();
|
||
const conformanceStore = ConformanceStore();
|
||
const { tempFilterId, createFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
|
||
const { conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
|
||
|
||
return {
|
||
loadingStore, temporaryData, tempFilterId,
|
||
createFilterId, postRuleData, ruleData,
|
||
conformanceLogTempCheckId, conformanceFilterTempCheckId,
|
||
allMapDataStore, conformanceStore,
|
||
};
|
||
},
|
||
components: {
|
||
Header,
|
||
Navbar,
|
||
Loading
|
||
},
|
||
computed: {
|
||
...mapState(PageAdminStore, [
|
||
'shouldKeepPreviousPage',
|
||
'activePageComputedByRoute'
|
||
]),
|
||
},
|
||
methods: {
|
||
...mapActions(PageAdminStore, [
|
||
'copyPendingPageToActivePage',
|
||
'setPrevioiusPage',
|
||
'clearShouldKeepPreviousPageBoolean',
|
||
'setActivePageComputedByRoute',
|
||
],),
|
||
},
|
||
created() {
|
||
// Save token in Headers.
|
||
const token = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
|
||
this.$http.defaults.headers.common['Authorization'] = `Bearer ${token}`;
|
||
},
|
||
// Rember, Swal modal handling is called before beforeRouteUpdate
|
||
beforeRouteUpdate(to, from, next) {
|
||
// console.log("beforeRouteUpdate", from.name, "to:", to.name);
|
||
this.setPrevioiusPage(from.name);
|
||
|
||
// 離開 Map 頁時判斷是否有無資料和需要存檔
|
||
if ((from.name === 'Map' || from.name === 'CheckMap') && this.tempFilterId) {
|
||
// 傳給 Map，通知 Sidebar 要關閉。
|
||
this.$emitter.emit('leaveFilter', false);
|
||
leaveFilter(next, this.allMapDataStore.addFilterId, to.path)
|
||
} else if((this.$route.name === 'Conformance' || this.$route.name === 'CheckConformance')
|
||
&& (this.conformanceLogTempCheckId || this.conformanceFilterTempCheckId)) {
|
||
leaveConformance(next, this.conformanceStore.addConformanceCreateCheckId, to.path);
|
||
} else if(this.shouldKeepPreviousPage) {
|
||
// pass on and reset boolean for future use
|
||
this.clearShouldKeepPreviousPageBoolean();
|
||
} else {
|
||
// most cases go this road
|
||
|
||
// In this else block:
|
||
// for those pages who don't need popup modals, we handle page administration right now.
|
||
// By calling the following code, we decide the next visiting page.
|
||
// 在這個 else 區塊中：
|
||
// 對於那些不需要彈窗的頁面，我們現在就處理頁面管理。
|
||
// 透過呼叫以下代碼，我們決定出下一個將要走訪的頁面。
|
||
this.copyPendingPageToActivePage();
|
||
next();
|
||
}
|
||
},
|
||
};
|
||
</script>
|