refactor: edit ui and check role

src/pages/01_branch-management/MainPage.vue

@@ -9,6 +9,7 @@ import type { QTableProps } from 'quasar';
 import { resetScrollBar } from 'src/stores/utils';
 import useBranchStore from 'stores/branch';
 import useFlowStore from 'stores/flow';
+import { isRoleInclude } from 'src/stores/utils';
 import {
   BranchWithChildren,
   BranchCreate,
@@ -45,6 +46,7 @@ import {
   SaveButton,
   UndoButton,
 } from 'components/button';
+import { getRole } from 'src/services/keycloak';
 
 const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
 const $q = useQuasar();
@@ -181,7 +183,10 @@ const treeData = computed(() => {
 
   branchData.value?.result.forEach((v) => {
     if (v.isHeadOffice) map[v.id] = Object.assign(v, { branch: [] });
-    else children.push(v);
+    if (v.virtual && isRoleInclude(['head_of_admin']) === false) {
+      return;
+    }
+    if (!v.isHeadOffice) children.push(v);
   });
 
   children.forEach((v) => {
@@ -193,11 +198,17 @@ const treeData = computed(() => {
   return Object.values(map);
 });
 
-async function calculateStats() {
+async function calculateStats(headOfficeId?: string) {
-  const _stats = await branchStore.stats();
+  const _stats = await branchStore.stats({ headOfficeId });
 
-  if (_stats) {
+  if (!_stats) return;
-    stats.value = [
+
+  const baseStats: {
+    icon: string;
+    count: number;
+    label: string;
+    color: 'pink' | 'purple' | 'blue';
+  }[] = [
     {
       icon: 'mdi-office-building-outline',
       count: _stats.hq,
@@ -210,7 +221,6 @@ async function calculateStats() {
       label: 'branch.card.branchLabel',
       color: 'purple',
     },
-
     {
       icon: 'mdi-home-group',
       count: _stats.virtual,
@@ -218,7 +228,24 @@ async function calculateStats() {
       color: 'blue',
     },
   ];
+
+  stats.value = baseStats.filter((v) => {
+    if (isRoleInclude(['head_of_admin'])) {
+      if (headOfficeId !== undefined && v.label.includes('HQ')) {
+        return false;
       }
+      return true;
+    } else {
+      if (v.label.includes('Virtual')) {
+        return false;
+      }
+
+      if (headOfficeId !== undefined && v.label.includes('HQ')) {
+        return false;
+      }
+      return true;
+    }
+  });
 }
 
 onMounted(async () => {
@@ -417,6 +444,10 @@ async function undo() {
   formData.value = prevFormData.value;
 }
 
+watch(expandedTree, async () => {
+  calculateStats(expandedTree.value[0]);
+});
+
 watch(modal, () => {
   if (!modal.value) {
     clearData();
@@ -786,21 +817,7 @@ watch(currentHq, () => {
         v-if="!hideStat"
         class="q-pb-md"
         label-i18n
-        :branch="
+        :branch="stats"
-          expandedTree[0]
-            ? [
-                {
-                  ...stats[1],
-                  count: (() => {
-                    const foundItem = treeData.find(
-                      (i) => i.id === expandedTree[0],
-                    );
-                    return foundItem ? foundItem._count.branch : 0;
-                  })(),
-                },
-              ]
-            : stats
-        "
         :dark="$q.dark.isActive"
       />
     </transition>
@@ -1204,9 +1221,21 @@ watch(currentHq, () => {
                                 'status-inactive':
                                   props.row.status === 'INACTIVE',
                                 'branch-card__hq': props.row.isHeadOffice,
-                                'branch-card__br': !props.row.isHeadOffice,
+                                'branch-card__br':
+                                  !props.row.isHeadOffice && !props.row.virtual,
+                                'branch-card__br-virtual':
+                                  !props.row.isHeadOffice && props.row.virtual,
                               }"
                               style="display: flex"
+                            >
+                              <div
+                                :style="`
+                                  border-radius: 50%;
+                                  border-style: solid;
+                                  border-width: 2px;
+                                  border-color: hsl(var(${props.row.isHeadOffice ? '--pink-6-hsl' : props.row.virtual ? '--blue-6-hsl' : '--violet-11-hsl'}));
+                                `"
+                                class="q-pa-xs"
                               >
                                 <q-avatar size="md">
                                   <q-img
@@ -1242,6 +1271,7 @@ watch(currentHq, () => {
                                   ></q-badge>
                                 </q-avatar>
                               </div>
+                            </div>
                             <div class="col">
                               <div class="col">{{ props.row.name }}</div>
                               <div class="col app-text-muted">
@@ -2096,7 +2126,7 @@ watch(currentHq, () => {
           () => {
             modelCreateTypeBranch = false;
 
-            if (value.text === 'Virtual Branch') {
+            if (value.text === $t('branch.card.branchVirtual')) {
               formData.virtual = true;
             } else {
               formData.virtual = false;
@@ -2153,6 +2183,10 @@ watch(currentHq, () => {
   }
 }
 
+.branch-card__br-virtual {
+  --_branch-card-bg: var(--blue-6-hsl);
+}
+
 .status-active {
   --_branch-status-color: var(--green-6-hsl);
 }