refactor: assign data form api to table

src/pages/05_quotation/QuotationForm.vue

@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
+import { useRouter } from 'vue-router';
 import {
   computed,
   nextTick,
@@ -12,6 +13,7 @@ import {
   watch,
 } from 'vue';
 import { dialog } from 'stores/utils';
+import { quotationProductTree } from './utils';
 
 // NOTE: Import stores
 import { setLocale, dateFormat, calculateAge } from 'src/utils/datetime';
@@ -88,8 +90,9 @@ const customerStore = useCustomerStore();
 const quotationForm = useQuotationForm();
 const employeeStore = useEmployeeStore();
 const optionStore = useOptionStore();
-const ocrStore = useOcrStore();
 const { t, locale } = useI18n();
+const ocrStore = useOcrStore();
+const router = useRouter();
 const $q = useQuasar();
 
 const {
@@ -111,7 +114,6 @@ const rows = ref<Node[]>([]);
 const branchId = ref('');
 const currentQuotationId = ref<string | undefined>(undefined);
 const date = ref();
-
 const preSelectedWorker = ref<Employee[]>([]);
 const readonly = computed(() => {
   return !(
@@ -250,7 +252,33 @@ async function dialogWarning(
   }
 }
 
-function convertDataToFormSubmit() {
+async function assignToProductServiceList() {
+  const ret = await productServiceStore.fetchListProductService({
+    page: 1,
+    pageSize: 9999,
+  });
+  if (ret) {
+    productGroup.value = ret.result;
+
+    productServiceList.value = quotationFormData.value.productServiceList.map(
+      (v) => ({
+        workerIndex: v.workerIndex || [0],
+        vat: v.vat || 0,
+        pricePerUnit: v.pricePerUnit || 0,
+        discount: v.discount || 0,
+        amount: v.discount || 0,
+        product: v.product,
+        work: v.work || null,
+        service: v.service || null,
+      }),
+    );
+    selectedProductGroup.value =
+      quotationFormData.value.productServiceList[0].product.productGroup?.id ||
+      '';
+  }
+}
+
+async function convertDataToFormSubmit() {
   quotationFormData.value.productServiceList = JSON.parse(
     JSON.stringify(
       productServiceList.value.map((v) => ({
@@ -292,7 +320,31 @@ function convertDataToFormSubmit() {
     ),
   );
 
-  quotationForm.submitQuotation();
+  quotationFormData.value = {
+    id: quotationFormData.value.id,
+    productServiceList: quotationFormData.value.productServiceList,
+    urgent: quotationFormData.value.urgent,
+    customerBranchId: quotationFormData.value.customerBranchId,
+    worker: quotationFormData.value.worker,
+    payBillDate: quotationFormData.value.payBillDate,
+    paySplit: quotationFormData.value.paySplit,
+    paySplitCount: quotationFormData.value.paySplitCount,
+    payCondition: quotationFormData.value.payCondition,
+    dueDate: quotationFormData.value.dueDate,
+    documentReceivePoint: quotationFormData.value.documentReceivePoint,
+    contactTel: quotationFormData.value.contactTel,
+    contactName: quotationFormData.value.contactName,
+    workName: quotationFormData.value.workName,
+    actorName: quotationFormData.value.actorName,
+    _count: quotationFormData.value._count,
+    status: quotationFormData.value.status,
+  };
+
+  const res = await quotationForm.submitQuotation();
+
+  if (res === true) {
+    quotationFormState.value.mode = 'info';
+  }
 }
 
 async function getAllProduct(
@@ -493,12 +545,6 @@ onMounted(async () => {
   if (locale.value === 'eng') optionStore.globalOption = rawOption.eng;
   if (locale.value === 'tha') optionStore.globalOption = rawOption.tha;
 
-  const ret = await productServiceStore.fetchListProductService({
-    page: 1,
-    pageSize: 9999,
-  });
-  if (ret) productGroup.value = ret.result;
-
   if (
     currentQuotationId.value !== undefined &&
     quotationFormState.value.mode !== 'create'
@@ -510,6 +556,7 @@ onMounted(async () => {
 
     await assignWorkerToSelectedWorker();
   }
+  await assignToProductServiceList();
 
   pageState.isLoaded = true;
 });
@@ -918,6 +965,7 @@ watch(
     <!-- add product service -->
     <ProductServiceForm
       v-model="pageState.productServiceModal"
+      :nodes="quotationProductTree(productServiceList)"
       v-model:product-group="productGroup"
       v-model:product-list="productList"
       v-model:service-list="serviceList"