From 9ffb327417209659bf4a47b4e6f34898b4bbd1ba Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 19 Aug 2024 14:43:05 +0700
Subject: [PATCH] fix: fallback no gender img

---
 .../02_personnel-management/MainPage.vue      | 82 ++++++++++++++-----
 1 file changed, 60 insertions(+), 22 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 2812b0e7..e319cce4 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -868,7 +868,7 @@ watch(
 
     <!-- main -->
     <div
-      class="col surface-2 rounded justify-between column no-wrap bordered"
+      class="col surface-2 rounded justify-between column no-wrap bordered full-height"
       style="overflow: hidden"
     >
       <div class="column">
@@ -1110,7 +1110,7 @@ watch(
         </div>
       </div>
 
-      <div class="col scroll q-pa-md full-width full-height">
+      <div class="flex full-width full-height q-pa-md surface-2 column col">
         <template v-if="userData && userData.total > 0 && !inputSearch">
           <q-table
             flat
@@ -1118,8 +1118,7 @@ watch(
             :grid="modeView"
             :rows="userData.result"
             :columns="columns"
-            style="max-height: 100%"
-            class="full-width full-height"
+            class="full-width"
             card-container-class="q-col-gutter-md"
             row-key="name"
             :rows-per-page-options="[0]"
@@ -1160,12 +1159,24 @@ watch(
                 >
                   {{ (currentPage - 1) * pageSize + props.rowIndex + 1 }}
                 </q-td>
+
                 <q-td v-if="fieldSelected.includes('name')">
                   <div class="row items-center" style="flex-wrap: nowrap">
                     <div style="display: flex">
-                      <div class="branch-card__icon q-mr-md">
-                        <q-avatar size="md">
+                      <div class="q-mr-md">
+                        <q-avatar
+                          size="md"
+                          style="
+                            background: linear-gradient(
+                              135deg,
+                              rgba(43, 137, 223, 1) 0%,
+                              rgba(230, 51, 81, 1) 100%
+                            );
+                          "
+                        >
                           <q-img
+                            v-if="props.row.gender !== ''"
+                            class="text-center"
                             :ratio="1"
                             :src="
                               props.row.profileImageUrl
@@ -1179,6 +1190,10 @@ watch(
                           >
                             <template #error>
                               <q-img
+                                v-if="
+                                  props.row.gender === 'male' ||
+                                  props.row.gender === 'female'
+                                "
                                 :src="
                                   props.row.gender === 'male'
                                     ? '/no-img-man.png'
@@ -1187,16 +1202,43 @@ watch(
                               />
                             </template>
                           </q-img>
+                          <q-icon
+                            v-else
+                            name="mdi-account-outline"
+                            style="color: white"
+                          />
+                          <q-badge
+                            class="absolute-bottom-right no-padding"
+                            style="
+                              border-radius: 50%;
+                              min-width: 8px;
+                              min-height: 8px;
+                            "
+                            :style="{
+                              background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
+                            }"
+                          ></q-badge>
                         </q-avatar>
                       </div>
                     </div>
                     <div class="column">
-                      <div>
+                      <div class="col ellipsis" style="max-width: 20vw">
                         {{
                           $i18n.locale === 'en-US'
                             ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
                             : `${props.row.firstName} ${props.row.lastName}`.trim()
                         }}
+                        <q-tooltip
+                          anchor="bottom left"
+                          self="center left"
+                          :delay="300"
+                        >
+                          {{
+                            $i18n.locale === 'en-US'
+                              ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
+                              : `${props.row.firstName} ${props.row.lastName}`.trim()
+                          }}
+                        </q-tooltip>
 
                         <q-icon
                           class="q-pl-xs"
@@ -1216,6 +1258,7 @@ watch(
                     </div>
                   </div>
                 </q-td>
+
                 <q-td v-if="fieldSelected.includes('type')">
                   <span
                     class="tags"
@@ -1563,21 +1606,14 @@ watch(
     :submit="() => onSubmit()"
     :close="() => onClose()"
   >
-    <InfoForm
-      :readonly="!infoDrawerEdit"
-      v-model:address="formData.address"
-      v-model:addressEN="formData.addressEN"
-      v-model:provinceId="formData.provinceId"
-      v-model:districtId="formData.districtId"
-      v-model:subDistrictId="formData.subDistrictId"
-      v-model:zipCode="formData.zipCode"
-    >
+    <InfoForm>
       <div class="q-px-lg q-pt-lg surface-2">
         <ProfileBanner
           :active="formData.status !== 'INACTIVE'"
           useToggle
-          color="hsla(var(--pink-6-hsl)/1)"
-          bgColor="hsla(var(--pink-6-hsl)/0.15)"
+          color="white"
+          icon="mdi-account-outline"
+          bgColor="linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)"
           v-model:toggle-status="formData.status"
           hideFade
           :menu="formMenuIcon"
@@ -1960,7 +1996,7 @@ watch(
         <div
           class="full-height full-width flex justify-center items-center"
           :style="`background: ${
-            modal
+            modal || !formData.gender
               ? 'linear-gradient(135deg,rgba(43, 137, 223, 1) 0%,rgba(230, 51, 81, 1) 100%)'
               : formData.gender === 'male'
                 ? '#78afb0'
@@ -1968,7 +2004,7 @@ watch(
           }`"
         >
           <q-img
-            v-if="infoDrawer"
+            v-if="infoDrawer && formData.gender"
             fit="contain"
             :src="`/no-img-${formData.gender === 'male' ? 'man' : 'female'}.png`"
             style="height: 100%"
@@ -1976,7 +2012,9 @@ watch(
           <q-icon
             v-else
             size="15rem"
-            name="mdi-account-plus-outline"
+            :name="
+              infoDrawer ? 'mdi-account-outline' : 'mdi-account-plus-outline'
+            "
             style="color: white"
           />
         </div>
@@ -2052,7 +2090,7 @@ watch(
 .branch-card__icon {
   background-color: hsla(var(--_branch-card-bg) / 0.15);
   border-radius: 50%;
-  padding: var(--size-1);
+
   position: relative;
   transform: rotate(45deg);