refactor edit layout form

src/pages/05_quotation/MainPage.vue

@@ -18,8 +18,14 @@ import {
   SaveButton,
   UndoButton,
 } from 'components/button';
+import {
+  UploadFileGroup,
+  FormTm6,
+  noticeJobEmployment,
+} from 'components/upload-file';
 
 import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
+import FormReferDocument from 'src/components/05_quotation/FormReferDocument.vue';
 import FormPerson from 'components/02_personnel-management/FormPerson.vue';
 import { DialogContainer, DialogHeader } from 'components/dialog';
 import ProfileBanner from 'components/ProfileBanner.vue';
@@ -83,7 +89,8 @@ const { state: customerFormState, currentFormData: customerFormData } =
 const { state: employeeFormState, currentFromDataEmployee } =
   storeToRefs(employeeFormStore);
 
-const test = ref(true);
+const test1 = ref(true);
+const test2 = ref(true);
 const dialog = ref(true);
 const nodes = ref([
   {
@@ -728,7 +735,7 @@ onMounted(async () => {
   </DialogForm>
 
   <DialogContainer
-    :model-value="test"
+    :model-value="test1"
     :on-open="async () => {}"
     :on-close="() => {}"
   >
@@ -796,10 +803,16 @@ onMounted(async () => {
         "
       />
     </div>
-    <div
+    <q-form
       style="flex: 1; width: 100%; overflow-y: auto"
       class="surface-2 q-pa-lg"
       id="customer-form"
+      greedy
+      @submit.prevent="
+        async () => {
+          console.log('test');
+        }
+      "
     >
       <div class="col surface-1 full-height rounded bordered scroll row">
         <div
@@ -807,63 +820,106 @@ onMounted(async () => {
           id="customer-form-content"
           style="height: 100%; max-height: 100%; overflow-y: auto"
         >
-          <div class="row" id="form-branch-customer-branch">
+          <div
+            class="surface-1 rounded q-pt-sm row"
+            style="position: absolute; z-index: 999; right: 4%"
+          >
+            <UndoButton
+              v-if="
+                employeeFormState.isEmployeeEdit &&
+                employeeFormState.dialogType !== 'create'
+              "
+              id="btn-info-basic-undo"
+              icon-only
+              @click="
+                () => {
+                  employeeFormStore.resetFormDataEmployee();
+                  employeeFormState.isEmployeeEdit = false;
+                  employeeFormState.dialogType = 'info';
+                }
+              "
+              type="button"
+            />
+            <SaveButton
+              v-if="employeeFormState.isEmployeeEdit"
+              id="btn-info-basic-save"
+              icon-only
+              type="submit"
+            />
+            <EditButton
+              v-if="!employeeFormState.isEmployeeEdit"
+              id="btn-info-basic-edit"
+              icon-only
+              @click="
+                () => {
+                  employeeFormState.isEmployeeEdit = true;
+                  employeeFormState.dialogType = 'edit';
+                }
+              "
+              type="button"
+            />
+            <DeleteButton
+              v-if="!employeeFormState.isEmployeeEdit"
+              id="btn-info-basic-delete"
+              icon-only
+            />
+          </div>
+
+          <div
+            class="row full-width q-col-gutter-sm"
+            id="form-branch-customer-branch"
+          >
             <!-- v-if="customerFormData.customerBranch" -->
-            <q-form
+            <!-- v-if="!!customerFormState.editCustomerId" -->
-              class="full-width q-col-gutter-sm"
-              greedy
-              @submit.prevent="async () => {}"
-            >
-              <!-- v-if="!!customerFormState.editCustomerId" -->
-              <div class="col-12 text-weight-bold text-body1 row items-center">
-                <q-icon
-                  flat
-                  size="xs"
-                  class="q-pa-sm rounded q-mr-xs"
-                  color="info"
-                  name="mdi-briefcase-outline"
-                  style="background-color: var(--surface-3)"
-                />
-                <span>{{ $t('customer.form.group.branch') }}</span>
-              </div>
 
-              <EmployerFormAbout :index="(0).toString()" customerType="CORP" />
+            <div class="col-12 text-weight-bold text-body1 row items-center">
-
+              <q-icon
-              <div class="col-12 text-weight-bold text-body1 row items-center">
+                flat
-                <q-icon
+                size="xs"
-                  flat
+                class="q-pa-sm rounded q-mr-xs"
-                  size="xs"
+                color="info"
-                  class="q-pa-sm rounded q-mr-xs"
+                name="mdi-briefcase-outline"
-                  color="info"
+                style="background-color: var(--surface-3)"
-                  name="mdi-briefcase-outline"
-                  style="background-color: var(--surface-3)"
-                />
-                <span>{{ $t('customerBranch.tab.business') }}</span>
-              </div>
-
-              <EmployerFormBusiness prefixId="dialog" dense outlined />
-
-              <AddressForm
-                prefix-id="employer"
-                hide-title
-                dense
-                outlined
-                use-employment
-                :title="$t('form.address')"
-                :addressTitle="$t('form.address')"
-                :addressTitleEN="$t('form.address', { suffix: '(EN)' })"
               />
-            </q-form>
+              <span>{{ $t('customer.form.group.branch') }}</span>
+            </div>
+
+            <EmployerFormAbout :index="(0).toString()" customerType="CORP" />
+
+            <div class="col-12 text-weight-bold text-body1 row items-center">
+              <q-icon
+                flat
+                size="xs"
+                class="q-pa-sm rounded q-mr-xs"
+                color="info"
+                name="mdi-briefcase-outline"
+                style="background-color: var(--surface-3)"
+              />
+              <span>{{ $t('customerBranch.tab.business') }}</span>
+            </div>
+
+            <EmployerFormBusiness prefixId="dialog" dense outlined />
+
+            <AddressForm
+              prefix-id="employer"
+              hide-title
+              dense
+              outlined
+              use-employment
+              :title="$t('form.address')"
+              :addressTitle="$t('form.address')"
+              :addressTitleEN="$t('form.address', { suffix: '(EN)' })"
+            />
           </div>
         </div>
       </div>
-    </div>
+    </q-form>
   </DialogContainer>
 
   <DialogForm
     hideFooter
     :title="$t('form.title.create', { name: $t('customer.employee') })"
-    v-model:modal="test"
+    v-model:modal="test2"
     :undo="() => {}"
     :submit="async () => {}"
     :show="() => {}"
@@ -912,7 +968,7 @@ onMounted(async () => {
     >
       <div class="col surface-1 full-height rounded bordered scroll row">
         <div
-          class="col-12 full-width col-md-10 q-py-md q-pr-md q-pl-sm"
+          class="col-12 full-width col-md-10 q-py-md q-pr-md q-pl-sm q-col-gutter-sm"
           id="employee-form-content"
           style="height: 100%; max-height: 100; overflow-y: auto"
         >
@@ -962,18 +1018,12 @@ onMounted(async () => {
               />
             </div>
 
-            <BasicInformation
+            <FormReferDocument
-              no-action
-              id="form-information"
-              prefix-id="form-employee"
-              :show-btn-save="employeeFormState.dialogType === 'create'"
-              employee
-              dense
-              outlined
-              separator
               title="form.field.basicInformation"
-              class="q-mb-xl"
+              prefixId="dialog"
+              dense
             />
+
             <FormPerson
               id="form-personal"
               prefix-id="form-employee"
@@ -981,9 +1031,174 @@ onMounted(async () => {
               outlined
               employee
               separator
-              title="customerEmployee.form.group.personalInfo"
+              hideNameEn
+              title="personnel.form.personalInformation"
               class="q-mb-xl"
             />
+
+            <UploadFileGroup
+              v-model:current-id="currentFromDataEmployee.id"
+              v-model="currentFromDataEmployee.file"
+              hide-action
+              :group-list="uploadFileListEmployee"
+              :menu="uploadFileListEmployee"
+              :columns="columnsAttachment"
+              :ocr="
+                async (group, file) => {
+                  const res = await ocrStore.sendOcr({
+                    file: file,
+                    category: group,
+                  });
+
+                  if (res) {
+                    const tempValue = {
+                      status: true,
+                      group,
+                      meta: res.fields,
+                    };
+
+                    return tempValue;
+                  }
+                  return { status: false, group, meta: [] };
+                }
+              "
+              :auto-save="currentFromDataEmployee.id !== ''"
+              :download="
+                (obj) => {
+                  employeeStore.getFile({
+                    parentId: currentFromDataEmployee.id || '',
+                    group: obj.group,
+                    fileId: obj._meta.id,
+                  });
+                }
+              "
+              :delete-item="
+                async (obj) => {
+                  const res = await employeeStore.delMeta({
+                    parentId: currentFromDataEmployee.id || '',
+                    group: obj.group,
+                    metaId: obj._meta.id,
+                  });
+
+                  if (res) {
+                    return true;
+                  }
+                  return false;
+                }
+              "
+              :save="
+                async (
+                  group: 'passport' | 'visa',
+                  _meta: any,
+                  file: File | undefined,
+                ) => {
+                  if (file !== undefined && currentFromDataEmployee.id) {
+                    const res = await employeeStore.postMeta({
+                      parentId: currentFromDataEmployee.id || '',
+                      group,
+                      meta: _meta,
+                      file,
+                    });
+
+                    if (res) {
+                      return true;
+                    }
+                  } else {
+                    const { id, employeeId, createdAt, updatedAt, ...payload } =
+                      _meta;
+                    const res = await employeeStore.putMeta({
+                      parentId: currentFromDataEmployee.id || '',
+                      group,
+                      metaId: _meta.id,
+                      meta: payload,
+                      file,
+                    });
+                    if (res) {
+                      return true;
+                    }
+                  }
+
+                  return false;
+                }
+              "
+              :get-file-list="
+                async (group: 'passport' | 'visa') => {
+                  if (!!currentFromDataEmployee.id) {
+                    const resMeta = await employeeStore.getMetaList({
+                      parentId: currentFromDataEmployee.id,
+                      group,
+                    });
+
+                    const tempValue = resMeta.map(async (i: any) => {
+                      return {
+                        _meta: { ...i },
+                        name: i.id || '',
+                        group: group,
+                        url: await employeeStore.getFile({
+                          parentId: currentFromDataEmployee.id || '',
+                          group,
+                          fileId: i.id,
+                        }),
+                        file: undefined,
+                      };
+                    });
+
+                    return await waitAll(tempValue);
+                  }
+                  return [];
+                }
+              "
+            >
+              <template #form="{ mode, meta, isEdit }">
+                <FormCitizen
+                  v-if="mode === 'citizen' && meta"
+                  orc
+                  ra
+                  :readonly="!isEdit"
+                  v-model:citizen-id="meta.citizenId"
+                  v-model:birth-date="meta.birthDate"
+                  v-model:first-name="meta.firstName"
+                  v-model:first-name-en="meta.firstNameEN"
+                  v-model:last-name="meta.lastName"
+                  v-model:last-name-en="meta.lastNameEN"
+                  v-model:address="meta.address"
+                />
+                <FormEmployeePassport
+                  v-if="mode === 'passport' && meta"
+                  prefix-id="drawer-info-employee"
+                  id="form-passport"
+                  dense
+                  outlined
+                  separator
+                  ocr
+                  :title="$t('customerEmployee.form.group.passport')"
+                  :readonly="!isEdit"
+                  v-model:passport-type="meta.type"
+                  v-model:passport-number="meta.number"
+                  v-model:passport-issue-date="meta.issueDate"
+                  v-model:passport-expiry-date="meta.expireDate"
+                  v-model:passport-issuing-place="meta.issuePlace"
+                  v-model:passport-issuing-country="meta.issueCountry"
+                />
+                <FormEmployeeVisa
+                  v-if="mode === 'visa' && meta"
+                  prefix-id="drawer-info-employee"
+                  id="form-visa"
+                  ocr
+                  dense
+                  outlined
+                  title="customerEmployee.form.group.visa"
+                  :readonly="!isEdit"
+                  v-model:visa-type="meta.type"
+                  v-model:visa-number="meta.number"
+                  v-model:visa-issue-date="meta.issueDate"
+                  v-model:visa-expiry-date="meta.expireDate"
+                  v-model:visa-issuing-place="meta.issuePlace"
+                />
+
+                <noticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
+              </template>
+            </UploadFileGroup>
           </template>
         </div>
       </div>