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

fix: service & product card image

Browse source
This commit is contained in:
puriphatt 2024-07-01 11:04:24 +00:00
parent b07d1b9085
commit 2d0def98a3
3 changed files with 185 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

347
src/components/04_product-service/TotalProductCardComponent.vue
View file

@ -39,205 +39,208 @@ withDefaults(
</script>
<template>
<AppBox
no-padding
<div
bordered
:class="{ 'is-add-product': isAddProduct }"
style="box-shadow: var(--shadow-3); min-height: 300px"
class="column bordered rounded q-pa-sm no-wrap"
style="box-shadow: var(--shadow-3); height: 20rem"
@click="$emit('select', data)"
>
<div class="q-pa-sm">
<div class="row flex justify-between text-bold">
<div class="col-9" :class="{ inactive: isDisabled }">
{{ title ?? 'title' }}
</div>
<div
v-if="isSelected === false"
class="col-3 relative-position"
style="left: 10px; bottom: 10px"
<div class="row flex justify-between text-bold">
<div class="col-9" :class="{ inactive: isDisabled }">
{{ title ?? 'title' }}
</div>
<div
v-if="isSelected === false"
class="col-3 relative-position"
style="left: 10px; bottom: 10px"
>
<q-btn
flat
round
padding="sm"
class="absolute-top-right dots-btn"
icon="mdi-dots-vertical"
size="sm"
@click.stop=""
>
<q-btn
flat
round
padding="sm"
class="absolute-top-right dots-btn"
icon="mdi-dots-vertical"
size="sm"
@click.stop=""
>
<q-menu class="bordered">
<q-list v-close-popup>
<q-item
clickable
dense
class="row q-py-sm"
style="white-space: nowrap"
@click="$emit('menuViewDetail')"
>
<q-icon
name="mdi-eye-outline"
class="col-3"
size="xs"
style="color: hsl(var(--green-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('viewDetail') }}
</span>
</q-item>
<q-menu class="bordered">
<q-list v-close-popup>
<q-item
clickable
dense
class="row q-py-sm"
style="white-space: nowrap"
@click="$emit('menuViewDetail')"
>
<q-icon
name="mdi-eye-outline"
class="col-3"
size="xs"
style="color: hsl(var(--green-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('viewDetail') }}
</span>
</q-item>
<q-item
v-if="!isDisabled"
dense
clickable
class="row q-py-sm"
style="white-space: nowrap"
@click="$emit('menuEdit')"
v-close-popup
>
<q-icon
name="mdi-pencil-outline"
class="col-3"
size="xs"
style="color: hsl(var(--cyan-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('edit') }}
</span>
</q-item>
<q-item
v-if="!isDisabled"
dense
clickable
class="row q-py-sm"
style="white-space: nowrap"
@click="$emit('menuEdit')"
v-close-popup
>
<q-icon
name="mdi-pencil-outline"
class="col-3"
size="xs"
style="color: hsl(var(--cyan-6-hsl))"
/>
<span class="col-9 q-px-md flex items-center">
{{ $t('edit') }}
</span>
</q-item>
<q-item dense>
<q-item-section class="q-py-sm">
<div class="q-pa-sm surface-2 rounded">
<q-toggle
dense
size="sm"
@click="$emit('toggleStatus', data?.id)"
:model-value="!isDisabled"
val="xs"
padding="none"
>
<div class="q-ml-xs">
{{
!isDisabled
? $t('switchOnLabel')
: $t('switchOffLabel')
}}
</div>
</q-toggle>
</div>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
<q-avatar
v-if="isAddProduct"
:style="`background-color: var(${data?.type === 'product' ? '--teal-10' : '--orange-5'})`"
size="18px"
text-color="white"
>
{{ (index ?? 0) + 1 }}
</q-avatar>
<q-item dense>
<q-item-section class="q-py-sm">
<div class="q-pa-sm surface-2 rounded">
<q-toggle
dense
size="sm"
@click="$emit('toggleStatus', data?.id)"
:model-value="!isDisabled"
val="xs"
padding="none"
>
<div class="q-ml-xs">
{{
!isDisabled
? $t('switchOnLabel')
: $t('switchOffLabel')
}}
</div>
</q-toggle>
</div>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
<div :class="{ inactive: isDisabled }">
<div class="app-text-muted">{{ data?.code ?? 'code' }}</div>
<div class="flex justify-start text-bold">
<div
v-if="data?.type === 'service'"
class="bordered q-pa-xs row surface-0"
style="font-size: 12px; border-radius: 5px; width: 80px"
>
<div class="col ellipsis-2-lines">งาน</div>
<q-space />
<div class="col text-center">{{ data?.work.length }}</div>
</div>
<q-avatar
v-if="isAddProduct"
:style="`background-color: var(${data?.type === 'product' ? '--teal-10' : '--orange-5'})`"
size="18px"
text-color="white"
>
{{ (index ?? 0) + 1 }}
</q-avatar>
</div>
<div :class="{ inactive: isDisabled }" class="column col">
<div class="app-text-muted">{{ data?.code ?? 'code' }}</div>
<div class="flex justify-start text-bold">
<div
v-if="data?.type === 'service'"
class="bordered q-pa-xs row surface-0"
style="font-size: 12px; border-radius: 5px; width: 80px"
>
<div class="col ellipsis-2-lines">งาน</div>
<q-space />
<div class="col text-center">{{ data?.work.length }}</div>
</div>
</div>
<div v-if="data?.type === 'product'" class="flex">
<div
class="row full-width text-right"
style="font-size: 10px; color: hsl(var(--stone-4-hsl))"
>
<div class="col-4">ราคาขาย</div>
<div class="col-4">ราคาตัวแทน</div>
<div class="col-4">ราคาค่าดำเนินการ</div>
</div>
<div
class="row full-width text-right items-center"
style="margin-top: -5px"
>
<div
class="col-4 text-weight-bold"
style="font-size: 14px; color: hsl(var(--orange-5-hsl))"
>
฿{{ formatNumberDecimal(data?.price, 2) }}
</div>
<div
class="col-4 text-weight-bold"
style="font-size: 14px; color: hsl(var(--purple-9-hsl))"
>
฿{{ formatNumberDecimal(data?.agentPrice, 2) }}
</div>
<div
class="col-4"
style="font-size: 12px; color: hsl(var(--pink-7-hsl))"
>
฿{{ formatNumberDecimal(data?.serviceCharge, 2) }}
</div>
</div>
<div v-if="data?.type === 'product'" class="flex">
<div
class="row full-width text-right"
style="font-size: 10px; color: hsl(var(--stone-4-hsl))"
>
<div class="col-4">ราคาขาย</div>
<div class="col-4">ราคาตัวแทน</div>
<div class="col-4">ราคาค่าดำเนินการ</div>
</div>
<div
class="flex justify-center rounded items-center q-my-md q-py-lg"
:class="[
data?.type === 'product' ? 'card__green' : 'card__orange',
$q.dark.isActive ? 'dark' : '',
]"
class="row full-width text-right items-center"
style="margin-top: -5px"
>
<q-img
loading="lazy"
:src="`${baseUrl}/${data?.type === 'service' ? 'service' : 'product'}/${data?.id}/image`"
style="height: 86px; max-width: 100px"
<div
class="col-4 text-weight-bold"
style="font-size: 14px; color: hsl(var(--orange-5-hsl))"
>
<template #error>
฿{{ formatNumberDecimal(data?.price, 2) }}
</div>
<div
class="col-4 text-weight-bold"
style="font-size: 14px; color: hsl(var(--purple-9-hsl))"
>
฿{{ formatNumberDecimal(data?.agentPrice, 2) }}
</div>
<div
class="col-4"
style="font-size: 12px; color: hsl(var(--pink-7-hsl))"
>
฿{{ formatNumberDecimal(data?.serviceCharge, 2) }}
</div>
</div>
</div>
<div
class="col rounded q-my-md items-center justify-center flex"
:class="[
data?.type === 'product' ? 'card__green' : 'card__orange',
$q.dark.isActive ? 'dark' : '',
]"
style="overflow: hidden"
>
<q-img
loading="lazy"
:src="`${baseUrl}/${data?.type === 'service' ? 'service' : 'product'}/${data?.id}/image`"
>
<template #error>
<div
class="full-width items-center justify-center flex"
style="background-color: transparent"
>
<q-img
style="background: none; height: 86px; max-width: 100px"
:src="
data?.type === 'product'
? '/shop-image.png'
: '/service-image.png'
"
width="100%"
width="5rem"
/>
</template>
</q-img>
</div>
<div class="row justify-between items-center q-mb-xs">
<div class="q-pr-md" v-if="data?.type === 'service'">
<q-icon
name="mdi-calendar-month"
class="surface-0 rounded q-pa-xs app-text-muted"
size="20px"
/>
{{ dateFormat(data?.createdAt) }}
</div>
</div>
</template>
</q-img>
</div>
<div class="q-pr-md" v-if="data?.type === 'product'">
<q-icon
name="mdi-clock-outline"
class="surface-0 rounded q-pa-xs app-text-muted"
size="20px"
/>
{{ data?.process }} วัน
</div>
<div class="row justify-between items-center q-mb-xs">
<div class="q-pr-md" v-if="data?.type === 'service'">
<q-icon
name="mdi-calendar-month"
class="surface-0 rounded q-pa-xs app-text-muted"
size="20px"
/>
{{ dateFormat(data?.createdAt) }}
</div>
<div class="q-pr-md" v-if="data?.type === 'product'">
<q-icon
name="mdi-clock-outline"
class="surface-0 rounded q-pa-xs app-text-muted"
size="20px"
/>
{{ data?.process }} วัน
</div>
</div>
</div>
</AppBox>
</div>
</template>
<style scoped>

7
src/components/ProfileUpload.vue
View file

@ -11,6 +11,7 @@ withDefaults(
isService?: boolean;
labelStatusToggle?: string;
hideToggle?: boolean;
readonly?: boolean;
}>(),
{
hideToggle: true,
@ -48,7 +49,7 @@ defineEmits<{
/>
</div>
<div
v-if="urlProfile && !profileSubmit"
v-if="urlProfile && !profileSubmit && !readonly"
class="col-12 row q-mt-md q-col-gutter-x-md"
>
<div class="col-6">
@ -78,7 +79,7 @@ defineEmits<{
</div>
<q-btn
id="btn-profile-edit"
v-else-if="urlProfile && profileSubmit"
v-else-if="urlProfile && profileSubmit && !readonly"
dense
unelevated
outlined
@ -91,7 +92,7 @@ defineEmits<{
<q-btn
id="btn-profile-upload"
v-else
v-if="!urlProfile && !readonly"
dense
unelevated
outlined

7
src/pages/04_product-service/MainPage.vue
View file

@ -634,6 +634,9 @@ async function assignFormDataProductService(id: string) {
if (res) {
statusToggle.value = res.status === 'INACTIVE' ? false : true;
profileUrl.value = res.imageUrl;
profileSubmit.value = true;
currentService.value = JSON.parse(JSON.stringify(res));
prevService.value = {
@ -732,7 +735,7 @@ function clearFormProduct() {
code: '',
image: undefined,
};
imageProduct.value = undefined;
dialogProduct.value = false;
dialogProductEdit.value = false;
profileUrl.value = '';
@ -758,6 +761,7 @@ function clearFormService() {
dialogServiceEdit.value = false;
profileUrl.value = '';
profileSubmit.value = false;
imageProduct.value = undefined;
}
function assignFormDataProductServiceCreate() {
@ -2172,6 +2176,7 @@ watch(inputSearchProductAndService, async () => {
<template #prepend>
<ProfileUpload
isService
:readonly="!infoServiceEdit"
v-model:url-profile="profileUrl"
v-model:status-toggle="statusToggle"
v-model:profile-submit="profileSubmit"