From 1c3d4388f035344491fcc0bc282468229b13e9a3 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 17 Oct 2024 16:48:03 +0700
Subject: [PATCH] fix(05): node to selected product

---
 src/pages/05_quotation/ProductServiceForm.vue | 37 ++++++++++++++++---
 src/pages/05_quotation/utils.ts               | 15 ++++++++
 2 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/pages/05_quotation/ProductServiceForm.vue b/src/pages/05_quotation/ProductServiceForm.vue
index ecb97d38..8df9a404 100644
--- a/src/pages/05_quotation/ProductServiceForm.vue
+++ b/src/pages/05_quotation/ProductServiceForm.vue
@@ -93,7 +93,7 @@ const productServiceCard = ref<{
   product: Record<string, any>[];
 }>();
 const splitterModel = ref(0);
-const selectedType = ref<'group' | 'type' | 'work' | 'product' | ''>('');
+const selectedType = ref<'group' | 'service' | 'work' | 'product' | ''>('');
 const selectedNode = ref<Node[]>([]);
 const selectedItems = ref<Record<string, any>[]>([]);
 const preSelectedItems = ref<Record<string, any>[]>([]);
@@ -111,6 +111,7 @@ function triggerInfo() {
 }
 
 async function triggerAddDialog() {
+  convertToSelected();
   pageState.addModal = true;
   await nextTick();
   refSelectZone.value?.assignSelect(
@@ -176,6 +177,23 @@ function toggleMove(node: Node, to?: 'up' | 'down') {
   }
 }
 
+function convertToSelected() {
+  if (!nodes.value) return;
+  const selected = nodes.value
+    .flatMap((n) => {
+      if (n.type === 'service') {
+        return productServiceCard.value?.service?.filter((c) => c.id === n.id);
+      } else if (n.type === 'product') {
+        return productServiceCard.value?.product?.filter((c) => c.id === n.id);
+      } else {
+        return [];
+      }
+    })
+    .filter((item) => item !== undefined);
+
+  selectedItems.value = selected;
+}
+
 function mapCard() {
   const data = {
     service:
@@ -222,7 +240,7 @@ function mapNode() {
   const node = selectedItems.value.map((v) => {
     if (v.type === 'service') {
       return {
-        type: 'type',
+        type: 'service',
         id: v.id,
         title: v.name,
         subtitle: v.code,
@@ -292,6 +310,8 @@ function mapNode() {
                   id: p.product.id,
                   title: p.product.name,
                   subtitle: p.product.code || ' ',
+                  detail: p.product.detail,
+                  remark: p.product.remark,
                   checked: true,
                   value: {
                     workerIndex: [],
@@ -320,6 +340,8 @@ function mapNode() {
         id: v.id,
         title: v.name,
         subtitle: v.code,
+        detail: v.detail,
+        remark: v.remark,
         value: {
           workerIndex: [],
           vat: 0,
@@ -631,7 +653,8 @@ watch(
                             "
                           >
                             {{
-                              selectedType !== 'work' && selectedType !== 'type'
+                              selectedType !== 'work' &&
+                              selectedType !== 'service'
                                 ? $t('general.remark')
                                 : $t('productService.service.properties')
                             }}
@@ -647,7 +670,7 @@ watch(
                                 msg:
                                   selectedType === 'group'
                                     ? $t('productService.group.title')
-                                    : selectedType === 'type'
+                                    : selectedType === 'service'
                                       ? $t('productService.type.title')
                                       : selectedType === 'work'
                                         ? $t('productService.service.title2')
@@ -663,7 +686,8 @@ watch(
                         <span v-if="pageState.infoTab === '2'">
                           <span class="app-text-muted">
                             {{
-                              selectedType !== 'work' && selectedType !== 'type'
+                              selectedType !== 'work' &&
+                              selectedType !== 'service'
                                 ? $t('general.remark', {
                                     msg:
                                       selectedType === 'group'
@@ -677,7 +701,8 @@ watch(
                           </span>
                           <aside
                             v-if="
-                              selectedType !== 'work' && selectedType !== 'type'
+                              selectedType !== 'work' &&
+                              selectedType !== 'service'
                             "
                             class="surface-3 q-pa-md"
                           >
diff --git a/src/pages/05_quotation/utils.ts b/src/pages/05_quotation/utils.ts
index faeb61ea..7f049116 100644
--- a/src/pages/05_quotation/utils.ts
+++ b/src/pages/05_quotation/utils.ts
@@ -1,9 +1,13 @@
 import { QuotationFull } from 'src/stores/quotations/types';
 
 export type ProductTree = {
+  type?: string;
   id: string;
   title: string;
   subtitle: string;
+  detail?: string;
+  remark?: string;
+  attributes?: Record<string, any>;
   checked: boolean;
   opened: boolean;
   icon: string;
@@ -46,9 +50,12 @@ export function quotationProductTree(
       const service = current.service;
 
       ret.push({
+        type: 'service',
         id: service.id,
         title: service.name,
         subtitle: service.code,
+        attributes: service.attributes,
+        detail: service.detail,
         opened: service.work.length > 0,
         checked: true,
         children: service.work.flatMap((work) => {
@@ -56,9 +63,12 @@ export function quotationProductTree(
             relation: (typeof work)['productOnWork'][number],
           ): ProductTree[number] => {
             return {
+              type: 'product',
               id: relation.product.id,
               title: relation.product.name,
               subtitle: relation.product.code,
+              detail: relation.product.detail,
+              remark: relation.product.remark,
               opened: true,
               checked: !!list.find(
                 (v) =>
@@ -86,9 +96,11 @@ export function quotationProductTree(
 
           if (!!work.name) {
             return {
+              type: 'work',
               id: work.id,
               title: work.name,
               subtitle: ' ',
+              attributes: work.attributes,
               opened: true,
               checked: !!list.find(
                 (v) => v.service?.id === service.id && v.work?.id === work.id,
@@ -108,9 +120,12 @@ export function quotationProductTree(
       });
     } else {
       ret.push({
+        type: 'product',
         id: current.product.id,
         title: current.product.name,
         subtitle: current.product.code,
+        detail: current.product.detail,
+        remark: current.product.remark,
         opened: true,
         checked: true,
         value: {