From 5f26c8bcdcfe5c8541a364c153e9834edb4c00a2 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Fri, 2 Aug 2024 18:00:29 +0700
Subject: [PATCH] refactor: add show img

---
 .../01_branch-management/BranchCard.vue       | 33 ++++++++++++++-----
 src/pages/01_branch-management/MainPage.vue   |  1 +
 .../02_personnel-management/MainPage.vue      | 20 +++++++++--
 3 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue
index 945474d5..81cf6bd8 100644
--- a/src/components/01_branch-management/BranchCard.vue
+++ b/src/components/01_branch-management/BranchCard.vue
@@ -8,7 +8,9 @@ defineProps<{
     branchLabelTel: string;
     branchLabelAddress: string;
     branchLabelType: string;
+    branchImgUrl: string;
   };
+
   metadata?: unknown;
   badgeField?: string[];
   fieldSelected?: (
@@ -19,6 +21,8 @@ defineProps<{
   )[];
   footer?: boolean;
 }>();
+
+const baseUrl = import.meta.env.VITE_API_BASE_URL;
 </script>
 
 <template>
@@ -36,13 +40,22 @@ defineProps<{
   >
     <div class="branch-card__header">
       <div class="branch-card__wrapper">
-        <div class="branch-card__icon">
-          <q-icon
-            size="md"
-            style="scale: 0.8"
-            name="mdi-office-building-outline"
-          />
-        </div>
+        <q-img
+          :src="baseUrl + data.branchImgUrl"
+          style="
+            height: 3rem;
+            width: 3rem;
+            border-radius: 50%;
+            aspect-ratio: 1;
+            overflow: visible;
+          "
+        >
+          <template #error>
+            <div class="branch-card__icon">
+              <q-icon size="sm" name="mdi-office-building-outline" />
+            </div>
+          </template>
+        </q-img>
       </div>
       <div class="branch-card__name">
         <b>{{ data.branchLabelName }}</b>
@@ -95,10 +108,14 @@ defineProps<{
     & .branch-card__icon {
       background-color: hsla(var(--_branch-card-bg) / 0.15);
       border-radius: 50%;
-      padding: var(--size-1);
+      padding: var(--size-2);
       position: relative;
+      width: 3rem;
       transform: rotate(45deg);
       aspect-ratio: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
       &::after {
         content: ' ';
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index afcbce52..b38808ed 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -1257,6 +1257,7 @@ watch(currentHq, () => {
                                 ? 'branchHQLabel'
                                 : 'branchLabel',
                             ),
+                            branchImgUrl: `/branch/${props.row.id}/branch-image`,
                           }"
                           :field-selected="fieldSelected"
                           :badge-field="['branchLabelStatus']"
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 43b88615..dd8dd84c 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -1129,11 +1129,21 @@ watch(
                         <q-avatar size="md">
                           <q-img
                             :src="
-                              props.row.profileImageUrl ?? '/no-profile.png'
+                              props.row.profileImageUrl
+                                ? props.row.profileImageUrl
+                                : props.row.gender === 'male'
+                                  ? '/no-img-man.png'
+                                  : '/no-img-female.png'
                             "
                           >
                             <template #error>
-                              <q-img src="/no-profile.png" />
+                              <q-img
+                                :src="
+                                  props.row.gender === 'male'
+                                    ? '/no-img-man.png'
+                                    : '/no-img-female.png'
+                                "
+                              />
                             </template>
                           </q-img>
                         </q-avatar>
@@ -1354,7 +1364,11 @@ watch(
                       $i18n.locale === 'en-US'
                         ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
                         : `${props.row.firstName} ${props.row.lastName}`.trim(),
-                    img: props.row.profileImageUrl,
+                    img: props.row.profileImageUrl
+                      ? props.row.profileImageUrl
+                      : props.row.gender === 'male'
+                        ? '/no-img-man.png'
+                        : '/no-img-female.png',
                     male: props.row.gender === 'male',
                     female: props.row.gender === 'female',
                     detail: [