fix: new service & work properties
This commit is contained in:
puriphatt
parent
82560b6abd
commit
d67e6e13dd
7 changed files with 312 additions and 189 deletions
|
|
@ -106,25 +106,7 @@ defineEmits<{
|
|||
class="col-9"
|
||||
:label="$t('serviceName')"
|
||||
v-model="serviceName"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-btn
|
||||
v-if="!readonly"
|
||||
dense
|
||||
unelevated
|
||||
round
|
||||
padding="0"
|
||||
style="background-color: var(--surface-tab)"
|
||||
@click="$emit('serviceProperties')"
|
||||
>
|
||||
<Icon
|
||||
icon="basil:settings-adjust-solid"
|
||||
width="24px"
|
||||
style="color: var(--stone-7)"
|
||||
/>
|
||||
</q-btn>
|
||||
</template>
|
||||
</q-input>
|
||||
/>
|
||||
<div v-if="readonly && serviceAttributes" class="col-12 q-gutter-x-md">
|
||||
<span
|
||||
v-for="(p, index) in serviceAttributes.additional"
|
||||
|
|
|
|||
63
src/components/04_product-service/FormServiceProperties.vue
Normal file
63
src/components/04_product-service/FormServiceProperties.vue
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<script setup lang="ts">
|
||||
import useOptionStore from 'src/stores/options';
|
||||
import { Attributes } from 'src/stores/product-service/types';
|
||||
import { Icon } from '@iconify/vue';
|
||||
|
||||
const optionStore = useOptionStore();
|
||||
|
||||
defineProps<{
|
||||
readonly?: boolean;
|
||||
}>();
|
||||
|
||||
const serviceAttributes = defineModel<Attributes>('serviceAttributes', {
|
||||
required: true,
|
||||
});
|
||||
|
||||
defineEmits<{
|
||||
(e: 'serviceProperties'): void;
|
||||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-3 app-text-muted">
|
||||
• {{ $t(`formDialogTitleInformation`) }}
|
||||
<div>
|
||||
<q-btn
|
||||
:disable="readonly"
|
||||
dense
|
||||
unelevated
|
||||
outline
|
||||
class="q-mt-sm q-px-sm"
|
||||
color="primary"
|
||||
@click="$emit('serviceProperties')"
|
||||
>
|
||||
<Icon
|
||||
icon="basil:settings-adjust-solid"
|
||||
width="24px"
|
||||
class="q-mr-sm"
|
||||
style="color: var(--brand-1)"
|
||||
/>
|
||||
{{ $t('properties') }}
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-9 row">
|
||||
<div
|
||||
v-if="serviceAttributes.additional.length > 0"
|
||||
class="col q-gutter-sm row items-center"
|
||||
>
|
||||
<div
|
||||
v-for="(p, index) in serviceAttributes.additional"
|
||||
:key="index"
|
||||
class="bordered q-px-sm surface-3"
|
||||
style="border-radius: 6px"
|
||||
>
|
||||
{{ optionStore.mapOption(p.fieldName ?? '') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="col flex items-center app-text-muted">
|
||||
{{ $t('noProperties') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -50,7 +50,7 @@ function confirmDelete(items: unknown[], index: number) {
|
|||
|
||||
<template>
|
||||
<div class="column col-12 full-height">
|
||||
<div class="col-1 app-text-muted row items-start">
|
||||
<div class="app-text-muted row items-start">
|
||||
• {{ $t(`workInformation`) }}
|
||||
<q-btn
|
||||
v-if="!readonly"
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ defineProps<{
|
|||
}>();
|
||||
|
||||
const workName = defineModel<string>('workName');
|
||||
const attributes = defineModel<Attributes>('attributes');
|
||||
const attributes = defineModel<Attributes>('attributes', { required: true });
|
||||
const productItems = defineModel<(ProductList & { nameEn: string })[]>(
|
||||
'productItems',
|
||||
{
|
||||
|
|
@ -85,22 +85,6 @@ defineEmits<{
|
|||
:style="`background-color:${readonly ? 'var(--surface-2)' : 'var(--surface-1); z-index: 2'}`"
|
||||
@click="() => (readonly ? '' : fetchListOfWork())"
|
||||
>
|
||||
<q-btn
|
||||
v-if="!readonly"
|
||||
dense
|
||||
unelevated
|
||||
round
|
||||
padding="0"
|
||||
class="q-mr-sm"
|
||||
style="background-color: var(--surface-tab)"
|
||||
@click.stop="$emit('workProperties')"
|
||||
>
|
||||
<Icon
|
||||
icon="basil:settings-adjust-solid"
|
||||
width="24px"
|
||||
style="color: var(--stone-7)"
|
||||
/>
|
||||
</q-btn>
|
||||
<span class="text-body2" style="color: var(--foreground)">
|
||||
{{ $t('workNo') }} {{ index + 1 }} :
|
||||
<span class="app-text-muted-2">
|
||||
|
|
@ -168,143 +152,186 @@ defineEmits<{
|
|||
<q-tooltip>{{ $t('delete') }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="readonly && attributes"
|
||||
class="row q-pb-md q-px-md q-gutter-x-md"
|
||||
>
|
||||
<span
|
||||
v-for="(p, index) in attributes.additional"
|
||||
:key="index"
|
||||
class="bordered q-px-sm surface-tab"
|
||||
style="border-radius: 6px"
|
||||
>
|
||||
{{ optionStore.mapOption(p.fieldName ?? '') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="surface-2">
|
||||
<div
|
||||
class="q-py-xs text-weight-medium row justify-between items-center q-px-md"
|
||||
style="background-color: hsla(var(--info-bg) / 0.1)"
|
||||
>
|
||||
<span>{{ $t('productInWork') }} {{ workIndex + 1 }}</span>
|
||||
<q-btn
|
||||
v-if="!readonly"
|
||||
id="btn-add-work-product"
|
||||
flat
|
||||
dense
|
||||
icon="mdi-plus"
|
||||
:label="$t('serviceAddProduct')"
|
||||
padding="0"
|
||||
style="color: hsl(var(--info-bg))"
|
||||
@click.stop="$emit('addProduct')"
|
||||
/>
|
||||
<!-- properties -->
|
||||
<div class="bordered-t">
|
||||
<div
|
||||
class="q-py-xs text-weight-medium row justify-between items-center q-px-md"
|
||||
style="background-color: hsla(var(--info-bg) / 0.1)"
|
||||
>
|
||||
<span>{{ $t('propertiesInWork') }} {{ workIndex + 1 }}</span>
|
||||
<q-btn
|
||||
v-if="!readonly"
|
||||
id="btn-add-work-product"
|
||||
flat
|
||||
dense
|
||||
padding="0"
|
||||
style="color: hsl(var(--info-bg))"
|
||||
@click.stop="$emit('workProperties')"
|
||||
>
|
||||
<Icon
|
||||
icon="basil:settings-adjust-solid"
|
||||
width="24px"
|
||||
class="q-mr-sm"
|
||||
style="color: hsl(var(--info-bg))"
|
||||
/>
|
||||
{{ $t('properties') }}
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div class="q-py-md q-px-lg full-width">
|
||||
<div
|
||||
v-if="attributes.additional.length > 0"
|
||||
class="row items-center full-width surface-1 q-py-md q-px-sm q-gutter-sm"
|
||||
>
|
||||
<div
|
||||
v-for="(p, index) in attributes.additional"
|
||||
:key="index"
|
||||
class="bordered q-px-sm surface-3"
|
||||
style="border-radius: 6px"
|
||||
>
|
||||
{{ optionStore.mapOption(p.fieldName ?? '') }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="app-text-muted">
|
||||
{{ $t('noProperties') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="q-py-md q-px-lg full-width q-gutter-y-sm">
|
||||
<!-- product -->
|
||||
<div class="bordered-t">
|
||||
<div
|
||||
v-for="(product, index) in productItems"
|
||||
:key="product.id"
|
||||
class="full-width row items-center justify-between"
|
||||
class="q-py-xs text-weight-medium row justify-between items-center q-px-md"
|
||||
style="background-color: hsla(var(--info-bg) / 0.1)"
|
||||
>
|
||||
<span>{{ $t('productInWork') }} {{ workIndex + 1 }}</span>
|
||||
<q-btn
|
||||
v-if="!readonly"
|
||||
id="btn-add-work-product"
|
||||
flat
|
||||
dense
|
||||
icon="mdi-plus"
|
||||
:label="$t('serviceAddProduct')"
|
||||
padding="0"
|
||||
style="color: hsl(var(--info-bg))"
|
||||
@click.stop="$emit('addProduct')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="productItems.length > 0"
|
||||
class="q-py-md q-px-lg full-width q-gutter-y-sm"
|
||||
>
|
||||
<div
|
||||
class="row col items-center justify-between full-width surface-1 q-py-md q-px-sm"
|
||||
v-for="(product, index) in productItems"
|
||||
:key="product.id"
|
||||
class="full-width row items-center justify-between"
|
||||
>
|
||||
<div class="row items-center col-9 no-wrap" v-if="productItems">
|
||||
<q-btn
|
||||
v-if="!readonly"
|
||||
id="btn-product-up"
|
||||
icon="mdi-arrow-up"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
:disable="index === 0"
|
||||
style="color: hsl(var(--text-mute-2))"
|
||||
@click.stop="$emit('moveProductUp', productItems, index)"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="!readonly"
|
||||
id="btn-product-down"
|
||||
icon="mdi-arrow-down"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
class="q-mx-sm"
|
||||
:disable="index === productItems.length - 1"
|
||||
style="color: hsl(var(--text-mute-2))"
|
||||
@click.stop="$emit('moveProductDown', productItems, index)"
|
||||
/>
|
||||
<div
|
||||
class="row col items-center justify-between full-width surface-1 q-py-md q-px-sm"
|
||||
>
|
||||
<div class="row items-center col-9 no-wrap" v-if="productItems">
|
||||
<q-btn
|
||||
v-if="!readonly"
|
||||
id="btn-product-up"
|
||||
icon="mdi-arrow-up"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
:disable="index === 0"
|
||||
style="color: hsl(var(--text-mute-2))"
|
||||
@click.stop="$emit('moveProductUp', productItems, index)"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="!readonly"
|
||||
id="btn-product-down"
|
||||
icon="mdi-arrow-down"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
class="q-mx-sm"
|
||||
:disable="index === productItems.length - 1"
|
||||
style="color: hsl(var(--text-mute-2))"
|
||||
@click.stop="$emit('moveProductDown', productItems, index)"
|
||||
/>
|
||||
|
||||
<q-avatar
|
||||
size="md"
|
||||
class="q-mx-lg"
|
||||
style="background-color: var(--surface-tab)"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</q-avatar>
|
||||
<q-avatar
|
||||
size="md"
|
||||
class="q-mx-lg"
|
||||
style="background-color: var(--surface-tab)"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</q-avatar>
|
||||
|
||||
<div class="row no-wrap">
|
||||
<div class="bordered q-mx-md col-3 image-box">
|
||||
<q-img
|
||||
src="blank-image.png"
|
||||
style="object-fit: cover; width: 100%; height: 100%"
|
||||
></q-img>
|
||||
</div>
|
||||
<div class="column col justify-between">
|
||||
<span
|
||||
class="text-weight-bold ellipsis-2-lines"
|
||||
:style="`max-width: ${$q.screen.gt.sm ? '25vw' : '20vw'}`"
|
||||
>
|
||||
{{
|
||||
$i18n.locale === 'en-US' ? product.nameEn : product.name
|
||||
}}
|
||||
<q-tooltip>
|
||||
<div class="row no-wrap">
|
||||
<div class="bordered q-mx-md col-3 image-box">
|
||||
<q-img
|
||||
src="blank-image.png"
|
||||
style="object-fit: cover; width: 100%; height: 100%"
|
||||
></q-img>
|
||||
</div>
|
||||
<div class="column col justify-between">
|
||||
<span
|
||||
class="text-weight-bold ellipsis-2-lines"
|
||||
:style="`max-width: ${$q.screen.gt.sm ? '25vw' : '20vw'}`"
|
||||
>
|
||||
{{
|
||||
$i18n.locale === 'en-US'
|
||||
? product.nameEn
|
||||
: product.name
|
||||
}}
|
||||
</q-tooltip>
|
||||
</span>
|
||||
<div
|
||||
class="bordered q-px-sm"
|
||||
style="border-radius: 6px; max-width: 60px"
|
||||
>
|
||||
{{ product.code }}
|
||||
<q-tooltip>
|
||||
{{
|
||||
$i18n.locale === 'en-US'
|
||||
? product.nameEn
|
||||
: product.name
|
||||
}}
|
||||
</q-tooltip>
|
||||
</span>
|
||||
<div
|
||||
class="bordered q-px-sm"
|
||||
style="border-radius: 6px; max-width: 60px"
|
||||
>
|
||||
{{ product.code }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-end text-right col-3 q-pr-sm">
|
||||
<span
|
||||
class="col-12 text-weight-bold text-h6"
|
||||
style="color: var(--teal-9)"
|
||||
>
|
||||
฿ {{ formatNumberDecimal(product.price, 2) }}
|
||||
</span>
|
||||
<span class="col-9 text-caption app-text-muted-2">
|
||||
{{ $t('processTime') }}
|
||||
</span>
|
||||
<span class="col-3 text-caption app-text-muted-2">
|
||||
{{ product.process }} {{ $t('day') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-end text-right col-3 q-pr-sm">
|
||||
<span
|
||||
class="col-12 text-weight-bold text-h6"
|
||||
style="color: var(--teal-9)"
|
||||
>
|
||||
฿ {{ formatNumberDecimal(product.price, 2) }}
|
||||
</span>
|
||||
<span class="col-9 text-caption app-text-muted-2">
|
||||
{{ $t('processTime') }}
|
||||
</span>
|
||||
<span class="col-3 text-caption app-text-muted-2">
|
||||
{{ product.process }} {{ $t('day') }}
|
||||
</span>
|
||||
</div>
|
||||
<q-btn
|
||||
v-if="!readonly"
|
||||
id="btn-delete-work-product"
|
||||
icon="mdi-trash-can-outline"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="negative"
|
||||
class="q-mx-sm"
|
||||
@click.stop="$emit('deleteProduct', productItems, index)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
v-if="!readonly"
|
||||
id="btn-delete-work-product"
|
||||
icon="mdi-trash-can-outline"
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="negative"
|
||||
class="q-mx-sm"
|
||||
@click.stop="$emit('deleteProduct', productItems, index)"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="app-text-muted q-py-md q-px-lg">
|
||||
{{ $t('noProduct') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue