Apply repository-wide ESLint auto-fix formatting pass
Co-Authored-By: Codex <codex@openai.com>
This commit is contained in:
@@ -1,32 +1,51 @@
|
||||
<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
|
||||
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>
|
||||
@@ -40,16 +59,16 @@
|
||||
* 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';
|
||||
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();
|
||||
@@ -60,12 +79,15 @@ const acctMgmtStore = useAcctMgmtStore();
|
||||
|
||||
const { logOut } = loginStore;
|
||||
const { tempFilterId } = storeToRefs(allMapDataStore);
|
||||
const { conformanceLogTempCheckId, conformanceFilterTempCheckId } = storeToRefs(conformanceStore);
|
||||
const { conformanceLogTempCheckId, conformanceFilterTempCheckId } =
|
||||
storeToRefs(conformanceStore);
|
||||
const { userData } = storeToRefs(loginStore);
|
||||
const { isAcctMenuOpen } = storeToRefs(acctMgmtStore);
|
||||
|
||||
const loginUserData = ref(null);
|
||||
const currentViewingUserDetail = computed(() => acctMgmtStore.currentViewingUser.detail);
|
||||
const currentViewingUserDetail = computed(
|
||||
() => acctMgmtStore.currentViewingUser.detail,
|
||||
);
|
||||
const isAdmin = ref(false);
|
||||
|
||||
/** Fetches user data and determines if the current user is an admin. */
|
||||
@@ -81,16 +103,21 @@ 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');
|
||||
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');
|
||||
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)) {
|
||||
document.addEventListener("click", (event) => {
|
||||
if (
|
||||
acctMgmtMenu &&
|
||||
acctMgmtButton &&
|
||||
!acctMgmtMenu.contains(event.target) &&
|
||||
!acctMgmtButton.contains(event.target)
|
||||
) {
|
||||
acctMgmtStore.closeAcctMenu();
|
||||
}
|
||||
});
|
||||
@@ -98,19 +125,29 @@ const clickOtherPlacesThenCloseMenu = () => {
|
||||
|
||||
/** Navigates to the Account Admin page. */
|
||||
const onBtnAcctMgmtClick = () => {
|
||||
router.push({name: 'AcctAdmin'});
|
||||
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) {
|
||||
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)
|
||||
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();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user