refactor: 04 => enhance layout and responsiveness for WorkManagementComponent
This commit is contained in:
puriphatt
parent
debfa874f3
commit
ca0dcbdad0
1 changed files with 90 additions and 68 deletions
|
|
@ -241,20 +241,22 @@ watch(
|
|||
</span>
|
||||
</template>
|
||||
</SelectInput> -->
|
||||
<q-btn
|
||||
v-if="!readonly"
|
||||
id="btn-delete-work"
|
||||
icon="mdi-trash-can-outline"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
padding="0"
|
||||
class="q-ml-md"
|
||||
color="negative"
|
||||
@click.stop="$emit('deleteWork')"
|
||||
>
|
||||
<q-tooltip>{{ $t('general.delete') }}</q-tooltip>
|
||||
</q-btn>
|
||||
<div :class="{ 'col-12 row justify-end q-mt-sm': $q.screen.lt.md }">
|
||||
<q-btn
|
||||
v-if="!readonly"
|
||||
id="btn-delete-work"
|
||||
icon="mdi-trash-can-outline"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
padding="0"
|
||||
class="q-ml-md"
|
||||
color="negative"
|
||||
@click.stop="$emit('deleteWork')"
|
||||
>
|
||||
<q-tooltip>{{ $t('general.delete') }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -270,29 +272,29 @@ watch(
|
|||
<!-- product -->
|
||||
<div class="bordered-t">
|
||||
<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)"
|
||||
>
|
||||
<span>
|
||||
{{ $t('productService.service.productInWork') }}
|
||||
{{ workIndex + 1 }}
|
||||
{{ $t('productService.service.productInWork') }}
|
||||
{{ workIndex + 1 }}
|
||||
|
||||
<span class="row items-center justify-between">
|
||||
<q-checkbox
|
||||
size="xs"
|
||||
:class="$q.screen.gt.xs ? 'q-pl-lg' : 'q-pl-sm'"
|
||||
v-model="attributes.showTotalPrice"
|
||||
:label="$t('productService.service.showTotalPrice')"
|
||||
style="color: hsl(var(--text-mute-2))"
|
||||
:disable="readonly"
|
||||
/>
|
||||
<AddButton
|
||||
v-if="!readonly"
|
||||
icon-only
|
||||
id="btn-add-work-product"
|
||||
for="btn-add-work-product"
|
||||
@click.stop="$emit('addProduct')"
|
||||
/>
|
||||
</span>
|
||||
<AddButton
|
||||
v-if="!readonly"
|
||||
icon-only
|
||||
id="btn-add-work-product"
|
||||
for="btn-add-work-product"
|
||||
@click.stop="$emit('addProduct')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
@ -302,19 +304,19 @@ watch(
|
|||
<section
|
||||
v-for="(product, index) in productItems"
|
||||
:key="product.id"
|
||||
class="full-width row items-center justify-between"
|
||||
class="full-width items-center justify-between row"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<!-- product detail -->
|
||||
<section
|
||||
class="row items-center col-md col-12 no-wrap"
|
||||
class="row items-center col-md col-12"
|
||||
v-if="productItems"
|
||||
>
|
||||
<q-btn
|
||||
v-if="!readonly && $q.screen.gt.xs"
|
||||
v-if="!readonly"
|
||||
id="btn-product-up"
|
||||
icon="mdi-arrow-up"
|
||||
dense
|
||||
|
|
@ -326,7 +328,7 @@ watch(
|
|||
@click.stop="$emit('moveProductUp', productItems, index)"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="!readonly && $q.screen.gt.xs"
|
||||
v-if="!readonly"
|
||||
id="btn-product-down"
|
||||
for="btn-product-down"
|
||||
icon="mdi-arrow-down"
|
||||
|
|
@ -347,25 +349,32 @@ watch(
|
|||
{{ index + 1 }}
|
||||
</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
|
||||
v-if="$q.screen.gt.xs"
|
||||
class="bordered q-mx-md col-3 image-box"
|
||||
:class="{ 'col-12 flex justify-center': $q.screen.lt.md }"
|
||||
>
|
||||
<q-img
|
||||
:src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`"
|
||||
style="object-fit: cover; width: 100%; height: 100%"
|
||||
>
|
||||
<template #error>
|
||||
<div
|
||||
class="surface-3 full-width full-height no-padding"
|
||||
>
|
||||
<q-img src="blank-image.png"></q-img>
|
||||
</div>
|
||||
</template>
|
||||
</q-img>
|
||||
<div class="bordered q-mx-md col-md-3 image-box">
|
||||
<q-img
|
||||
:src="`${baseUrl}/product/${product.id}/image/${product.selectedImage}`"
|
||||
style="object-fit: cover; width: 100%; height: 100%"
|
||||
>
|
||||
<template #error>
|
||||
<div
|
||||
class="surface-3 full-width full-height no-padding"
|
||||
>
|
||||
<q-img src="blank-image.png"></q-img>
|
||||
</div>
|
||||
</template>
|
||||
</q-img>
|
||||
</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
|
||||
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
|
||||
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">
|
||||
{{ $t('productService.product.salePrice') }}
|
||||
|
|
@ -407,7 +417,8 @@ watch(
|
|||
</span>
|
||||
<span
|
||||
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">
|
||||
{{ $t('productService.product.agentPrice') }}
|
||||
|
|
@ -423,7 +434,8 @@ watch(
|
|||
</span>
|
||||
<span
|
||||
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">
|
||||
{{ $t('productService.product.processingPrice') }}
|
||||
|
|
@ -437,14 +449,16 @@ watch(
|
|||
฿{{ formatNumberDecimal(product.serviceCharge, 2) }}
|
||||
</q-tooltip>
|
||||
</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">
|
||||
{{ $t('productService.service.InstallmentsNo') }}
|
||||
</div>
|
||||
{{ !readonly ? '' : product.installmentNo }}
|
||||
<span class="row justify-end">
|
||||
<span v-if="!readonly" class="row justify-end">
|
||||
<q-input
|
||||
v-if="!readonly && $q.screen.gt.xs"
|
||||
outlined
|
||||
:max="installments"
|
||||
input-class="text-right no-padding"
|
||||
|
|
@ -462,21 +476,25 @@ watch(
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<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)"
|
||||
<div
|
||||
:class="{ 'col-12 row justify-end q-mt-sm': $q.screen.lt.md }"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
<div v-else class="app-text-muted q-py-md q-px-md">
|
||||
|
|
@ -594,7 +612,11 @@ watch(
|
|||
v-if="productItems.length > 0"
|
||||
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
|
||||
v-if="attributes.workflowStep[stepIndex].productsId"
|
||||
:disable="readonly"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue