118 lines
3.2 KiB
Vue
118 lines
3.2 KiB
Vue
<template>
|
|
<div id="header.vue" class="mx-auto px-4 h-14 z-50">
|
|
<div class="flex justify-between items-center h-full">
|
|
<figure>
|
|
<DspLogo />
|
|
</figure>
|
|
<div
|
|
class="flex justify-between items-center relative"
|
|
v-show="showMember"
|
|
>
|
|
<img
|
|
id="acct_mgmt_button"
|
|
v-if="!isHeadHovered"
|
|
src="@/assets/icon-head-black.svg"
|
|
@mouseenter="isHeadHovered = true"
|
|
width="32"
|
|
height="32"
|
|
@click="toggleIsAcctMenuOpen"
|
|
class="cursor-pointer z-50"
|
|
alt="user-head"
|
|
/>
|
|
<img
|
|
id="acct_mgmt_button"
|
|
v-else
|
|
src="@/assets/icon-head-blue.svg"
|
|
@mouseleave="isHeadHovered = false"
|
|
width="32"
|
|
height="32"
|
|
@click="toggleIsAcctMenuOpen"
|
|
class="cursor-pointer z-50"
|
|
alt="user-head"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// 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 components/Header Application header with DSP logo and
|
|
* user account menu toggle button.
|
|
*/
|
|
|
|
import { ref, onMounted } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
import { storeToRefs } from "pinia";
|
|
import emitter from "@/utils/emitter";
|
|
import { useLoginStore } from "@/stores/login";
|
|
import { useAcctMgmtStore } from "@/stores/acctMgmt";
|
|
import DspLogo from "@/components/icons/DspLogo.vue";
|
|
import { useAllMapDataStore } from "@/stores/allMapData";
|
|
import { useConformanceStore } from "@/stores/conformance";
|
|
import { leaveFilter, leaveConformance } from "@/module/alertModal.js";
|
|
|
|
const route = useRoute();
|
|
|
|
const store = useLoginStore();
|
|
const { logOut } = store;
|
|
const allMapDataStore = useAllMapDataStore();
|
|
const conformanceStore = useConformanceStore();
|
|
const acctMgmtStore = useAcctMgmtStore();
|
|
const { tempFilterId, temporaryData, postRuleData, ruleData } =
|
|
storeToRefs(allMapDataStore);
|
|
const {
|
|
conformanceLogTempCheckId,
|
|
conformanceFilterTempCheckId,
|
|
conformanceFileName,
|
|
} = storeToRefs(conformanceStore);
|
|
|
|
const isHeadHovered = ref(false);
|
|
const showMember = ref(false);
|
|
|
|
const toggleIsAcctMenuOpen = () => {
|
|
acctMgmtStore.toggleIsAcctMenuOpen();
|
|
};
|
|
|
|
/**
|
|
* Handles logout with unsaved-changes confirmation for Map
|
|
* and Conformance pages.
|
|
*/
|
|
function logOutButton() {
|
|
if (
|
|
(route.name === "Map" || route.name === "CheckMap") &&
|
|
tempFilterId.value
|
|
) {
|
|
// Notify Map to close the Sidebar.
|
|
emitter.emit("leaveFilter", false);
|
|
leaveFilter(false, allMapDataStore.addFilterId, false, logOut);
|
|
} else if (
|
|
(route.name === "Conformance" || route.name === "CheckConformance") &&
|
|
(conformanceLogTempCheckId.value || conformanceFilterTempCheckId.value)
|
|
) {
|
|
leaveConformance(
|
|
false,
|
|
conformanceStore.addConformanceCreateCheckId,
|
|
false,
|
|
logOut,
|
|
);
|
|
} else {
|
|
logOut();
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (route.name === "Login" || route.name === "NotFound404") {
|
|
showMember.value = false;
|
|
} else {
|
|
showMember.value = true;
|
|
}
|
|
});
|
|
</script>
|