134 lines
5.2 KiB
Vue
134 lines
5.2 KiB
Vue
<template>
|
|
<div id="account_menu" v-if="isAcctMenuOpen" class="absolute top-0 w-[232px] bg-white right-[0px] rounded shadow-lg bg-[#ffffff]">
|
|
<div id="greeting" class="w-full border-b border-[#CBD5E1]">
|
|
<span class="m-4 h-[48px]">
|
|
{{ i18next.t("AcctMgmt.hi") }}{{ userData.name }}
|
|
</span>
|
|
</div>
|
|
<ul class="w-full min-h-10">
|
|
<!-- Not using a loop here because SVGs won't display if src is a variable -->
|
|
<li v-if="isAdmin" id="btn_acct_mgmt"
|
|
class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
|
|
items-center" @click="onBtnAcctMgmtClick">
|
|
<span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-crown.svg" alt="accountManagement"></span>
|
|
<span class="flex ml-[8px]">{{i18next.t("AcctMgmt.acctMgmt")}}</span>
|
|
</li>
|
|
<li id="btn_mang_ur_acct"
|
|
class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
|
|
items-center" @click="onBtnMyAccountClick">
|
|
<span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-head-black.svg" alt="head-black"></span>
|
|
<span class="flex ml-[8px]">{{i18next.t("AcctMgmt.mangUrAcct")}}</span>
|
|
</li>
|
|
<li id="btn_logout_in_menu"
|
|
class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
|
|
items-center" @click="onLogoutBtnClick">
|
|
<span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-logout.svg" alt="logout"></span>
|
|
<span class="flex ml-[8px]">{{i18next.t("AcctMgmt.Logout")}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// The Lucia project.
|
|
// Copyright 2024-2026 DSP, inc. All rights reserved.
|
|
// Authors:
|
|
// cindy.chang@dsp.im (Cindy Chang), 2024/5/30
|
|
// imacat.yang@dsp.im (imacat), 2023/9/23
|
|
/**
|
|
* @module components/AccountMenu/AcctMenu Dropdown account menu
|
|
* with links to account management, my account, and logout.
|
|
*/
|
|
|
|
import { computed, onMounted, ref } from 'vue';
|
|
import { storeToRefs } from 'pinia';
|
|
import i18next from '@/i18n/i18n';
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
import { useLoginStore } from '@/stores/login';
|
|
import { useAcctMgmtStore } from '@/stores/acctMgmt';
|
|
import { useAllMapDataStore } from '@/stores/allMapData';
|
|
import { useConformanceStore } from '@/stores/conformance';
|
|
import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
|
|
import emitter from '@/utils/emitter';
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const loginStore = useLoginStore();
|
|
const allMapDataStore = useAllMapDataStore();
|
|
const conformanceStore = useConformanceStore();
|
|
const acctMgmtStore = useAcctMgmtStore();
|
|
|
|
const { logOut } = loginStore;
|
|
const { tempFilterId } = storeToRefs(allMapDataStore);
|
|
const { conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
|
|
const { userData } = storeToRefs(loginStore);
|
|
const { isAcctMenuOpen } = storeToRefs(acctMgmtStore);
|
|
|
|
const loginUserData = ref(null);
|
|
const currentViewingUserDetail = computed(() => acctMgmtStore.currentViewingUser.detail);
|
|
const isAdmin = ref(false);
|
|
|
|
/** Fetches user data and determines if the current user is an admin. */
|
|
const getIsAdminValue = async () => {
|
|
await loginStore.getUserData();
|
|
loginUserData.value = loginStore.userData;
|
|
await acctMgmtStore.getUserDetail(loginUserData.value.username);
|
|
isAdmin.value = acctMgmtStore.currentViewingUser.is_admin;
|
|
};
|
|
|
|
/** Navigates to the My Account page. */
|
|
const onBtnMyAccountClick = async () => {
|
|
acctMgmtStore.closeAcctMenu();
|
|
await acctMgmtStore.getAllUserAccounts(); // in case we haven't fetched yet
|
|
await acctMgmtStore.setCurrentViewingUser(loginUserData.value.username);
|
|
await router.push('/my-account');
|
|
};
|
|
|
|
/** Registers a click listener to close the menu when clicking outside. */
|
|
const clickOtherPlacesThenCloseMenu = () => {
|
|
const acctMgmtButton = document.getElementById('acct_mgmt_button');
|
|
const acctMgmtMenu = document.getElementById('account_menu');
|
|
|
|
document.addEventListener('click', (event) => {
|
|
if (acctMgmtMenu && acctMgmtButton && !acctMgmtMenu.contains(event.target) && !acctMgmtButton.contains(event.target)) {
|
|
acctMgmtStore.closeAcctMenu();
|
|
}
|
|
});
|
|
};
|
|
|
|
/** Navigates to the Account Admin page. */
|
|
const onBtnAcctMgmtClick = () => {
|
|
router.push({name: 'AcctAdmin'});
|
|
acctMgmtStore.closeAcctMenu();
|
|
};
|
|
|
|
/** Handles logout with unsaved-changes confirmation for Map and Conformance pages. */
|
|
const onLogoutBtnClick = () => {
|
|
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();
|
|
}
|
|
};
|
|
|
|
// created
|
|
loginStore.getUserData();
|
|
|
|
// mounted
|
|
onMounted(async () => {
|
|
await getIsAdminValue();
|
|
clickOtherPlacesThenCloseMenu();
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
#account_menu {
|
|
z-index: 2147483648;
|
|
}
|
|
</style>
|