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

refactor: quotation product tree

Browse source
This commit is contained in:
puriphatt 2024-09-30 16:35:41 +07:00
parent 5d1d1f36e0
commit 66b30b9e3f
5 changed files with 251 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

184
src/pages/05_quotation/MainPage.vue
View file

@ -65,6 +65,17 @@ import { useQuotationStore } from 'src/stores/quotations';
import QuotationView from './QuotationView.vue';
import { watch } from 'vue';
type Node = {
[key: string]: any;
opened?: boolean;
checked?: boolean;
bg?: string;
fg?: string;
icon?: string;
displayDropIcon?: boolean;
children?: Node[];
};
const flowStore = useFlowStore();
const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
{
@ -91,49 +102,92 @@ const { state: customerFormState, currentFormData: customerFormData } =
const { state: employeeFormState, currentFromDataEmployee } =
storeToRefs(employeeFormStore);
const test1 = ref(true);
const test2 = ref(true);
const test1 = ref(false);
const test2 = ref(false);
const dialog = ref(true);
const nodes = ref([
const nodes = ref<Node[]>([
{
title: 'กลุ่มสินค้าและบริการที่ 1',
subtitle: 'TG01000000001',
selected: false,
type: 'group',
children: [
{
title: 'งานที่ 1',
title:
'บริการค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)',
subtitle: 'TG01000000001',
selected: false,
type: 'type',
children: [
{
title: 'สินค้า 1',
title: 'งาน 1',
subtitle: 'TG01000000001',
selected: false,
type: 'work',
children: [
{
title: 'สินค้า 1',
subtitle: 'TG01000000001',
selected: false,
type: 'product',
},
{
title: 'สินค้า 2',
subtitle: 'TG01000000001',
selected: false,
type: 'product',
},
{
title: 'สินค้า 3',
subtitle: 'TG01000000001',
selected: false,
type: 'product',
},
],
},
],
},
],
},
{
title: 'กลุ่มสินค้าและบริการที่ 2',
subtitle: 'TG01000000001',
selected: false,
type: 'group',
children: [
{
title:
'บริการค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)',
subtitle: 'TG01000000001',
selected: false,
type: 'type',
children: [
{
title: 'สินค้า 2',
subtitle: 'TG01000000001',
selected: false,
},
{
title: 'สินค้า 3',
subtitle: 'TG01000000001',
selected: false,
},
{
title: 'สินค้า 4',
subtitle: 'TG01000000001',
selected: false,
},
{
title: 'สินค้า 5',
subtitle: 'TG01000000001',
selected: false,
},
{
title: 'สินค้า 6',
title: 'งาน 1',
subtitle: 'TG01000000001',
selected: false,
type: 'work',
children: [
{
title: 'สินค้า 1',
subtitle: 'TG01000000001',
selected: false,
type: 'product',
},
{
title: 'สินค้า 2',
subtitle: 'TG01000000001',
selected: false,
type: 'product',
},
{
title: 'สินค้า 3',
subtitle: 'TG01000000001',
selected: false,
type: 'product',
},
],
},
],
},
@ -288,8 +342,75 @@ async function getService(id: string, force = false) {
}
function convertToTree() {
// TODO: convert product or service into selectable tree
// NOTE: this is meant to be used inside getService() and getProduct() before return and after return
const node = productGroup.value.map((g) => ({
id: g.id,
title: g.name,
subtitle: g.code,
detail: g.detail,
remark: g.remark,
type: 'group',
displayDropIcon: g._count.service + g._count.product !== 0,
}));
nodes.value = node;
}
async function openProductServiceTree(node: Node, anchestor?: Node[]) {
if (node.type === 'group') {
const curGroupNode = nodes.value.find((v) => v.id === node.id);
await getAllService(node.id);
if (!curGroupNode) return;
curGroupNode.children = serviceList.value[curGroupNode.id]?.map((t) => ({
id: t.id,
title: t.name,
subtitle: t.code,
detail: t.detail,
type: 'type',
displayDropIcon: t.work.length > 0,
}));
}
if (node.type === 'type' && anchestor && anchestor[0].children) {
const curTypeNode = anchestor[0].children.find((v) => v.id === node.id);
const curType = serviceList.value[anchestor[0].id]?.find(
(v) => v.id === node.id,
);
if (!curTypeNode) return;
const noNameWork = curType.work
.filter((v) => !v.name)
.flatMap((v) =>
v.productOnWork.map((p) => ({
id: p.product.id,
title: p.product.name,
subtitle: p.product.code,
detail: p.product.detail,
remark: p.product.remark,
type: 'product',
icon: 'mdi-shopping-outline',
bg: 'hsla(var(--teal-10-hsl)/0.1)',
fg: 'var(--teal-10)',
})),
);
const withNameWork = curType.work
.filter((v) => v.name)
.flatMap((w) => ({
id: w.id,
title: w.name,
subtitle: ' ',
attributes: w.attributes,
type: 'work',
displayDropIcon: 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,
type: 'product',
})),
}));
curTypeNode.children = noNameWork.concat(withNameWork);
}
}
const quotationStore = useQuotationStore();
@ -354,6 +475,7 @@ watch(
</script>
<template>
{{ convertToTree() }}
<div class="column full-height no-wrap">
<!-- SEC: stat -->
<section class="text-body-2 q-mb-xs flex items-center">
@ -618,8 +740,8 @@ watch(
:date="new Date(n.createdAt).toLocaleString()"
:amount="n.workerCount"
:customer-name="
n.customerBranch.registerName ||
`${n.customerBranch.firstName || '-'} ${n.customerBranch.lastName}`
n.customerBranch?.registerName ||
`${n.customerBranch?.firstName || '-'} ${n.customerBranch?.lastName || ''}`
"
:reporter="n.actorName"
:total-price="n.totalPrice"
@ -1252,6 +1374,8 @@ watch(
<ProductServiceForm
v-model="pageState.productServiceModal"
v-model:nodes="nodes"
@open="openProductServiceTree"
></ProductServiceForm>
</template>

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

@ -1,8 +1,14 @@
<script lang="ts" setup>
import DialogForm from 'src/components/DialogForm.vue';
import { ref, watch } from 'vue';
import { onMounted, ref, watch } from 'vue';
import TreeView from 'src/components/shared/TreeView.vue';
import {
ProductGroup,
ProductList,
Service,
} from 'src/stores/product-service/types';
type Node = {
[key: string]: any;
opened?: boolean;
@ -13,114 +19,25 @@ type Node = {
children?: Node[];
};
defineEmits<{
(e: 'open', node: Node, ancestorNode?: Node[]): void;
}>();
const model = defineModel<boolean>();
const inputSearch = defineModel<string>('inputSearch');
const nodes = defineModel<Node[]>('nodes', { default: [] });
const splitterModel = ref(20);
const subSplitterModel = ref(100);
const infoDrawer = ref(false);
const currentTab = ref('1');
const currentSelectedType = ref<'group' | 'type' | 'work' | 'product' | ''>('');
const currentSelectedNode = ref<Node[]>([]);
const nodes = ref([
{
title: 'กลุ่มสินค้าและบริการที่ 1',
subtitle: 'TG01000000001',
selected: false,
type: 'group',
children: [
{
title:
'บริการค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)',
subtitle: 'TG01000000001',
selected: false,
type: 'type',
children: [
{
title: 'งาน 1',
subtitle: 'TG01000000001',
selected: false,
type: 'work',
children: [
{
title: 'สินค้า 1',
subtitle: 'TG01000000001',
selected: false,
type: 'product',
},
{
title: 'สินค้า 2',
subtitle: 'TG01000000001',
selected: false,
type: 'product',
},
{
title: 'สินค้า 3',
subtitle: 'TG01000000001',
selected: false,
type: 'product',
},
],
},
],
},
],
},
{
title: 'กลุ่มสินค้าและบริการที่ 2',
subtitle: 'TG01000000001',
selected: false,
type: 'group',
children: [
{
title:
'บริการค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)',
subtitle: 'TG01000000001',
selected: false,
type: 'type',
children: [
{
title: 'งาน 1',
subtitle: 'TG01000000001',
selected: false,
type: 'work',
children: [
{
title: 'สินค้า 1',
subtitle: 'TG01000000001',
selected: false,
type: 'product',
},
{
title: 'สินค้า 2',
subtitle: 'TG01000000001',
selected: false,
type: 'product',
},
{
title: 'สินค้า 3',
subtitle: 'TG01000000001',
selected: false,
type: 'product',
},
],
},
],
},
],
},
]);
function triggerInfo() {
if (subSplitterModel.value === 100) {
subSplitterModel.value = 60;
} else {
subSplitterModel.value = 100;
}
infoDrawer.value = !infoDrawer.value;
}
function toggleSelected(node: Node) {
function toggleSelected(node: Node, ancestorNode?: Node[]) {
if (currentSelectedNode.value.includes(node)) {
currentSelectedNode.value = [];
} else {
@ -143,6 +60,7 @@ watch(
<template>
<div>
<DialogForm
bg-color="var(--surface-2)"
v-model:modal="model"
:title="$t('general.list', { msg: $t('productService.title') })"
:submit-label="$t('general.select', { msg: $t('productService.title') })"
@ -206,17 +124,10 @@ watch(
</header>
<article class="col">
<q-splitter
disable
v-model="subSplitterModel"
:limits="[0, 100]"
before-class="overflow-hidden"
after-class="overflow-hidden"
style="height: 100%"
>
<div style="height: 100%" class="relative-position scroll">
<!-- SEC: tree view body -->
<template v-slot:before>
<section class="full-height column">
<section>
<div class="full-height column">
<span
v-if="false"
class="col column items-center justify-center app-text-muted"
@ -232,13 +143,18 @@ watch(
})
}}
</span>
<article>
<article v-else>
<TreeView
class="full-width q-pt-sm"
v-model:nodes="nodes"
expandable
selectable
:selected-node="currentSelectedNode"
@open="
(n, ancestor) => {
$emit('open', n, ancestor);
}
"
@select="toggleSelected"
:decoration="[
{
@ -268,12 +184,16 @@ watch(
]"
/>
</article>
</section>
</template>
</div>
</section>
<!-- SEC: info -->
<template v-slot:after>
<section class="column no-wrap surface-1 full-height">
<transition name="info-slide">
<div
v-if="infoDrawer"
class="column no-wrap surface-1 full-height absolute-right"
style="z-index: 1; width: 20vw"
>
<span
v-if="currentSelectedType === ''"
class="col column items-center justify-center app-text-muted"
@ -381,9 +301,9 @@ watch(
</span>
</div>
</article>
</section>
</template>
</q-splitter>
</div>
</transition>
</div>
</article>
</section>
</template>
@ -391,3 +311,19 @@ watch(
</DialogForm>
</div>
</template>
<style scoped>
.info-slide-enter-from {
transform: translate(100%, 0);
}
.info-slide-enter-active {
transition: all 0.1s ease-in-out;
}
.info-slide-leave-active {
transition: all 0.1s ease-in-out;
}
.info-slide-leave-to {
transform: translate(100%, 0);
}
</style>