#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,
@@ -42,13 +42,13 @@ export default defineStore('acctMgmtStore', {
     /**
      * Set related boolean to true
      */
-    openAcctMenu(){
+    openAcctMenu() {
       this.isAcctMenuOpen = true;
     },
     /**
      * Set related boolean to false
      */
-    closeAcctMenu(){
+    closeAcctMenu() {
       this.isAcctMenuOpen = false;
     },
     toggleIsAcctMenuOpen() {
@@ -59,8 +59,7 @@ export default defineStore('acctMgmtStore', {
      * @param {string} username 
      */
     setCurrentViewingUser(username: string) {
-      const userFind:User|undefined = this.allUserAccoutList.find(user => user.username === username);
+      const userFind: User | undefined = this.allUserAccoutList.find(user => user.username === username);
-      console.log('userFind', userFind);
       this.currentViewingUser = userFind || { username: '', detail: {} };
     },
     /**
@@ -88,7 +87,7 @@ export default defineStore('acctMgmtStore', {
         const response = await this.$axios.get(apiGetUserList);
         const customizedResponseData = await this.customizeAllUserList(response.data);
         this.allUserAccoutList = customizedResponseData;
-      } catch(error) {
+      } catch (error) {
         apiError(error, 'Failed to get all users.');
       }
     },
@@ -124,7 +123,7 @@ export default defineStore('acctMgmtStore', {
           this.justCreateUsername = userToCreate.username;
           setTimeout(this.resetJustCreateFlag, JUST_CREATE_ACCOUNT_HOT_DURATION_MINS * 1000 * 60);
         }
-      } catch(error) {
+      } catch (error) {
         apiError(error, 'Failed to add a new account.');
       }
     },
@@ -139,7 +138,7 @@ export default defineStore('acctMgmtStore', {
       try {
         const response = await this.$axios.delete(apiDelete);
         return response.status === 200;
-      } catch(error) {
+      } catch (error) {
         apiError(error, 'Failed to delete the account.');
         return false;
       }
@@ -160,7 +159,7 @@ export default defineStore('acctMgmtStore', {
           is_active: editDetail.is_active,
         });
         return response.status === 200;
-      } catch(error) {
+      } catch (error) {
         apiError(error, 'Failed to edit the account.');
         return false;
       }
@@ -175,7 +174,7 @@ export default defineStore('acctMgmtStore', {
       try {
         const response = await this.$axios.put(apiAddRole);
         return response.status === 200;
-      } catch(error) {
+      } catch (error) {
         apiError(error, 'Failed to add role to the account.');
         return false;
       }
@@ -190,7 +189,7 @@ export default defineStore('acctMgmtStore', {
       try {
         const response = await this.$axios.delete(apiDeleteRole);
         return response.status === 200;
-      } catch(error) {
+      } catch (error) {
         apiError(error, 'Failed to delete a role frome the account.');
         return false;
       }
@@ -209,7 +208,7 @@ export default defineStore('acctMgmtStore', {
           detail: response.data,
         };
         return response.status === 200;
-      } catch(error) {
+      } catch (error) {
         //不需要跳出錯誤，因為如果是錯誤反而是好事，表示帳號是獨一的
         return false;
       }
@@ -261,7 +260,7 @@ export default defineStore('acctMgmtStore', {
     /**
      * Reset isOneAccountJustCreate to false, causing the badge to disappear.
      */
-    resetJustCreateFlag(){
+    resetJustCreateFlag() {
       this.isOneAccountJustCreate = false;
     },
     /** Set the value of shouldUpdateList variable.