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

refactor: quotation form & product service

Browse source
This commit is contained in:
puriphatt 2024-10-03 15:33:20 +07:00
parent 8698268836
commit c51f664beb
2 changed files with 90 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/pages/05_quotation/ProductServiceForm.vue
View file

@ -140,6 +140,7 @@ function mapCard() {
attributes: s.attributes,
createAt: s.createdAt,
selectedImage: s.selectedImage,
raw: s,
})) || [],
product:
productList.value[selectedProductGroup.value]?.map((p) => ({
@ -154,6 +155,7 @@ function mapCard() {
serviceCharge: p.serviceCharge,
process: p.process,
selectedImage: p.selectedImage,
raw: p,
})) || [],
};
@ -165,15 +167,12 @@ function mapNode() {
const node = selectedItems.value.map((v: Node) => {
if (v.type === 'service') {
return {
type: 'type',
id: v.id,
title: v.name,
subtitle: v.code,
detail: v.detail,
attributes: {
additional: v.attributes.additional,
},
raw: v.raw,
opened: v.work.length > 0,
type: 'type',
icon: 'mdi-server-outline',
bg: 'hsla(var(--orange-5-hsl)/0.1)',
fg: 'var(--orange-5)',
@ -182,38 +181,30 @@ function mapNode() {
.filter((w: Work) => !w.name)
.flatMap((w: Work) =>
w.productOnWork.map((p) => ({
type: 'product',
id: p.product.id,
title: p.product.name,
subtitle: p.product.code || ' ',
detail: p.product.detail,
remark: p.product.remark,
price: p.product.price,
agentPrice: p.product.agentPrice,
serviceCharge: p.product.serviceCharge,
raw: p.product,
icon: 'mdi-shopping-outline',
bg: 'hsla(var(--teal-10-hsl)/0.1)',
fg: 'var(--teal-10)',
type: 'product',
})),
);
const withNameObjects = v.work
.filter((w: Work) => w.name)
.flatMap((w: Work) => ({
type: 'work',
id: w.id,
title: w.name,
subtitle: ' ',
attributes: w.attributes,
type: 'work',
raw: w,
opened: w.productOnWork.length > 0,
children: w.productOnWork.map((p) => ({
id: p.product.id,
title: p.product.name,
subtitle: p.product.code || ' ',
detail: p.product.detail,
remark: p.product.remark,
price: p.product.price,
agentPrice: p.product.agentPrice,
serviceCharge: p.product.serviceCharge,
raw: p.product,
type: 'product',
})),
}));
@ -225,11 +216,7 @@ function mapNode() {
id: v.id,
title: v.name,
subtitle: v.code,
detail: v.detail,
remark: v.remark,
price: v.price,
agentPrice: v.agentPrice,
serviceCharge: v.serviceCharge,
raw: v.raw,
type: 'product',
icon: 'mdi-shopping-outline',
bg: 'hsla(var(--teal-10-hsl)/0.1)',
@ -525,7 +512,7 @@ watch(
<div
class="row text-capitalize"
:class="
pageState.infoTab === 'detail'
pageState.infoTab === '1'
? 'text-bold'
: 'app-text-muted'
"
@ -537,7 +524,7 @@ watch(
<div
class="row text-capitalize"
:class="
pageState.infoTab === 'remark'
pageState.infoTab === '2'
? 'text-bold'
: 'app-text-muted'
"
@ -568,7 +555,7 @@ watch(
}}
</span>
<aside class="surface-3 q-pa-md">
{{ selectedNode[0].detail || '-' }}
{{ selectedNode[0].raw.detail || '-' }}
</aside>
</span>
@ -593,16 +580,17 @@ watch(
"
class="surface-3 q-pa-md"
>
{{ selectedNode[0].remark || '-' }}
{{ selectedNode[0].raw.remark || '-' }}
</aside>
<aside v-else class="q-pt-md row q-gutter-sm">
<template
v-if="
selectedNode[0].attributes.additional.length > 0
selectedNode[0].raw.attributes.additional
.length > 0
"
>
<div
v-for="att in selectedNode[0].attributes
v-for="att in selectedNode[0].raw.attributes
.additional"
:key="att"
class="bordered q-py-xs q-px-sm rounded"

136
src/pages/05_quotation/QuotationForm.vue
View file

@ -1,8 +1,21 @@
<script lang="ts" setup>
import { setLocale } from 'src/utils/datetime';
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';
import { QSelect, useQuasar } from 'quasar';
import { onMounted, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { setLocale } from 'src/utils/datetime';
import { dateFormat } from 'src/utils/datetime';
import useOptionStore from 'stores/options';
import { useQuotationForm } from './form';
import { Employee } from 'src/stores/employee/types';
import {
ProductGroup,
ProductList,
Service,
} from 'src/stores/product-service/types';
import { QuotationPayload } from 'src/stores/quotations/types';
import ProductServiceForm from './ProductServiceForm.vue';
import WorkerItem from 'components/05_quotation/WorkerItem.vue';
@ -14,15 +27,6 @@ import DialogForm from 'src/components/DialogForm.vue';
import SelectZone from 'src/components/shared/SelectZone.vue';
import PersonCard from 'src/components/shared/PersonCard.vue';
import { AddButton, SaveButton } from 'components/button';
import { storeToRefs } from 'pinia';
import { useQuotationForm } from './form';
import { dateFormat } from 'src/utils/datetime';
import { Employee } from 'src/stores/employee/types';
import {
ProductGroup,
ProductList,
Service,
} from 'src/stores/product-service/types';
import useProductServiceStore from 'src/stores/product-service';
type Node = {
@ -39,6 +43,7 @@ defineProps<{
readonly?: boolean;
}>();
const optionStore = useOptionStore();
const productServiceStore = useProductServiceStore();
const quotationForm = useQuotationForm();
const { locale } = useI18n();
@ -131,20 +136,12 @@ function triggerProductServiceDialog() {
// TODO: form and state controll
}
function convertToTable(nodes: Node[]): Node[] {
const products: Node[] = [];
function toggleDeleteProduct(index: number) {
console.log(index);
}
nodes.forEach((node) => {
if (node.type === 'product' && node.checked) {
products.push(node);
}
if (node.children && node.children.length !== 0) {
products.push(...convertToTable(node.children)); // Correctly push the converted children
}
});
return products;
function convertToTable(nodes: Node[]) {
console.log(nodes);
}
function changeMode(mode: string) {
@ -188,6 +185,11 @@ onMounted(async () => {
quotationFormData.value.customerBranchId =
urlParams.get('customerBranchId') || '';
const resultOption = await fetch('/option/option.json');
const rawOption = await resultOption.json();
if (locale.value === 'eng') optionStore.globalOption = rawOption.eng;
if (locale.value === 'tha') optionStore.globalOption = rawOption.tha;
const getCurLang = localStorage.getItem('currentLanguage');
if (getCurLang === 'English') {
locale.value = 'eng';
@ -270,23 +272,28 @@ onMounted(async () => {
header-class="surface-1"
>
<template v-slot:header>
<div class="row full-width items-center q-pr-md q-py-sm">
<span
class="text-weight-medium q-mr-md"
style="font-size: 18px"
>
{{ $t('quotation.employeeList') }}
</span>
<ToggleButton class="q-mr-sm" v-model="toggleWorker" />
{{
toggleWorker ? $t('general.specify') : $t('general.noSpecify')
}}
</div>
<AddButton
icon-only
class="q-ml-auto"
@click.stop="triggerSelectEmployeeDialog"
/>
<section class="row items-center full-width">
<div class="row items-center q-pr-md q-py-sm">
<span
class="text-weight-medium q-mr-md"
style="font-size: 18px"
>
{{ $t('quotation.employeeList') }}
</span>
<ToggleButton class="q-mr-sm" v-model="toggleWorker" />
{{
toggleWorker
? $t('general.specify')
: $t('general.noSpecify')
}}
</div>
<nav class="q-ml-auto">
<AddButton
icon-only
@click.stop="triggerSelectEmployeeDialog"
/>
</nav>
</section>
</template>
<div class="surface-1 q-pa-md full-width">
@ -320,27 +327,23 @@ onMounted(async () => {
header-class="surface-1"
>
<template v-slot:header>
<div class="row full-width items-center q-pr-md q-py-sm">
<span class="text-weight-medium" style="font-size: 18px">
{{ $t('quotation.productList') }}
</span>
</div>
<AddButton
icon-only
class="q-ml-auto"
@click.stop="triggerProductServiceDialog"
/>
<section class="row items-center full-width">
<div class="row items-center q-pr-md q-py-sm">
<span class="text-weight-medium" style="font-size: 18px">
{{ $t('quotation.productList') }}
</span>
</div>
<nav class="q-ml-auto">
<AddButton
icon-only
class="q-ml-auto"
@click.stop="triggerProductServiceDialog"
/>
</nav>
</section>
</template>
<div class="surface-1 q-pa-md full-width">
<ProductItem
:rows="
rows.map((p) => ({
code: p.subtitle,
name: p.title,
}))
"
/>
{{ console.log(rows) }}
<ProductItem @delete="toggleDeleteProduct" :rows="[]" />
</div>
</q-expansion-item>
@ -358,7 +361,7 @@ onMounted(async () => {
<template v-slot:header>
<div class="row full-width items-center q-pr-md q-py-sm">
<span class="text-weight-medium" style="font-size: 18px">
{{ $t('productService.group.title') }}
{{ $t('general.remark') }}
</span>
</div>
</template>
@ -501,8 +504,8 @@ onMounted(async () => {
v-model:service-list="serviceList"
@submit="
(nodes) => {
rows = convertToTable(nodes);
pageState.productServiceModal = false;
convertToTable(nodes);
// pageState.productServiceModal = false;
}
"
@select-group="
@ -597,4 +600,11 @@ onMounted(async () => {
:deep(.q-editor__toolbar) {
border-color: var(--surface-3) !important;
}
:deep(
.q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.surface-1
.q-focus-helper
) {
visibility: hidden;
}
</style>