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

refactor(03): customer fallback img

Browse source
This commit is contained in:
puriphatt 2024-09-05 15:57:30 +07:00
parent 9466019303
commit ea7fa6df69
8 changed files with 44 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/customer-CORP-avartar-female.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 151 KiB

BIN
public/images/customer-CORP-avartar-male.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
public/images/customer-CORP-avartar.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 218 KiB

BIN
public/images/customer-PERS-avartar-female.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
public/images/customer-PERS-avartar-male.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
public/images/customer-PERS-avartar.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 283 KiB

BIN
public/images/employee-avatar.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Before After
Before After

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

@ -1164,7 +1164,7 @@ const emptyCreateDialog = ref(false);
>
<template #error>
<q-img
:src="`${props.row.customerType === 'CORP' ? '/images/customer-CORP-avartar.png' : '/images/customer-PERS-avartar.png'}`"
:src="`${props.row.customerType === 'CORP' ? `/images/customer-CORP-avartar-${props.row.gender}.png` : `/images/customer-PERS-avartar-${props.row.gender}.png`}`"
/>
</template>
</q-img>
@ -1735,11 +1735,16 @@ const emptyCreateDialog = ref(false);
:fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
:img="
customerFormState.customerImageUrl ||
`/images/customer-${customerFormData.customerType}-avartar.png`
`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.png`
"
:fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.png`"
:color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
:bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
:icon="
customerFormData.customerType === 'PERS'
? 'mdi-account-plus-outline'
: 'mdi-office-building-outline'
"
:fallbackImg="`/images/customer-${customerFormData.customerType}-avartar.png`"
color="hsla(var(--pink-6-hsl)/1)"
bg-color="hsla(var(--pink-6-hsl)/0.15)"
@view="customerFormState.imageDialog = true"
@edit="dialogCustomerImageUpload?.browse()"
/>
@ -2635,13 +2640,35 @@ const emptyCreateDialog = ref(false);
<div class="full-height full-width" style="background: white">
<div
class="full-height full-width flex justify-center items-center"
:style="`background: ${customerFormData.customerType === 'CORP' ? '#5f1775' : '#347454'}`"
:style="`background: ${
customerFormData.gender
? customerFormData.customerType === 'CORP'
? '#5f1775'
: '#347454'
: `hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`
}`"
>
<q-img
:src="`/images/customer-${customerFormData.customerType}-avartar.png`"
:src="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.png`"
fit="contain"
style="height: 100%"
/>
>
<template #error>
<span
class="full-width full-height column items-center justify-center"
>
<q-icon
size="7vw"
:name="
customerFormData.customerType === 'PERS'
? 'mdi-account-plus-outline'
: 'mdi-office-building-outline'
"
:style="`color: hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
/>
</span>
</template>
</q-img>
</div>
</div>
</template>
@ -2735,11 +2762,16 @@ const emptyCreateDialog = ref(false);
:fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
:img="
customerFormState.customerImageUrl ||
`/images/customer-${customerFormData.customerType}-avartar.png`
`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.png`
"
:fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.png`"
:color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
:bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
:icon="
customerFormData.customerType === 'PERS'
? 'mdi-account-plus-outline'
: 'mdi-office-building-outline'
"
:fallbackImg="`/images/customer-${customerFormData.customerType}-avartar.png`"
color="hsla(var(--pink-6-hsl)/1)"
bg-color="hsla(var(--pink-6-hsl)/0.15)"
@view="customerFormState.imageDialog = true"
@edit="dialogCustomerImageUpload?.browse()"
/>