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>