refactor: person card fallback img

src/components/shared/PersonCard.vue

@@ -12,6 +12,7 @@ defineProps<{
     male?: boolean;
     female?: boolean;
     img?: string;
+    fallbackImg?: string;
     detail?: { icon: string; value: string }[];
   };
   tag?: [{ color: string; value: string }];
@@ -98,19 +99,15 @@ defineEmits<{
         <q-img
           v-if="!$slots.img"
           :src="data.img ?? '/no-profile.png'"
-          style="
-            object-fit: cover;
-            width: 100%;
-            height: 100%;
-            border-radius: 50%;
-          "
+          fit="cover"
+          style="width: 100%; height: 100%; border-radius: 50%"
         >
           <template #error>
             <div
               style="background: none"
-              class="full-width full-height items-center justify-center flex"
+              class="no-padding full-width full-height flex items-center justify-center"
             >
-              <q-img src="/no-profile.png" width="5rem" />
+              <q-img :src="data.fallbackImg || '/no-profile.png'" fit="cover" />
             </div>
           </template>
         </q-img>

src/pages/03_customer-management/MainPage.vue

@@ -1369,11 +1369,8 @@ const emptyCreateDialog = ref(false);
                               $i18n.locale === 'eng'
                                 ? `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim()
                                 : `${props.row.firstName} ${props.row.lastName} `.trim(),
-                            img:
-                              props.row.imageUrl ||
-                              '/images/customer-' +
-                                props.row.customerType +
-                                '-avartar.png',
+                            img: `${baseUrl}/customer/${props.row.id}/image`,
+                            fallbackImg: `/images/customer-${props.row.customerType}-avartar-${props.row.gender}.png`,
                             male: undefined,
                             female: undefined,
                             detail: [
@@ -1426,7 +1423,7 @@ const emptyCreateDialog = ref(false);
                           @toggle-status="
                             triggerChangeStatus(props.row.id, props.row.status)
                           "
-                        />
+                        ></PersonCard>
                       </div>
                     </template>
                   </q-table>