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,32 +198,54 @@ 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 = [
-      {
-        icon: 'mdi-office-building-outline',
-        count: _stats.hq,
-        label: 'branch.card.branchHQLabel',
-        color: 'pink',
-      },
-      {
-        icon: 'mdi-home-group',
-        count: _stats.br,
-        label: 'branch.card.branchLabel',
-        color: 'purple',
-      },
 
-      {
+  const baseStats: {
-        icon: 'mdi-home-group',
+    icon: string;
-        count: _stats.virtual,
+    count: number;
-        label: 'branch.card.branchVirtual',
+    label: string;
-        color: 'blue',
+    color: 'pink' | 'purple' | 'blue';
-      },
+  }[] = [
-    ];
+    {
-  }
+      icon: 'mdi-office-building-outline',
+      count: _stats.hq,
+      label: 'branch.card.branchHQLabel',
+      color: 'pink',
+    },
+    {
+      icon: 'mdi-home-group',
+      count: _stats.br,
+      label: 'branch.card.branchLabel',
+      color: 'purple',
+    },
+    {
+      icon: 'mdi-home-group',
+      count: _stats.virtual,
+      label: 'branch.card.branchVirtual',
+      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,43 +1221,56 @@ 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"
                             >
-                              <q-avatar size="md">
+                              <div
-                                <q-img
+                                :style="`
-                                  class="text-center"
+                                  border-radius: 50%;
-                                  :ratio="1"
+                                  border-style: solid;
-                                  :src="
+                                  border-width: 2px;
-                                    baseUrl +
+                                  border-color: hsl(var(${props.row.isHeadOffice ? '--pink-6-hsl' : props.row.virtual ? '--blue-6-hsl' : '--violet-11-hsl'}));
-                                    `/branch/${props.row.id}/branch-image?ts=${Date.now()}`
+                                `"
-                                  "
+                                class="q-pa-xs"
-                                >
+                              >
-                                  <template #error>
+                                <q-avatar size="md">
-                                    <div
+                                  <q-img
-                                      class="branch-card__icon no-padding full-width full-height items-center justify-center"
+                                    class="text-center"
-                                    >
+                                    :ratio="1"
-                                      <q-icon
+                                    :src="
-                                        size="sm"
+                                      baseUrl +
-                                        name="mdi-office-building-outline"
+                                      `/branch/${props.row.id}/branch-image?ts=${Date.now()}`
-                                      />
+                                    "
-                                    </div>
+                                  >
-                                  </template>
+                                    <template #error>
-                                </q-img>
+                                      <div
+                                        class="branch-card__icon no-padding full-width full-height items-center justify-center"
+                                      >
+                                        <q-icon
+                                          size="sm"
+                                          name="mdi-office-building-outline"
+                                        />
+                                      </div>
+                                    </template>
+                                  </q-img>
 
-                                <q-badge
+                                  <q-badge
-                                  class="absolute-bottom-right no-padding"
+                                    class="absolute-bottom-right no-padding"
-                                  style="
+                                    style="
-                                    border-radius: 50%;
+                                      border-radius: 50%;
-                                    min-width: 8px;
+                                      min-width: 8px;
-                                    min-height: 8px;
+                                      min-height: 8px;
-                                  "
+                                    "
-                                  :style="{
+                                    :style="{
-                                    background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
+                                      background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
-                                  }"
+                                    }"
-                                ></q-badge>
+                                  ></q-badge>
-                              </q-avatar>
+                                </q-avatar>
+                              </div>
                             </div>
                             <div class="col">
                               <div class="col">{{ props.row.name }}</div>
@@ -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);
 }