From d254cb7e547ac39b44b62ee4383889e0f73d0ca1 Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Tue, 24 Dec 2024 23:05:57 +0800
Subject: [PATCH] add roles label

---
 frontend/src/components/UserInfoButton.vue | 12 +++++++++++-
 frontend/src/pages/UserManagement.vue      |  4 +---
 frontend/src/stores/useAuthStore.ts        |  2 +-
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/UserInfoButton.vue b/frontend/src/components/UserInfoButton.vue
index ac98544..895f604 100644
--- a/frontend/src/components/UserInfoButton.vue
+++ b/frontend/src/components/UserInfoButton.vue
@@ -10,6 +10,11 @@
           <div class="text-grey-7 ellipsis text-caption q-mb-sm full-width">{{ userInfo.email }}</div>
         </div>
       </div>
+      <div class="row q-pb-sm q-px-md">
+        <q-chip v-if="authStore.isSuperAdmin" square color="accent" text-color="white" icon="admin_panel_settings"
+            label="システム管理者" size="sm" />
+        <q-chip v-else v-for="(item) in roles" square class="role-label" color="primary" text-color="white" :key="item.id" :label="item.name" size="sm" />
+      </div>
       <div class="row q-pb-sm q-px-md">
         <q-btn outline color="negative" icon="logout" label="Logout" @click="authStore.logout()" class="full-width"  size="sm" v-close-popup />
       </div>
@@ -23,5 +28,10 @@ import { computed } from 'vue';
 const authStore = useAuthStore();
 
 const userInfo = computed(() => authStore.userInfo);
-
+const roles = computed(() => authStore.roles);
 </script>
+<style lang="scss" scoped>
+.role-label {
+  margin: 2px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/pages/UserManagement.vue b/frontend/src/pages/UserManagement.vue
index 73a7597..90b26eb 100644
--- a/frontend/src/pages/UserManagement.vue
+++ b/frontend/src/pages/UserManagement.vue
@@ -37,9 +37,7 @@
           <div class="row">
             <q-chip v-if="(props.row as IUserRolesDisplay).isSuperuser" square color="accent" text-color="white" icon="admin_panel_settings"
               label="システム管理者" size="sm" />
-              <template v-else>
-                <q-chip v-for="(item) in (props.row as IUserRolesDisplay).roles" square color="primary" text-color="white" :key="item.id" :label="item.name" size="sm" />
-              </template>
+            <q-chip v-else v-for="(item) in (props.row as IUserRolesDisplay).roles" square color="primary" text-color="white" :key="item.id" :label="item.name" size="sm" />
           </div>
         </q-td>
       </template>
diff --git a/frontend/src/stores/useAuthStore.ts b/frontend/src/stores/useAuthStore.ts
index 1998c6d..0c3b28a 100644
--- a/frontend/src/stores/useAuthStore.ts
+++ b/frontend/src/stores/useAuthStore.ts
@@ -45,7 +45,7 @@ export const useAuthStore = defineStore('auth', {
     hasDomain(): boolean {
       return this.currentDomain.id !== undefined;
     },
-    getRoles(): IRolesDisplay[] {
+    roles(): IRolesDisplay[] {
       return this.userInfo.roles;
     },
     isSuperAdmin(): boolean {