chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

refactor: person card fallback img

Browse source
This commit is contained in:
puriphatt 2024-09-06 09:31:30 +07:00
parent c324cd6117
commit b430f40ad6
2 changed files with 8 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/shared/PersonCard.vue
View file

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

9
src/pages/03_customer-management/MainPage.vue
View file

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