fix: convert product to tree

src/components/05_quotation/ProductItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { QTableProps } from 'quasar';
 import ThaiBahtText from 'thai-baht-text';
 import { toWords } from 'number-to-words';
@@ -35,27 +35,18 @@ defineEmits<{
 }>();
 
 const configStore = useConfigStore();
-
 const { data: config } = storeToRefs(configStore);
 
 const rows = defineModel<
   Required<QuotationPayload['productServiceList'][number]>[]
 >('rows', { required: true });
 
-const groupList = defineModel<
+const groupList = ref<
   {
     title: string;
-    product: {
-      amount: number;
-      discount: number;
-      pricePerUnit: number;
-      vat: number;
-      product: Product;
-      service?: Service;
-      work?: Work;
-    }[];
+    product: QuotationPayload['productServiceList'][number][];
   }[]
->('groupList', { default: [] });
+>([]);
 
 const summaryPrice = defineModel<{
   totalPrice: number;
@@ -188,6 +179,81 @@ function openEmployeeTable(title: string, index: number) {
     !currentBtnOpen.value[0].opened[index];
 }
 
+function groupByServiceId() {
+  console.log(rows.value);
+  const groupedItems: {
+    title: string;
+    product: QuotationPayload['productServiceList'][number][];
+  }[] = [];
+  let noServiceGroup: QuotationPayload['productServiceList'][number][] = [];
+  let currentServiceId: string | null = null;
+  let currentServiceName: string | null = null;
+  let serviceFlag: boolean = false;
+
+  rows.value.forEach((item) => {
+    if (item.service) {
+      if (noServiceGroup.length > 0) {
+        // console.log('push p changmode');
+        groupedItems.push({
+          title: `_product${groupedItems.length}`,
+          product: noServiceGroup,
+        });
+        noServiceGroup = [];
+        currentServiceId = null;
+        currentServiceName = null;
+      }
+
+      if (currentServiceId !== null && currentServiceId !== item.service.id) {
+        // console.log('push s chageS');
+        groupedItems.push({
+          title: currentServiceName || '',
+          product: rows.value.filter((i) => i.service?.id === currentServiceId),
+        });
+      }
+
+      // console.log('set id');
+      currentServiceId = item.service.id;
+      currentServiceName = item.service.name;
+      serviceFlag = true;
+    } else {
+      // console.log('push s chagemode');
+      serviceFlag &&
+        groupedItems.push({
+          title: currentServiceName || '',
+          product: rows.value.filter((i) => i.service?.id === currentServiceId),
+        });
+      noServiceGroup.push(item);
+      serviceFlag = false;
+    }
+  });
+
+  if (serviceFlag && currentServiceId !== null) {
+    // console.log('push s last');
+    groupedItems.push({
+      title: currentServiceName || '',
+      product: rows.value.filter((i) => i.service?.id === currentServiceId),
+    });
+  }
+
+  if (noServiceGroup.length > 0) {
+    // console.log('push p last');
+    groupedItems.push({
+      title: `_product${groupedItems.length}`,
+      product: noServiceGroup,
+    });
+  }
+
+  groupList.value = groupedItems;
+  console.log(groupedItems);
+}
+
+watch(
+  () => rows.value,
+  () => {
+    groupByServiceId();
+  },
+);
+
 watch(
   () => summary.value,
   () => {
@@ -200,7 +266,7 @@ watch(
     <div class="full-width">
       <section v-for="(item, i) in groupList" :key="i" class="q-pb-md">
         <div
-          v-if="item.title"
+          v-if="item.title && !item.title.includes('_product')"
           class="q-py-sm q-px-md bordered"
           style="background: hsla(var(--orange-5-hsl) / 0.1)"
         >
@@ -222,6 +288,9 @@ watch(
           :rows="item.product"
           class="full-width"
           :no-data-label="$t('general.noDataTable')"
+          :pagination="{
+            rowsPerPage: 0,
+          }"
         >
           <template #header="{ cols }">
             <q-tr style="background-color: hsla(var(--info-bg) / 0.07)">

src/components/05_quotation/WorkerItem.vue

@@ -8,7 +8,7 @@ defineEmits<{
 
 withDefaults(
   defineProps<{
-    employeeAmount: number;
+    employeeAmount?: number;
     fallbackImg?: string;
     hideQuantity?: boolean;
     inTable?: boolean;

src/pages/05_quotation/QuotationForm.vue

@@ -189,20 +189,6 @@ const formDataEmployee = ref<
 const productServiceList = ref<
   Required<QuotationPayload['productServiceList'][number]>[]
 >([]);
-const productServiceTableData = ref<
-  {
-    title: string;
-    product: {
-      amount: number;
-      discount: number;
-      pricePerUnit: number;
-      vat: number;
-      product: Product;
-      service?: Service;
-      work?: Work;
-    }[];
-  }[]
->([{ title: '', product: [] }]);
 
 async function dialogWarning(
   callback: () => void,
@@ -376,26 +362,6 @@ function convertToTable(nodes: Node[]) {
   });
 
   productServiceList.value = list;
-
-  const pdList: Node[] = [];
-  const groupByService = nodes
-    .map((n) => {
-      if (n.type === 'type' && n.children) {
-        const products = n.children.flatMap(_recursive).map((v) => v.value);
-        return {
-          title: n.title,
-          product: products,
-        };
-      } else if (n.type === 'product') {
-        pdList.push(n.value);
-      }
-      return null;
-    })
-    .filter((t) => t !== null);
-  if (pdList.length > 0) groupByService.push({ title: '', product: pdList });
-  productServiceTableData.value = [];
-  productServiceTableData.value = groupByService;
-
   pageState.productServiceModal = false;
 }
 
@@ -705,7 +671,6 @@ watch(
                   }))
                 "
                 @delete="toggleDeleteProduct"
-                v-model:groupList="productServiceTableData"
                 v-model:rows="productServiceList"
                 v-model:summary-price="summaryPrice"
               />