feat: show role

src/layouts/MainLayout.vue

@@ -13,8 +13,9 @@ import { useI18n } from 'vue-i18n';
 
 import useLoader from 'stores/loader';
 import DrawerComponent from 'components/DrawerComponent.vue';
-import GlobalDialog from 'components/GlobalDialog.vue';
 import useUserStore from 'src/stores/user';
+import { Option } from 'src/stores/user/types';
+import { dialog } from 'src/stores/utils';
 
 interface NotificationButton {
   item: string;
@@ -34,11 +35,12 @@ const loaderStore = useLoader();
 
 const { visible } = storeToRefs(loaderStore);
 const { locale } = useI18n({ useScope: 'global' });
+const userStore = useUserStore();
 
-const logoutModal = ref(false);
 const leftDrawerOpen = ref(false);
 const filterUnread = ref(false);
 const unread = ref<number>(1);
+const filterRole = ref<string[]>();
 
 const currentLanguage = ref<string>('ไทย');
 const language: {
@@ -100,21 +102,46 @@ function setActive(button: NotificationButton) {
   }
 }
 
-function doLogout(confirm: boolean = false) {
+function doLogout() {
-  logoutModal.value = true;
+  dialog({
-  if (confirm) {
+    icon: 'mdi-logout-variant',
-    logoutModal.value = false;
+    title: 'ยืนยันการออกจากระบบ',
+    persistent: true,
+    message: 'คุณต้องการออกจากระบบ ใช่หรือไม่',
+    action: async () => {
       logout();
+    },
+  });
 }
+
+function getRoleName(userRoleValue?: string[], roleOptions: Option[]) {
+  if (!userRoleValue || !roleOptions) return;
+
+  const matchingRole: string | undefined = roleOptions.find(
+    (role) => role.value === userRoleValue[0],
+  )?.label;
+
+  return matchingRole ? matchingRole : '';
 }
 
 onMounted(async () => {
   const user = getUsername();
   const uid = getUserId();
 
+  const userRoles = getRole();
+  if (userRoles) {
+    console.log(userRoles);
+    filterRole.value = userRoles.filter(
+      (role) =>
+        role !== 'default-roles-dev' &&
+        role !== 'offline_access' &&
+        role !== 'uma_authorization',
+    );
+  }
+
   if (user === 'admin') return;
   if (uid) {
-    const res = await useUserStore().fetchById(uid);
+    const res = await userStore.fetchById(uid);
 
     if (res && res.profileImageUrl) userImage.value = res.profileImageUrl;
   }
@@ -260,7 +287,9 @@ onMounted(async () => {
                       {{ getName() }}
                     </span>
                     <div style="font-size: 11px; color: var(--surface)">
-                      {{ getRole()?.includes('admin') ? 'Admin' : 'User' }}
+                      {{
+                        getRoleName(filterRole, userStore.userOption.roleOpts)
+                      }}
                     </div>
                   </q-item-label>
                 </q-item-section>
@@ -347,14 +376,6 @@ onMounted(async () => {
 
     <drawer-component v-model:leftDrawerOpen="leftDrawerOpen" />
 
-    <GlobalDialog
-      v-model="logoutModal"
-      title="ยืนยันการออกจากระบบ"
-      message="คุณต้องการออกจากระบบ ใช่หรือไม่"
-      icon="mdi-logout-variant"
-      :persistent="true"
-      :action="() => doLogout(true)"
-    />
     <global-loading :visibility="visible" />
   </q-layout>
 </template>