feat: เพิ่มแก้ไข ของBranch

src/pages/03_customer-management/MainPage.vue

@@ -49,6 +49,7 @@ const {
   fetchListById,
   createBranch,
   deleteBranchById,
+  editBranchById,
 } = userCustomer;
 const formData = ref<CustomerCreate>({
   status: 'CREATED',
@@ -85,6 +86,8 @@ const formData = ref<CustomerCreate>({
       wageRate: 0,
     },
   ],
+  image: null,
+});
 
 const inputSearch = ref<string>('');
 const fieldSelectedCustomer = ref<{ label: string; value: string }>({
@@ -136,6 +139,7 @@ const dialogInputCustomerBranchForm = ref<boolean>(false);
 const currentCustomer = ref<Customer>();
 const branch = ref<CustomerBranch[]>();
 
+const currentBranchId = ref<string>('');
 const currentCustomerName = ref<string>('');
 const currentCustomerUrlImage = ref<string>('');
 
@@ -217,6 +221,8 @@ const dialogCustomerType = ref<boolean>(false);
 const dialogInputForm = ref<boolean>(false);
 const dialogEmployee = ref<boolean>(false);
 
+const infoDrawerBranch = ref<boolean>(false);
+
 const selectorLabel = ref<string>('');
 const selectorList = computed(() => [
   {
@@ -259,6 +265,14 @@ function openDialogInputForm(action: 'FORM' | 'INFO' = 'FORM', id?: string) {
 
 function onClose() {
   infoDrawer.value = false;
+  infoDrawerEdit.value = false;
+  dialogInputForm.value = false;
+  clearForm();
+}
+
+function onCloseBranch() {
+  infoDrawerBranch.value = false;
+  infoDrawerEdit.value = false;
   dialogInputForm.value = false;
   clearForm();
 }
@@ -301,7 +315,7 @@ function clearForm() {
         wageRate: 0,
       },
     ],
-    image: new File([''], 'dummy.jpg'),
+    image: null,
   };
 }
 
@@ -310,9 +324,7 @@ async function onSubmit() {
     ...formData.value,
     customerType:
       customerType.value === 'customerLegalEntity' ? 'CORP' : 'PERS',
-    image: (profileSubmit.value
+    image: profileSubmit.value ? profileFile.value ?? null : null,
-      ? profileFile.value ?? new File([''], 'dummy.jpg')
-      : new File([''], 'dummy.jpg')) as File,
   });
   clearForm();
   const resultList = await fetchList({ includeBranch: true });
@@ -339,6 +351,19 @@ async function onSubmitCustomerBranch() {
   }
 }
 
+const resultSearch = ref<(Customer & { branch: CustomerBranch[] })[]>();
+
+async function searchCustomer() {
+  const resultList = await fetchList({
+    query: inputSearch.value,
+    includeBranch: true,
+  });
+
+  if (resultList) {
+    resultSearch.value = resultList.result;
+  }
+}
+
 async function onSubmitEdit(id: string) {
   if (!formData.value) return;
 
@@ -355,6 +380,23 @@ async function onSubmitEdit(id: string) {
   clearForm();
 }
 
+async function submitBranch() {
+  if (formData.value.customerBranch?.[0]) {
+    await editBranchById(currentBranchId.value, {
+      ...formData.value.customerBranch[0],
+      customerId: currentCustomerId.value,
+    });
+
+    const result = await fetchListById(currentCustomerId.value);
+
+    if (result) {
+      branch.value = result.branch;
+    }
+  }
+  infoDrawerBranch.value = false;
+  clearForm();
+}
+
 function undo() {
   infoDrawerEdit.value = false;
 }
@@ -367,7 +409,7 @@ async function assignFormData(data: Customer & { branch: CustomerBranch[] }) {
     customerNameEN: data.customerNameEN,
     taxNo: data.taxNo,
     customerBranch: [],
-    image: new File([''], 'dummy.jpg'),
+    image: null,
   };
 
   data.branch.forEach((v) => {
@@ -679,6 +721,22 @@ watch(locale, () => {
         :customer-id="currentCustomerId"
         @back="isMainPage = true"
         @dialog="dialogInputCustomerBranchForm = true"
+        @viewDetail="
+          (v) => {
+            infoDrawerBranch = true;
+
+            console.log(v);
+
+            currentCustomerId = v.id;
+            currentBranchId = v.branch[0].id;
+
+            customerType =
+              v.customerType === 'CORP'
+                ? 'customerLegalEntity'
+                : 'customerNaturalPerson';
+            assignFormData(v);
+          }
+        "
         v-model:branch="branch"
         v-model:currentCustomerName="currentCustomerName"
         v-model:currentCustomerUrlImage="currentCustomerUrlImage"
@@ -1063,6 +1121,8 @@ watch(locale, () => {
     </template>
   </FormDialog>
 
+  <!-- DRAWER INFO ของ นายจ้าง -->
+
   <DrawerInfo
     title="บริษัททดสอบ"
     v-model:drawer-open="infoDrawer"
@@ -1199,6 +1259,200 @@ watch(locale, () => {
                     indexTab !== undefined &&
                     formData.customerBranch?.[indexTab]
                   "
+                  :type-customer="customerType"
+                  v-model:customer-name="formData.customerBranch[indexTab].name"
+                  v-model:customer-english-name="
+                    formData.customerBranch[indexTab].nameEN
+                  "
+                  v-model:authorized-capital="
+                    formData.customerBranch[indexTab].authorizedCapital
+                  "
+                  v-model:register-name="
+                    formData.customerBranch[indexTab].registerName
+                  "
+                  v-model:register-date="
+                    formData.customerBranch[indexTab].registerDate
+                  "
+                  dense
+                  outlined
+                  bordered
+                  separator
+                  :readonly="!infoDrawerEdit"
+                />
+              </template>
+              <template #contactInformation>
+                <ContactComponent
+                  v-if="
+                    indexTab !== undefined &&
+                    formData.customerBranch?.[indexTab]
+                  "
+                  v-model:mail="formData.customerBranch[indexTab].email"
+                  v-model:telephone="
+                    formData.customerBranch[indexTab].telephoneNo
+                  "
+                  dense
+                  outlined
+                  separator
+                  :readonly="!infoDrawerEdit"
+                />
+              </template>
+              <template #otherDocuments>
+                <OtherInformation
+                  v-if="
+                    indexTab !== undefined &&
+                    formData.customerBranch?.[indexTab]
+                  "
+                  dense
+                  outlined
+                  :readonly="!infoDrawerEdit"
+                />
+              </template>
+            </TabComponent>
+          </div>
+        </template>
+      </InfoForm>
+    </template>
+  </DrawerInfo>
+
+  <!-- DRAWER INFO ของ สาขา -->
+  <DrawerInfo
+    title="สาขา"
+    v-model:drawer-open="infoDrawerBranch"
+    badgeLabel="HQ006"
+    badgeClass="app-bg-pers"
+    :undo="() => undo()"
+    :isEdit="infoDrawerEdit"
+    :close="() => onCloseBranch()"
+    :editData="() => (infoDrawerEdit = true)"
+    :data="currentCustomer"
+    :submit="
+      () => {
+        submitBranch();
+      }
+    "
+  >
+    <template #info>
+      <InfoForm>
+        <template #person-card>
+          <div class="q-ma-md">
+            <AppBox class="surface-1" style="padding: 0">
+              <UsersDetailCardComponent
+                no-bg
+                no-detail
+                no-hover
+                color="purple"
+                :metadata="{ id: '1', disabled: false }"
+                :list="{
+                  id: '2',
+                  type: 'customerNaturalPerson',
+                  name: 'เจมส์ บอน',
+                  code: 'HQ006',
+                  detail: [
+                    {
+                      label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
+                      value: 'บริษัทเฟรบเป้',
+                    },
+                    {
+                      label: 'ชื่อบริษัท/นิติบุคคล ภาษาไทย',
+                      value: 'บริษัทเฟรบเป้',
+                    },
+                  ],
+                }"
+                @enter-card="openDialogInputForm"
+              />
+            </AppBox>
+          </div>
+        </template>
+        <template #information>
+          <BasicInformation
+            dense
+            outlined
+            separator
+            :readonly="true"
+            :type-customer="customerType"
+            v-model:customer-name="formData.customerName"
+            v-model:customer-name-en="formData.customerNameEN"
+            v-model:tax-no="formData.taxNo"
+          />
+        </template>
+
+        <template #address>
+          <div class="col-3 app-text-muted">
+            • {{ $t('formDialogCustomerBranch') }}
+          </div>
+
+          <div class="col-12 row bordered q-pt-none rounded">
+            <TabComponent
+              :readonly="true"
+              v-model:customer-branch="formData.customerBranch"
+              v-model:tab-index="indexTab"
+            >
+              <template #address>
+                <FormAddress
+                  v-if="
+                    indexTab !== undefined &&
+                    formData.customerBranch?.[indexTab]
+                  "
+                  v-model:address="formData.customerBranch[indexTab].address"
+                  v-model:address-e-n="
+                    formData.customerBranch[indexTab].addressEN
+                  "
+                  v-model:province-id="
+                    formData.customerBranch[indexTab].provinceId
+                  "
+                  v-model:district-id="
+                    formData.customerBranch[indexTab].districtId
+                  "
+                  v-model:sub-district-id="
+                    formData.customerBranch[indexTab].subDistrictId
+                  "
+                  v-model:zip-code="formData.customerBranch[indexTab].zipCode"
+                  separator
+                  dense
+                  outlined
+                  :readonly="!infoDrawerEdit"
+                />
+              </template>
+
+              <template #businessInformation>
+                <FormBusiness
+                  v-if="
+                    indexTab !== undefined &&
+                    formData.customerBranch?.[indexTab]
+                  "
+                  v-model:employment-office="
+                    formData.customerBranch[indexTab].employmentOffice
+                  "
+                  v-model:bussiness-type="
+                    formData.customerBranch[indexTab].bussinessType
+                  "
+                  v-model:bussiness-type-en="
+                    formData.customerBranch[indexTab].bussinessTypeEN
+                  "
+                  v-model:job-position="
+                    formData.customerBranch[indexTab].jobPosition
+                  "
+                  v-model:job-position-en="
+                    formData.customerBranch[indexTab].jobPositionEN
+                  "
+                  v-model:job-description="
+                    formData.customerBranch[indexTab].jobDescription
+                  "
+                  v-model:sale-employee="
+                    formData.customerBranch[indexTab].saleEmployee
+                  "
+                  v-model:pay-date="formData.customerBranch[indexTab].payDate"
+                  v-model:wage-rate="formData.customerBranch[indexTab].wageRate"
+                  separator
+                  dense
+                  outlined
+                  :readonly="!infoDrawerEdit"
+                />
+              </template>
+              <template #about>
+                <AboutComponent
+                  v-if="formData.customerBranch?.[0]"
+                  :type-customer="customerType"
                   v-model:customer-name="formData.customerBranch[indexTab].name"
                   v-model:customer-english-name="
                     formData.customerBranch[indexTab].nameEN