fix: product table

src/pages/05_quotation/ProductServiceForm.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, reactive, ref, watch } from 'vue';
+import { computed, nextTick, reactive, ref, watch } from 'vue';
 import { moveItemUp, moveItemDown, deleteItem } from 'stores/utils';
 import useOptionStore from 'stores/options';
 
@@ -46,6 +46,9 @@ const emit = defineEmits<{
   (e: 'submit', nodes: Node[]): void;
 }>();
 
+const selectedProductGroup = defineModel<string>('selectedProductGroup', {
+  default: '',
+});
 const model = defineModel<boolean>();
 const inputSearch = defineModel<string>('inputSearch');
 const productGroup = defineModel<ProductGroup[]>('productGroup', {
@@ -90,7 +93,6 @@ const productServiceCard = ref<{
 const splitterModel = ref(0);
 const selectedType = ref<'group' | 'type' | 'work' | 'product' | ''>('');
 const selectedNode = ref<Node[]>([]);
-const selectedProductGroup = ref('');
 const selectedItems = ref<Record<string, any>[]>([]);
 const preSelectedItems = ref<Record<string, any>[]>([]);
 const refSelectZone = ref<InstanceType<typeof SelectZone>>();
@@ -106,9 +108,13 @@ function triggerInfo() {
   pageState.infoDrawer = !pageState.infoDrawer;
 }
 
-function triggerAddDialog() {
-  assignSelect(preSelectedItems.value, selectedItems.value);
+async function triggerAddDialog() {
   pageState.addModal = true;
+  await nextTick();
+  refSelectZone.value?.assignSelect(
+    preSelectedItems.value,
+    selectedItems.value,
+  );
 }
 
 function toggleSelected(node: Node) {
@@ -179,7 +185,10 @@ function mapCard() {
 }
 
 function mapNode() {
-  assignSelect(selectedItems.value, preSelectedItems.value);
+  refSelectZone.value?.assignSelect(
+    selectedItems.value,
+    preSelectedItems.value,
+  );
 
   const node = selectedItems.value.map((v) => {
     if (v.type === 'service') {
@@ -261,11 +270,11 @@ function mapNode() {
         })(),
       };
     } else {
-      const price = prop.agentPrice ? v.agentPrice : v.price;
-      const pricePerUnit = v.vatIncluded
+      const price = prop.agentPrice ? v.raw.agentPrice : v.raw.price;
+      const pricePerUnit = v.raw.vatIncluded
         ? precisionRound(price / (1 + (config.value?.vat || 0.07)))
         : price;
-
+      console.log(v);
       return {
         id: v.id,
         title: v.name,
@@ -292,19 +301,6 @@ function mapNode() {
   pageState.addModal = false;
 }
 
-function assignSelect(to: Record<string, any>[], from: Record<string, any>[]) {
-  const existingItems = new Set(to);
-
-  for (let i = to.length - 1; i >= 0; i--) {
-    if (!from.includes(to[i])) {
-      to.splice(i, 1);
-    }
-  }
-
-  const newItems = from.filter((item) => !existingItems.has(item));
-  to.push(...newItems);
-}
-
 watch(
   () => selectedNode.value,
   (v) => {

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="