imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: acct mgmt search bar

Browse Source
This commit is contained in:
Cindy Chang
2024-06-19 10:12:16 +08:00
parent 341fd61d07
commit 80529b85fe
6 changed files with 93 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/AccountMenu/AcctMenu.vue
View File

@@ -1,19 +1,26 @@
<template>
<div id="account_menu" v-show="isAcctMenuOpen" class="absolute top-0 w-[232px] bg-white right-[0px] rounded shadow-lg bg-[#ffffff]">
<span id="greeting" class="m-4 h-[48px]">{{ i18next.t("AcctMgmt.hi") }}</span>
<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">
<!-- 這裡不使用迴圈是因為src值用變數的話會沒辦法顯示svg -->
<li class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
items-center">
<li 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"></span>
<span class="flex ml-[8px]">{{i18next.t("AcctMgmt.acctMgmt")}}</span>
</li>
<li class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
<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">
<span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-head-black.svg"></span>
<span class="flex ml-[8px]">{{i18next.t("AcctMgmt.mangUrAcct")}}</span>
</li>
<li class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
<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">
<span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-logout.svg"></span>
<span class="flex ml-[8px]">{{i18next.t("AcctMgmt.Logout")}}</span>
@@ -25,6 +32,7 @@
<script>
import { mapActions, mapState } from 'pinia';
import i18next from '@/i18n/i18n';
import loginStore from '@/stores/login.js';
import AcctMgmtStore from '@/stores/acctMgmt';
export default {
@@ -34,6 +42,7 @@ export default {
}
},
computed: {
...mapState(loginStore, ['userData']),
...mapState(AcctMgmtStore, ['isAcctMenuOpen']),
},
methods: {
@@ -47,7 +56,14 @@ export default {
}
});
},
...mapActions(AcctMgmtStore, ['openAcctMenu', 'closeAcctMenu']),
onBtnAcctMgmtClick(){
this.$router.push({name: 'AcctAdmin'});
},
...mapActions(loginStore, ['getUserData']),
...mapActions(AcctMgmtStore, ['closeAcctMenu']),
},
created() {
this.getUserData();
},
mounted(){
this.clickOtherPlacesThenCloseMenu();