104 lines
3.4 KiB
Vue
104 lines
3.4 KiB
Vue
<template>
|
|
<ModalContainer />
|
|
<header
|
|
id="header_inside_maincontainer"
|
|
class="sticky inset-x-0 top-0 w-full bg-neutral-10 z-10"
|
|
>
|
|
<Header />
|
|
<Navbar />
|
|
</header>
|
|
<main id="loading_and_router_view_container_in_maincontainer" class="w-full">
|
|
<Loading v-if="loadingStore.isLoading" />
|
|
<router-view></router-view>
|
|
</main>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// The Lucia project.
|
|
// Copyright 2023-2026 DSP, inc. All rights reserved.
|
|
// Authors:
|
|
// chiayin.kuo@dsp.im (chiayin), 2023/1/31
|
|
// cindy.chang@dsp.im (Cindy Chang), 2024/5/30
|
|
// imacat.yang@dsp.im (imacat), 2023/9/23
|
|
/**
|
|
* @module views/MainContainer Main application layout with
|
|
* header, navbar, and router view. Handles unsaved-changes
|
|
* confirmation via onBeforeRouteUpdate.
|
|
*/
|
|
|
|
import { onBeforeMount } from "vue";
|
|
import { useRouter, onBeforeRouteUpdate } from "vue-router";
|
|
import { useLoadingStore } from "@/stores/loading";
|
|
import { usePageAdminStore } from "@/stores/pageAdmin";
|
|
import { useAllMapDataStore } from "@/stores/allMapData";
|
|
import { useConformanceStore } from "@/stores/conformance";
|
|
import { leaveFilter, leaveConformance } from "@/module/alertModal.js";
|
|
import emitter from "@/utils/emitter";
|
|
import Header from "@/components/AppHeader.vue";
|
|
import Navbar from "@/components/AppNavbar.vue";
|
|
import Loading from "@/components/LoadingOverlay.vue";
|
|
import ModalContainer from "./AccountManagement/ModalContainer.vue";
|
|
|
|
const loadingStore = useLoadingStore();
|
|
const pageAdminStore = usePageAdminStore();
|
|
const allMapDataStore = useAllMapDataStore();
|
|
const conformanceStore = useConformanceStore();
|
|
const router = useRouter();
|
|
|
|
/** Sets the highlighted navbar item based on the current URL path on page load. */
|
|
const setHighlightedNavItemOnLanding = () => {
|
|
const currentPath = router.currentRoute.value.path;
|
|
const pathSegments = currentPath
|
|
.split("/")
|
|
.filter((segment) => segment !== "");
|
|
if (pathSegments.length === 1) {
|
|
if (pathSegments[0] === "files") {
|
|
pageAdminStore.setActivePage("ALL");
|
|
}
|
|
} else if (pathSegments.length > 1) {
|
|
pageAdminStore.setActivePage(pathSegments[1].toUpperCase());
|
|
}
|
|
};
|
|
|
|
onBeforeMount(() => {
|
|
setHighlightedNavItemOnLanding();
|
|
});
|
|
|
|
// Handles unsaved-changes confirmation when navigating between routes
|
|
onBeforeRouteUpdate(async (to, from) => {
|
|
pageAdminStore.setPreviousPage(from.name);
|
|
|
|
// When leaving the Map page, check if there is unsaved data
|
|
if (
|
|
(from.name === "Map" || from.name === "CheckMap") &&
|
|
allMapDataStore.tempFilterId
|
|
) {
|
|
// Notify the Map's Sidebar to close
|
|
emitter.emit("leaveFilter", false);
|
|
let blocked = false;
|
|
await leaveFilter(
|
|
(value) => { if (value === false) blocked = true; },
|
|
allMapDataStore.addFilterId,
|
|
to.path,
|
|
);
|
|
if (blocked) return false;
|
|
} else if (
|
|
(from.name === "Conformance" || from.name === "CheckConformance") &&
|
|
(conformanceStore.conformanceLogTempCheckId ||
|
|
conformanceStore.conformanceFilterTempCheckId)
|
|
) {
|
|
let blocked = false;
|
|
await leaveConformance(
|
|
(value) => { if (value === false) blocked = true; },
|
|
conformanceStore.addConformanceCreateCheckId,
|
|
to.path,
|
|
);
|
|
if (blocked) return false;
|
|
} else if (pageAdminStore.shouldKeepPreviousPage) {
|
|
pageAdminStore.clearShouldKeepPreviousPageBoolean();
|
|
} else {
|
|
pageAdminStore.copyPendingPageToActivePage();
|
|
}
|
|
});
|
|
</script>
|