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

refactor: 04 => enhance layout and responsiveness for WorkManagementComponent

Browse source
This commit is contained in:
puriphatt 2025-01-27 16:57:31 +07:00
parent debfa874f3
commit ca0dcbdad0
1 changed files with 90 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

158
src/components/04_product-service/WorkManagementComponent.vue
View file

@ -241,20 +241,22 @@ watch(
</span> </span>
</template> </template>
</SelectInput> --> </SelectInput> -->
<q-btn <div :class="{ 'col-12 row justify-end q-mt-sm': $q.screen.lt.md }">
v-if="!readonly" <q-btn
id="btn-delete-work" v-if="!readonly"
icon="mdi-trash-can-outline" id="btn-delete-work"
dense icon="mdi-trash-can-outline"
flat dense
round flat
padding="0" round
class="q-ml-md" padding="0"
color="negative" class="q-ml-md"
@click.stop="$emit('deleteWork')" color="negative"
> @click.stop="$emit('deleteWork')"
<q-tooltip>{{ $t('general.delete') }}</q-tooltip> >
</q-btn> <q-tooltip>{{ $t('general.delete') }}</q-tooltip>
</q-btn>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -270,29 +272,29 @@ watch(
<!-- product --> <!-- product -->
<div class="bordered-t"> <div class="bordered-t">
<div <div
class="q-py-xs text-weight-medium row justify-between items-center q-px-md" class="q-py-xs text-weight-medium justify-between items-center q-px-md"
:class="{ row: $q.screen.gt.xs }"
style="background-color: hsla(var(--info-bg) / 0.1)" style="background-color: hsla(var(--info-bg) / 0.1)"
> >
<span> {{ $t('productService.service.productInWork') }}
{{ $t('productService.service.productInWork') }} {{ workIndex + 1 }}
{{ workIndex + 1 }}
<span class="row items-center justify-between">
<q-checkbox <q-checkbox
size="xs" size="xs"
:class="$q.screen.gt.xs ? 'q-pl-lg' : 'q-pl-sm'"
v-model="attributes.showTotalPrice" v-model="attributes.showTotalPrice"
:label="$t('productService.service.showTotalPrice')" :label="$t('productService.service.showTotalPrice')"
style="color: hsl(var(--text-mute-2))" style="color: hsl(var(--text-mute-2))"
:disable="readonly" :disable="readonly"
/> />
<AddButton
v-if="!readonly"
icon-only
id="btn-add-work-product"
for="btn-add-work-product"
@click.stop="$emit('addProduct')"
/>
</span> </span>
<AddButton
v-if="!readonly"
icon-only
id="btn-add-work-product"
for="btn-add-work-product"
@click.stop="$emit('addProduct')"
/>
</div> </div>
<div <div
@ -302,19 +304,19 @@ watch(
<section <section
v-for="(product, index) in productItems" v-for="(product, index) in productItems"
:key="product.id" :key="product.id"
class="full-width row items-center justify-between" class="full-width items-center justify-between row"
> >
<div <div
class="row col items-center justify-between full-width surface-1 q-px-sm q-py-xs" class="row col-md col-12 items-center justify-between full-width surface-1 q-px-sm q-py-xs rounded"
style="min-height: 70px" style="min-height: 70px"
> >
<!-- product detail --> <!-- product detail -->
<section <section
class="row items-center col-md col-12 no-wrap" class="row items-center col-md col-12"
v-if="productItems" v-if="productItems"
> >
<q-btn <q-btn
v-if="!readonly && $q.screen.gt.xs" v-if="!readonly"
id="btn-product-up" id="btn-product-up"
icon="mdi-arrow-up" icon="mdi-arrow-up"
dense dense
@ -326,7 +328,7 @@ watch(
@click.stop="$emit('moveProductUp', productItems, index)" @click.stop="$emit('moveProductUp', productItems, index)"
/> />
<q-btn <q-btn
v-if="!readonly && $q.screen.gt.xs" v-if="!readonly"
id="btn-product-down" id="btn-product-down"
for="btn-product-down" for="btn-product-down"
icon="mdi-arrow-down" icon="mdi-arrow-down"
@ -347,25 +349,32 @@ watch(
{{ index + 1 }} {{ index + 1 }}
</q-avatar> </q-avatar>
<div class="col row no-wrap items-center"> <div
class="col-md col-12 row items-center"
:class="{ 'q-pt-sm': $q.screen.lt.md }"
>
<div <div
v-if="$q.screen.gt.xs" :class="{ 'col-12 flex justify-center': $q.screen.lt.md }"
class="bordered q-mx-md col-3 image-box"
> >
<q-img <div class="bordered q-mx-md col-md-3 image-box">
:src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`" <q-img
style="object-fit: cover; width: 100%; height: 100%" :src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`"
> style="object-fit: cover; width: 100%; height: 100%"
<template #error> >
<div <template #error>
class="surface-3 full-width full-height no-padding" <div
> class="surface-3 full-width full-height no-padding"
<q-img src="blank-image.png"></q-img> >
</div> <q-img src="blank-image.png"></q-img>
</template> </div>
</q-img> </template>
</q-img>
</div>
</div> </div>
<article class="column col full-width justify-between"> <article
class="column col-md col-12 full-width justify-between"
:class="{ 'q-py-sm': $q.screen.lt.md }"
>
<span <span
class="text-weight-medium ellipsis-2-lines full-width" class="text-weight-medium ellipsis-2-lines full-width"
> >
@ -391,7 +400,8 @@ watch(
<span class="col-12 row" style="color: var(--teal-9)"> <span class="col-12 row" style="color: var(--teal-9)">
<span <span
v-if="priceDisplay?.price" v-if="priceDisplay?.price"
class="col ellipsis price-orange text-weight-bold" class="col-md col-12 ellipsis price-orange text-weight-bold"
:class="{ 'row justify-between': $q.screen.lt.md }"
> >
<div class="text-caption app-text-muted-2"> <div class="text-caption app-text-muted-2">
{{ $t('productService.product.salePrice') }} {{ $t('productService.product.salePrice') }}
@ -407,7 +417,8 @@ watch(
</span> </span>
<span <span
v-if="priceDisplay?.agentPrice" v-if="priceDisplay?.agentPrice"
class="col ellipsis price-purple text-weight-bold" class="col-md col-12 ellipsis price-purple text-weight-bold"
:class="{ 'row justify-between': $q.screen.lt.md }"
> >
<div class="text-caption app-text-muted-2"> <div class="text-caption app-text-muted-2">
{{ $t('productService.product.agentPrice') }} {{ $t('productService.product.agentPrice') }}
@ -423,7 +434,8 @@ watch(
</span> </span>
<span <span
v-if="priceDisplay?.serviceCharge" v-if="priceDisplay?.serviceCharge"
class="col ellipsis price-pink column" class="col-md col-12 ellipsis price-pink"
:class="{ 'row justify-between': $q.screen.lt.md }"
> >
<div class="text-caption app-text-muted-2"> <div class="text-caption app-text-muted-2">
{{ $t('productService.product.processingPrice') }} {{ $t('productService.product.processingPrice') }}
@ -437,14 +449,16 @@ watch(
฿{{ formatNumberDecimal(product.serviceCharge, 2) }} ฿{{ formatNumberDecimal(product.serviceCharge, 2) }}
</q-tooltip> </q-tooltip>
</span> </span>
<span class="col ellipsis column text-weight-medium"> <span
class="col-md col-12 ellipsis text-weight-medium"
:class="{ 'row justify-between': $q.screen.lt.md }"
>
<div class="text-caption app-text-muted-2"> <div class="text-caption app-text-muted-2">
{{ $t('productService.service.InstallmentsNo') }} {{ $t('productService.service.InstallmentsNo') }}
</div> </div>
{{ !readonly ? '' : product.installmentNo }} {{ !readonly ? '' : product.installmentNo }}
<span class="row justify-end"> <span v-if="!readonly" class="row justify-end">
<q-input <q-input
v-if="!readonly && $q.screen.gt.xs"
outlined outlined
:max="installments" :max="installments"
input-class="text-right no-padding" input-class="text-right no-padding"
@ -462,21 +476,25 @@ watch(
</div> </div>
</div> </div>
<q-btn <div
v-if="!readonly" :class="{ 'col-12 row justify-end q-mt-sm': $q.screen.lt.md }"
class="q-ml-md"
id="btn-delete-work-product"
for="btn-delete-work-product"
icon="mdi-trash-can-outline"
padding="0"
dense
flat
round
color="negative"
@click.stop="$emit('deleteProduct', productItems, index)"
> >
<q-tooltip>{{ $t('general.delete') }}</q-tooltip> <q-btn
</q-btn> v-if="!readonly"
class="q-ml-md"
id="btn-delete-work-product"
for="btn-delete-work-product"
icon="mdi-trash-can-outline"
padding="0"
dense
flat
round
color="negative"
@click.stop="$emit('deleteProduct', productItems, index)"
>
<q-tooltip>{{ $t('general.delete') }}</q-tooltip>
</q-btn>
</div>
</section> </section>
</div> </div>
<div v-else class="app-text-muted q-py-md q-px-md"> <div v-else class="app-text-muted q-py-md q-px-md">
@ -594,7 +612,11 @@ watch(
v-if="productItems.length > 0" v-if="productItems.length > 0"
class="surface-1 rounded q-pa-xs" class="surface-1 rounded q-pa-xs"
> >
<div v-for="product in productItems" :key="product.id"> <div
v-for="product in productItems"
:key="product.id"
class="ellipsis-2-lines"
>
<q-checkbox <q-checkbox
v-if="attributes.workflowStep[stepIndex].productsId" v-if="attributes.workflowStep[stepIndex].productsId"
:disable="readonly" :disable="readonly"