add roles label

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>

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-else v-for="(item) in (props.row as IUserRolesDisplay).roles" square color="primary" text-color="white" :key="item.id" :label="item.name" size="sm" />
-                <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>
           </div>
         </q-td>
       </template>

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 {