refactor: role admin view

src/layouts/DrawerComponent.vue

@@ -10,39 +10,22 @@ defineProps<{
   mini?: boolean;
 }>();
 
+const role = ref();
+
 onMounted(async () => {
   const uid = getUserId();
-  const role = getRole();
+  role.value = getRole();
 
   if (!uid) return;
 
-  if (role?.includes('system')) {
+  if (role.value.includes('system')) {
     const result = await userBranch.fetchListOptionBranch();
     if (result && result.total > 0) currentMyBranch.value = result.result[0];
   }
   const result = await userBranch.fetchListMyBranch(uid);
   if (result && result.total > 0) currentMyBranch.value = result.result[0];
-});
 
-const router = useRouter();
-const userBranch = useMyBranch();
-const { currentMyBranch } = storeToRefs(userBranch);
-
-const currentRoute = ref<string>('');
-const currentPath = computed(() => {
-  return router.currentRoute.value.path;
-});
-
-const labelMenu = ref<
-  {
-    label: string;
-    icon: string;
-    route: string;
-    hidden?: boolean;
-    disabled?: boolean;
-    isax?: boolean;
-  }[]
->([
+  labelMenu.value = [
     {
       label: 'drawerDashboard',
       icon: 'isax-element-35',
@@ -54,11 +37,23 @@ const labelMenu = ref<
       label: 'drawerBranchManagement',
       icon: 'mdi-chart-donut',
       route: '/branch-management',
+      hidden:
+        role.value.includes('admin') ||
+        role.value.includes('branch_admin') ||
+        role.value.includes('head_of_admin')
+          ? false
+          : true,
     },
     {
       label: 'drawerPersonnelManagement',
       icon: 'fa6-solid:building-user',
       route: '/personnel-management',
+      hidden:
+        role.value.includes('admin') ||
+        role.value.includes('branch_admin') ||
+        role.value.includes('head_of_admin')
+          ? false
+          : true,
     },
     {
       label: 'drawerCustomerManagement',
@@ -115,7 +110,28 @@ const labelMenu = ref<
       route: '',
       disabled: true,
     },
-]);
+  ];
+});
+
+const router = useRouter();
+const userBranch = useMyBranch();
+const { currentMyBranch } = storeToRefs(userBranch);
+
+const currentRoute = ref<string>('');
+const currentPath = computed(() => {
+  return router.currentRoute.value.path;
+});
+
+const labelMenu = ref<
+  {
+    label: string;
+    icon: string;
+    route: string;
+    hidden?: boolean;
+    disabled?: boolean;
+    isax?: boolean;
+  }[]
+>([]);
 
 const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
   default: true,

src/pages/MainPage.vue

@@ -1,16 +1,31 @@
 <script setup lang="ts">
 import MenuItem from 'components/00_home/MenuItem.vue';
 import useUtilsStore from 'stores/utils';
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
+import { getRole } from 'src/services/keycloak';
 
 const utilsStore = useUtilsStore();
-const menu = [
+const menu = ref<InstanceType<typeof MenuItem>['$props']['list']>([]);
+const role = ref();
+
+onMounted(() => {
+  utilsStore.currentTitle.title = '';
+  utilsStore.currentTitle.path = [{ text: '' }];
+
+  role.value = getRole();
+  menu.value = [
     {
       value: 'branch-management',
       icon: 'mdi-chart-donut',
       color: 'green',
       title: 'mainBranchTitle',
       caption: 'mainBranchCaption',
+      hidden:
+        role.value.includes('admin') ||
+        role.value.includes('branch_admin') ||
+        role.value.includes('head_of_admin')
+          ? false
+          : true,
     },
     {
       value: 'personnel-management',
@@ -18,6 +33,12 @@ const menu = [
       color: 'cyan',
       title: 'mainPersonnelTitle',
       caption: 'mainPersonnelCaption',
+      hidden:
+        role.value.includes('admin') ||
+        role.value.includes('branch_admin') ||
+        role.value.includes('head_of_admin')
+          ? false
+          : true,
     },
     {
       value: 'customer-management',
@@ -94,11 +115,7 @@ const menu = [
       caption: 'mainReportCaption',
       disabled: true,
     },
-] satisfies InstanceType<typeof MenuItem>['$props']['list'];
-
-onMounted(() => {
-  utilsStore.currentTitle.title = '';
-  utilsStore.currentTitle.path = [{ text: '' }];
+  ];
 });
 </script>