324 lines
10 KiB
Vue
324 lines
10 KiB
Vue
<script lang="ts" setup>
|
|
import { Icon } from '@iconify/vue';
|
|
import { formatNumberDecimal } from 'src/stores/utils';
|
|
|
|
import useProductServiceStore from 'src/stores/product-service';
|
|
import { ProductList } from 'src/stores/product-service/types';
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
const productServiceStore = useProductServiceStore();
|
|
|
|
const { fetchListOfWork } = productServiceStore;
|
|
const { workNameItems } = storeToRefs(productServiceStore);
|
|
|
|
defineProps<{
|
|
workIndex: number;
|
|
length: number;
|
|
index: number;
|
|
readonly?: boolean;
|
|
}>();
|
|
|
|
const workName = defineModel<string>('workName');
|
|
const productItems = defineModel<(ProductList & { nameEn: string })[]>(
|
|
'productItems',
|
|
{
|
|
required: true,
|
|
},
|
|
);
|
|
|
|
defineEmits<{
|
|
(e: 'moveWorkUp'): void;
|
|
(e: 'moveWorkDown'): void;
|
|
(e: 'deleteWork'): void;
|
|
(e: 'addProduct'): void;
|
|
(e: 'moveProductUp', items: unknown[], index: number): void;
|
|
(e: 'moveProductDown', items: unknown[], index: number): void;
|
|
(e: 'deleteProduct', items: unknown[], index: number): void;
|
|
|
|
(e: 'manageWorkName'): void;
|
|
(e: 'workProperties'): void;
|
|
}>();
|
|
</script>
|
|
<template>
|
|
<div class="bordered rounded">
|
|
<q-expansion-item
|
|
dense
|
|
switch-toggle-side
|
|
default-opened
|
|
expand-icon="mdi-chevron-down-circle"
|
|
header-class="surface-2 expansion-rounded"
|
|
header-style="border-top-left-radius: var(--radius-2); border-top-right-radius: var(--radius-2)"
|
|
>
|
|
<template v-slot:header>
|
|
<div class="row items-center q-py-sm full-width" @click.stop>
|
|
<q-btn
|
|
v-if="!readonly"
|
|
id="btn-work-up-product"
|
|
icon="mdi-arrow-up"
|
|
dense
|
|
flat
|
|
round
|
|
:disable="index === 0"
|
|
style="color: hsl(var(--text-mute-2))"
|
|
@click.stop="$emit('moveWorkUp')"
|
|
/>
|
|
<q-btn
|
|
v-if="!readonly"
|
|
id="btn-work-down-product"
|
|
icon="mdi-arrow-down"
|
|
dense
|
|
flat
|
|
round
|
|
class="q-mx-sm"
|
|
:disable="index === length - 1"
|
|
style="color: hsl(var(--text-mute-2))"
|
|
@click.stop="$emit('moveWorkDown')"
|
|
/>
|
|
<div
|
|
for="select-work-name"
|
|
class="col rounded q-py-sm q-px-md"
|
|
:class="{ bordered: !readonly }"
|
|
: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">
|
|
{{ workName ? workName : $t('workName') }}
|
|
</span>
|
|
</span>
|
|
|
|
<q-menu v-if="!readonly" fit anchor="bottom left" self="top left">
|
|
<q-item>
|
|
<div class="full-width flex items-center justify-between">
|
|
{{ $t('workName') }}
|
|
<q-btn
|
|
dense
|
|
unelevated
|
|
class="bordered q-px-sm"
|
|
style="
|
|
border-radius: var(--radius-2);
|
|
color: hsl(var(--info-bg));
|
|
"
|
|
@click.stop="$emit('manageWorkName')"
|
|
>
|
|
<q-icon name="mdi-cog" size="xs" class="q-mr-sm" />
|
|
{{ $t('manage') }}
|
|
</q-btn>
|
|
</div>
|
|
</q-item>
|
|
<q-item
|
|
@click="workName = item.name"
|
|
clickable
|
|
v-for="(item, index) in workNameItems"
|
|
:key="index"
|
|
>
|
|
<div class="full-width flex items-center">
|
|
<q-icon
|
|
v-if="workName === item.name"
|
|
name="mdi-checkbox-marked"
|
|
size="xs"
|
|
color="primary"
|
|
class="q-mr-sm"
|
|
/>
|
|
<q-icon
|
|
v-else
|
|
name="mdi-checkbox-blank-outline"
|
|
size="xs"
|
|
style="color: hsl(var(--text-mute))"
|
|
class="q-mr-sm"
|
|
/>
|
|
{{ item.name }}
|
|
</div>
|
|
</q-item>
|
|
</q-menu>
|
|
</div>
|
|
<q-btn
|
|
v-if="!readonly"
|
|
id="btn-delete-work"
|
|
icon="mdi-trash-can-outline"
|
|
dense
|
|
flat
|
|
round
|
|
padding="0"
|
|
color="negative"
|
|
class="q-ml-sm"
|
|
@click.stop="$emit('deleteWork')"
|
|
>
|
|
<q-tooltip>{{ $t('delete') }}</q-tooltip>
|
|
</q-btn>
|
|
</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')"
|
|
/>
|
|
</div>
|
|
|
|
<div class="q-py-md q-px-lg full-width q-gutter-y-sm">
|
|
<div
|
|
v-for="(product, index) in productItems"
|
|
:key="product.id"
|
|
class="full-width row items-center justify-between"
|
|
>
|
|
<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>
|
|
|
|
<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>
|
|
{{
|
|
$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>
|
|
|
|
<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>
|
|
</div>
|
|
</q-expansion-item>
|
|
<div class="q-py-sm q-px-md bordered-t row items-center justify-between">
|
|
<div>
|
|
{{ $t('totalProductWork') }}
|
|
<span class="app-text-muted-2">
|
|
{{ workName }}
|
|
</span>
|
|
</div>
|
|
<div>{{ productItems?.length ?? 0 }} {{ $t('list') }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.image-box {
|
|
height: 70px;
|
|
width: 70px;
|
|
border-color: var(--teal-9);
|
|
border-radius: 10px;
|
|
background-color: var(--surface-3);
|
|
}
|
|
|
|
:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
|
|
color: var(--brand-1);
|
|
}
|
|
|
|
:deep(
|
|
.q-item__section.column.q-item__section--side.justify-center.q-item__section--avatar.q-focusable.relative-position.cursor-pointer
|
|
) {
|
|
padding-right: 8px !important;
|
|
min-width: 0px;
|
|
}
|
|
</style>
|