fix: product table

src/pages/05_quotation/QuotationForm.vue

@@ -25,6 +25,7 @@ import {
   ProductGroup,
   Product,
   Service,
+  Work,
 } from 'src/stores/product-service/types';
 
 // NOTE: Import Components
@@ -109,6 +110,7 @@ const selectedWorker = ref<
 >([]);
 const workerList = ref<Employee[]>([]);
 
+const selectedProductGroup = ref('');
 const agentPrice = ref(false);
 const summaryPrice = ref<{
   totalPrice: number;
@@ -184,6 +186,20 @@ 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: [] }]);
 
 function convertDataToFormSubmit() {
   quotationFormData.value.productServiceList = JSON.parse(
@@ -318,6 +334,25 @@ 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;
 }
 
@@ -590,9 +625,21 @@ watch(
               </section>
             </template>
             <div class="surface-1 q-pa-md full-width">
+              <span
+                v-if="productServiceList.length > 0"
+                class="text-weight-bold row items-center q-pb-md"
+              >
+                {{
+                  productGroup.find((g) => g.id === selectedProductGroup)
+                    ?.name || '-'
+                }}
+                <q-icon name="mdi-chevron-right" class="q-pl-sm" size="xs" />
+              </span>
+
               <ProductItem
                 :agent-price="agentPrice"
                 @delete="toggleDeleteProduct"
+                v-model:groupList="productServiceTableData"
                 v-model:rows="productServiceList"
                 v-model:summary-price="summaryPrice"
               />
@@ -791,6 +838,7 @@ watch(
       v-model:product-group="productGroup"
       v-model:product-list="productList"
       v-model:service-list="serviceList"
+      v-model:selected-product-group="selectedProductGroup"
       :agent-price="agentPrice"
       @submit="convertToTable"
       @select-group="