From a9650ad1b6ba1b4140211c54695d8d1fcec5f59e Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 7 Oct 2024 10:20:29 +0700
Subject: [PATCH] refactor: delete worker & branch, cus-branch state

---
 src/components/05_quotation/FormAbout.vue  | 24 +++---
 src/components/05_quotation/WorkerItem.vue |  4 +-
 src/pages/05_quotation/QuotationForm.vue   | 88 +++++++++++++++++-----
 3 files changed, 85 insertions(+), 31 deletions(-)

diff --git a/src/components/05_quotation/FormAbout.vue b/src/components/05_quotation/FormAbout.vue
index aa02b673..820d93f2 100644
--- a/src/components/05_quotation/FormAbout.vue
+++ b/src/components/05_quotation/FormAbout.vue
@@ -5,6 +5,8 @@ import useBranchStore from 'src/stores/branch';
 import useCustomerStore from 'src/stores/customer';
 import SelectInput from '../shared/SelectInput.vue';
 import { QSelect } from 'quasar';
+import { Branch } from 'src/stores/branch/types';
+import { CustomerBranch } from 'src/stores/customer/types';
 
 const { locale } = useI18n({ useScope: 'global' });
 const branchStore = useBranchStore();
@@ -66,17 +68,20 @@ async function init(val: string, type: 'branch' | 'customer') {
         });
   if (res) {
     if (type === 'branch') {
-      branchOption.value = res.result.map((v) => ({
+      branchOption.value = (res.result as Branch[]).map((v: Branch) => ({
         value: v.id,
         label: v.name,
         labelEN: v.nameEN,
       }));
     } else if (type === 'customer') {
-      customerOption.value = res.result.map((v) => ({
-        value: v.id,
-        label: v.registerName || `${v.firstName} ${v.lastName}` || '-',
-        labelEN: v.registerNameEN || `${v.firstNameEN} ${v.lastNameEN}` || '-',
-      }));
+      customerOption.value = (res.result as CustomerBranch[]).map(
+        (v: CustomerBranch) => ({
+          value: v.id,
+          label: v.registerName || `${v.firstName} ${v.lastName}` || '-',
+          labelEN:
+            v.registerNameEN || `${v.firstNameEN} ${v.lastNameEN}` || '-',
+        }),
+      );
     }
   }
 }
@@ -89,7 +94,8 @@ onMounted(async () => {
 watch(
   () => branchId.value,
   async (v) => {
-    if (v && props.onCreate) {
+    if (v && customerBranchId.value && props.onCreate) {
+      console.log('form');
       customerBranchId.value = '';
     }
   },
@@ -137,7 +143,7 @@ watch(
         :label="$t('quotation.branch')"
         :option-label="locale === 'eng' ? 'labelEN' : 'label'"
         :rules="[(val: string) => !!val || $t('form.error.required')]"
-        @filter="(val, update) => filter(val, update, 'branch')"
+        @filter="(val: string, update) => filter(val, update, 'branch')"
       />
 
       <SelectInput
@@ -151,7 +157,7 @@ watch(
         :label="$t('quotation.customer')"
         :option-label="locale === 'eng' ? 'labelEN' : 'label'"
         :rules="[(val: string) => !!val || $t('form.error.required')]"
-        @filter="(val, update) => filter(val, update, 'customer')"
+        @filter="(val: string, update) => filter(val, update, 'customer')"
       >
         <template #option="{ scope }">
           <q-item
diff --git a/src/components/05_quotation/WorkerItem.vue b/src/components/05_quotation/WorkerItem.vue
index 0198788f..f83722f9 100644
--- a/src/components/05_quotation/WorkerItem.vue
+++ b/src/components/05_quotation/WorkerItem.vue
@@ -3,7 +3,7 @@ import { QTableProps } from 'quasar';
 import TableComponents from 'src/components/TableComponents.vue';
 
 defineEmits<{
-  (e: 'delete'): void;
+  (e: 'delete', index: number): void;
 }>();
 
 withDefaults(
@@ -89,7 +89,7 @@ const columns = [
       :columns
       :rows
       hidePagination
-      @delete="$emit('delete')"
+      @delete="(i) => $emit('delete', i)"
     >
       <template v-slot:img-column="{ props }">
         <q-avatar class="q-mr-sm" size="md">
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 61569fbf..0ad0ed50 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -2,7 +2,7 @@
 import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
-import { nextTick, onMounted, reactive, ref } from 'vue';
+import { nextTick, onBeforeMount, onMounted, reactive, ref, watch } from 'vue';
 
 // NOTE: Import stores
 import { setLocale, dateFormat, calculateAge } from 'src/utils/datetime';
@@ -14,6 +14,7 @@ import useEmployeeStore from 'stores/employee';
 import useOptionStore from 'stores/options';
 import { useQuotationForm } from './form';
 import useOcrStore from 'stores/ocr';
+import { deleteItem } from 'stores/utils';
 
 // NOTE  Import Types
 import { QuotationPayload } from 'src/stores/quotations/types';
@@ -112,6 +113,7 @@ const pageState = reactive({
   statusFilter: 'all',
   fieldSelected: [],
   gridView: false,
+  isLoaded: false,
 
   currentTab: 'all',
   addModal: false,
@@ -223,6 +225,7 @@ function triggerProductServiceDialog() {
 }
 
 function toggleDeleteProduct(index: number) {
+  deleteItem(productServiceList.value, index);
   console.log(index);
 }
 
@@ -319,26 +322,70 @@ onMounted(async () => {
   });
   if (ret) productGroup.value = ret.result;
 
-  const retEmp = await customerStore.fetchBranchEmployee(
-    quotationFormData.value.customerBranchId,
-  );
-  if (retEmp)
-    workerList.value = retEmp.data.result.map((value) => ({
-      alienReferencNumber: '',
-      documentExpireDate: new Date(),
-      lastNameEN: value.lastNameEN,
-      lastName: value.lastName,
-      middleNameEN: value.middleNameEN,
-      middleName: value.middleName,
-      firstNameEN: value.firstNameEN,
-      firstName: value.firstName,
-      namePrefix: value.namePrefix,
-      nationality: value.nationality,
-      gender: value.gender,
-      dateOfBirth: value.dateOfBirth,
-      code: value.code,
-    }));
+  if (quotationFormData.value.customerBranchId) {
+    const retEmp = await customerStore.fetchBranchEmployee(
+      quotationFormData.value.customerBranchId,
+    );
+    if (retEmp)
+      workerList.value = retEmp.data.result.map((value) => ({
+        alienReferencNumber: '',
+        documentExpireDate: new Date(),
+        lastNameEN: value.lastNameEN,
+        lastName: value.lastName,
+        middleNameEN: value.middleNameEN,
+        middleName: value.middleName,
+        firstNameEN: value.firstNameEN,
+        firstName: value.firstName,
+        namePrefix: value.namePrefix,
+        nationality: value.nationality,
+        gender: value.gender,
+        dateOfBirth: value.dateOfBirth,
+        code: value.code,
+      }));
+  }
+
+  pageState.isLoaded = true;
 });
+
+watch(
+  () => quotationFormData.value.customerBranchId,
+  async (v) => {
+    const url = new URL(window.location.href);
+    url.searchParams.set('customerBranchId', v);
+    history.pushState({}, '', url.toString());
+
+    if (!v) return;
+    const retEmp = await customerStore.fetchBranchEmployee(v);
+    if (retEmp) {
+      workerList.value = retEmp.data.result.map((value) => ({
+        alienReferencNumber: '',
+        documentExpireDate: new Date(),
+        lastNameEN: value.lastNameEN,
+        lastName: value.lastName,
+        middleNameEN: value.middleNameEN,
+        middleName: value.middleName,
+        firstNameEN: value.firstNameEN,
+        firstName: value.firstName,
+        namePrefix: value.namePrefix,
+        nationality: value.nationality,
+        gender: value.gender,
+        dateOfBirth: value.dateOfBirth,
+        code: value.code,
+      }));
+    }
+  },
+);
+
+watch(
+  () => branchId.value,
+  async (v) => {
+    if (!pageState.isLoaded) return;
+    const url = new URL(window.location.href);
+    url.searchParams.set('branchId', v);
+    history.pushState({}, '', url.toString());
+    quotationFormData.value.customerBranchId = '';
+  },
+);
 </script>
 
 <template>
@@ -444,6 +491,7 @@ onMounted(async () => {
                     status: e.status,
                   }))
                 "
+                @delete="(i) => deleteItem(selectedWorker, i)"
               />
             </div>
           </q-expansion-item>