#334 fixed v-if=isAdmin

src/components/AccountMenu/AcctMenu.vue

@@ -7,7 +7,7 @@
         </div>
         <ul class="w-full min-h-10">
           <!-- 這裡不使用迴圈是因為src值用變數的話會沒辦法顯示svg -->
-        <li id="btn_acct_mgmt"
+        <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>
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import { computed, } from 'vue';
+import { computed, onMounted, ref, } from 'vue';
 import { mapActions, mapState, storeToRefs } from 'pinia';
 import i18next from '@/i18n/i18n';
 import LoginStore from '@/stores/login.ts';
@@ -42,6 +42,7 @@ import { leaveFilter, leaveConformance } from '@/module/alertModal.js';
 export default {
   setup() {
     const { logOut } = LoginStore();
+    const loginStore = LoginStore();
     const allMapDataStore = AllMapDataStore();
     const conformanceStore = ConformanceStore();
     const acctMgmtStore = AcctMgmtStore();
@@ -49,11 +50,31 @@ export default {
     const { conformanceLogTempCheckId } = storeToRefs(conformanceStore);
 
     const isAcctMenuOpen = computed(() => acctMgmtStore.isAcctMenuOpen);
+    const loginUserData = ref(null);
+    const currentViewingUserDetail = computed(() => acctMgmtStore.currentViewingUser.detail);
+    const isAdmin = ref(false);
 
-    return { logOut, tempFilterId,
+    const getIsAdminValue = async () => {
+        await loginStore.getUserData();
+        loginUserData.value = loginStore.userData;
+        await acctMgmtStore.getUserDetail(loginUserData.value.username);
+        if(currentViewingUserDetail.value.roles.find(role => role.code === 'admin')) {
+          isAdmin.value = true;
+        }
+      };
+
+    onMounted(async () => { 
+        await getIsAdminValue();
+    });
+    
+    return {
+      logOut,
+      tempFilterId,
       conformanceLogTempCheckId,
-      allMapDataStore, conformanceStore,
+      allMapDataStore,
+      conformanceStore,
       isAcctMenuOpen,
+      isAdmin,
     };
   },
   data() {

src/components/Header.vue

@@ -41,7 +41,6 @@ export default {
     const { conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceFileName } = storeToRefs(conformanceStore);
 
     const toggleIsAcctMenuOpen = () => {
-      console.log('head clicked', );
       acctMgmtStore.toggleIsAcctMenuOpen();
     }
 

src/stores/acctMgmt.ts

@@ -28,7 +28,7 @@ export default defineStore('acctMgmtStore', {
     isAcctMenuOpen: false,
     currentViewingUser: {
       username: '',
-      detail: {} as EditDetail,
+      detail: {},
     } as User,
     response: {
       deleteAccount: null,
@@ -60,7 +60,6 @@ export default defineStore('acctMgmtStore', {
      */
     setCurrentViewingUser(username: string) {
       const userFind: User | undefined = this.allUserAccoutList.find(user => user.username === username);
-      console.log('userFind', userFind);
       this.currentViewingUser = userFind || { username: '', detail: {} };
     },
     /**