feat: branch admin

src/components/01_branch-management/FormBranchAdmin.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { User } from 'src/stores/user/types';
+import { baseUrl } from 'src/stores/utils';
+
+defineProps<{
+  admin?: User | null;
+}>();
+</script>
+
+<template>
+  <div class="col-12 row">
+    <div class="col-12 q-mb-md text-weight-bold text-body1">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-map-legend"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t(`branchAdminTitle`) }}
+    </div>
+
+    <div class="col-12">
+      <template v-if="!admin">
+        <span>{{ $t('branchAdminNone') }}</span>
+      </template>
+      <template v-else>
+        <div class="row items-center">
+          <q-avatar>
+            <q-img
+              :src="`${baseUrl}/user/${admin.id}/image`"
+              style="aspect-ratio: 1"
+            >
+              <template #error>
+                <q-img
+                  :src="
+                    admin.gender === 'male'
+                      ? '/no-img-man.png'
+                      : '/no-img-female.png'
+                  "
+                />
+              </template>
+            </q-img>
+          </q-avatar>
+
+          <div class="col column q-pl-md">
+            <span>
+              {{
+                $i18n.locale === 'en-US'
+                  ? admin.firstNameEN + ' ' + admin.lastNameEN
+                  : admin.firstName + ' ' + admin.lastName
+              }}
+            </span>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>

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

@@ -36,6 +36,8 @@ import SideMenu from 'components/SideMenu.vue';
 import ImageUploadDialog from 'components/ImageUploadDialog.vue';
 import FormBank from 'components/01_branch-management/FormBank.vue';
 import ToggleButton from 'src/components/button/ToggleButton.vue';
+import FormBranchAdmin from 'src/components/01_branch-management/FormBranchAdmin.vue';
+import { User } from 'src/stores/user/types';
 
 const $q = useQuasar();
 const { t } = useI18n();
@@ -404,6 +406,7 @@ function drawerEdit() {
   };
 }
 
+const currentBranchAdmin = ref<User | null>(null);
 async function triggerEdit(
   openFormType: string,
   id: string,
@@ -450,6 +453,15 @@ async function triggerEdit(
     }
   }
   formTypeBranch.value = typeBranch;
+
+  const branchAdmin = await branchStore.getAdmin(id);
+
+  if (!branchAdmin) {
+    currentBranchAdmin.value = null;
+    return;
+  }
+
+  currentBranchAdmin.value = branchAdmin;
 }
 
 function triggerDelete(id: string) {
@@ -1919,6 +1931,10 @@ watch(currentHq, () => {
             dense
             v-model:bank-book-list="formBankBook"
           />
+          <FormBranchAdmin
+            id="info-branch-admin-view"
+            :admin="currentBranchAdmin"
+          />
           <!-- <FormImage
             @upload="
               () => {

src/stores/branch/index.ts

@@ -6,6 +6,7 @@ import { BankBook, Branch, BranchCreate } from './types';
 import { BranchContact } from '../branch-contact/types';
 import axios from 'axios';
 import useFlowStore from '../flow';
+import { User } from '../user/types';
 
 type BranchId = string;
 
@@ -263,6 +264,29 @@ const useBranchStore = defineStore('api-branch', () => {
     return false;
   }
 
+  async function getAdmin(
+    branchId: string | string[],
+    flow?: {
+      sessionId?: string;
+      refTransactionId?: string;
+      transactionId?: string;
+    },
+  ) {
+    const res = await api.get<User>(`/branch/${branchId}/admin`, {
+      headers: {
+        'X-Session-Id': flow?.sessionId,
+        'X-Rtid': flow?.refTransactionId || flowStore.rtid,
+        'X-Tid': flow?.transactionId,
+      },
+    });
+
+    if (!res) return false;
+    if (res.status === 200) return res.data;
+    if (res.status === 204) return null;
+
+    return false;
+  }
+
   async function addUser(
     branchId: string,
     userId: string | string[],
@@ -392,6 +416,7 @@ const useBranchStore = defineStore('api-branch', () => {
     editById,
     deleteById,
 
+    getAdmin,
     getUser,
     addUser,
     removeUser,