From f423c305fb99076c3107c6028d7d45cab89434e5 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 27 Sep 2024 15:22:21 +0700
Subject: [PATCH] fix(03): profile layout

---
 src/pages/03_customer-management/MainPage.vue | 417 +++++++-----------
 1 file changed, 160 insertions(+), 257 deletions(-)

diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index d523d33a..3afedab3 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1948,7 +1948,12 @@ const emptyCreateDialog = ref(false);
       </DialogHeader>
     </template>
 
-    <div class="q-px-lg q-pt-lg surface-2">
+    <div
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
+    >
       <ProfileBanner
         v-if="customerFormData.customerBranch !== undefined"
         active
@@ -1989,8 +1994,11 @@ const emptyCreateDialog = ref(false);
     </div>
     <div
       style="flex: 1; width: 100%; overflow-y: auto"
-      class="surface-2 q-pa-lg"
       id="customer-form"
+      :class="{
+        'q-px-lg q-pb-lg': $q.screen.gt.sm,
+        'q-px-md q-pb-sm': !$q.screen.gt.sm,
+      }"
     >
       <div class="col surface-1 full-height rounded bordered scroll row">
         <div
@@ -2050,7 +2058,11 @@ const emptyCreateDialog = ref(false);
           </div>
         </div>
         <div
-          class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
+          class="col-12 col-md-10"
+          :class="{
+            'q-py-md q-pr-md ': $q.screen.gt.sm,
+            'q-py-md q-px-lg': !$q.screen.gt.sm,
+          }"
           id="customer-form-content"
           style="height: 100%; max-height: 100%; overflow-y: auto"
         >
@@ -2322,7 +2334,12 @@ const emptyCreateDialog = ref(false);
       }
     "
   >
-    <div class="q-px-lg q-pt-lg surface-2">
+    <div
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
+    >
       <ProfileBanner
         active
         useToggle
@@ -2390,7 +2407,10 @@ const emptyCreateDialog = ref(false);
 
     <div
       style="flex: 1; width: 100%; overflow-y: auto"
-      class="surface-2 q-pa-lg"
+      :class="{
+        'q-px-lg q-pb-lg': $q.screen.gt.sm,
+        'q-px-md q-pb-sm': !$q.screen.gt.sm,
+      }"
       id="drawer-employee-form"
     >
       <div class="col surface-1 full-height rounded bordered scroll row">
@@ -2463,58 +2483,68 @@ const emptyCreateDialog = ref(false);
         </div>
 
         <div
-          class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
+          class="col-12 col-md-10"
+          :class="{
+            'q-py-md q-pr-md ': $q.screen.gt.sm,
+            'q-py-md q-px-lg': !$q.screen.gt.sm,
+          }"
           id="employee-form-content"
           style="height: 100%; max-height: 100; overflow-y: auto"
         >
           <template v-if="employeeFormState.currentTab === 'personalInfo'">
             <div
-              class="surface-1 rounded q-pt-sm row"
+              class="rounded row"
+              :class="{
+                'q-py-md q-px-lg': $q.screen.gt.sm,
+                ' q-px-md': !$q.screen.gt.sm,
+              }"
               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
-                @click="
-                  () => deleteEmployeeById({ id: currentFromDataEmployee.id })
-                "
-                type="button"
-              />
+              <div class="surface-1 row rounded">
+                <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
+                  @click="
+                    () => deleteEmployeeById({ id: currentFromDataEmployee.id })
+                  "
+                  type="button"
+                />
+              </div>
             </div>
 
             <BasicInformation
@@ -3146,7 +3176,12 @@ const emptyCreateDialog = ref(false);
     "
   >
     <div class="column full-height">
-      <div class="q-px-lg q-pt-lg surface-2">
+      <div
+        :class="{
+          'q-mx-lg q-my-md': $q.screen.gt.sm,
+          'q-mx-md q-my-sm': !$q.screen.gt.sm,
+        }"
+      >
         <ProfileBanner
           v-if="customerFormData.customerBranch !== undefined"
           :active="customerFormData.status !== 'INACTIVE'"
@@ -3199,8 +3234,12 @@ const emptyCreateDialog = ref(false);
 
       <div
         style="flex: 1; width: 100%; overflow-y: auto"
-        class="surface-2 q-pa-lg column"
+        class="column"
         id="customer-form"
+        :class="{
+          'q-px-lg q-pb-lg': $q.screen.gt.sm,
+          'q-px-md q-pb-sm': !$q.screen.gt.sm,
+        }"
       >
         <div class="col bg-red surface-1 rounded bordered row">
           <div class="col full-height scroll" v-if="$q.screen.gt.sm">
@@ -3258,7 +3297,11 @@ const emptyCreateDialog = ref(false);
           </div>
 
           <div
-            class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
+            class="col-12 col-md-10"
+            :class="{
+              'q-py-md q-pr-md ': $q.screen.gt.sm,
+              'q-py-md q-px-lg': !$q.screen.gt.sm,
+            }"
             id="customer-form-content"
             style="height: 100%; max-height: 100%; overflow-y: auto"
           >
@@ -3541,7 +3584,12 @@ const emptyCreateDialog = ref(false);
     "
   >
     <div class="column full-height">
-      <div class="q-px-lg q-pt-lg surface-2">
+      <div
+        :class="{
+          'q-mx-lg q-my-md': $q.screen.gt.sm,
+          'q-mx-md q-my-sm': !$q.screen.gt.sm,
+        }"
+      >
         <ProfileBanner
           hideFade
           @view="
@@ -3606,8 +3654,12 @@ const emptyCreateDialog = ref(false);
       </div>
       <div
         style="flex: 1; width: 100%; overflow-y: auto"
-        class="surface-2 q-pa-lg column"
+        class="column"
         id="drawer-employee-form"
+        :class="{
+          'q-px-lg q-pb-lg': $q.screen.gt.sm,
+          'q-px-md q-pb-sm': !$q.screen.gt.sm,
+        }"
       >
         <div class="col bg-red surface-1 rounded bordered row">
           <div class="col full-height scroll" v-if="$q.screen.gt.sm">
@@ -3676,59 +3728,70 @@ const emptyCreateDialog = ref(false);
             </div>
           </div>
           <div
-            class="col-12 col-md-10 q-py-md q-pr-md q-pl-sm"
+            class="col-12 col-md-10"
+            :class="{
+              'q-py-md q-pr-md ': $q.screen.gt.sm,
+              'q-py-md q-px-lg': !$q.screen.gt.sm,
+            }"
             id="drawer-employee-form-content"
             style="height: 100%; overflow-y: auto"
           >
             <template v-if="employeeFormState.currentTab === 'personalInfo'">
               <div
-                class="surface-1 rounded q-pt-sm row"
+                class="rounded row"
                 style="position: absolute; z-index: 999; right: 4%"
                 v-if="
                   currentTab === 'employee' &&
                   currentFromDataEmployee.status !== 'INACTIVE'
                 "
+                :class="{
+                  'q-py-md q-px-lg': $q.screen.gt.sm,
+                  ' q-px-md': !$q.screen.gt.sm,
+                }"
               >
-                <UndoButton
-                  v-if="employeeFormState.isEmployeeEdit"
-                  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
-                  @click="
-                    () => deleteEmployeeById({ id: currentFromDataEmployee.id })
-                  "
-                  type="button"
-                />
+                <div class="surface-1 row rounded">
+                  <UndoButton
+                    v-if="employeeFormState.isEmployeeEdit"
+                    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
+                    @click="
+                      () =>
+                        deleteEmployeeById({ id: currentFromDataEmployee.id })
+                    "
+                    type="button"
+                  />
+                </div>
               </div>
               <BasicInformation
                 no-action
@@ -3801,166 +3864,6 @@ const emptyCreateDialog = ref(false);
                   {{ $t(`general.uploadFile`) }}
                 </div>
                 <!-- แก้ไขลูกจ้าง -->
-                <UploadFileGroup
-                  v-model:current-id="currentFromDataEmployee.id"
-                  v-model="currentFromDataEmployee.file"
-                  hide-action
-                  v-model:current-selected-menu="currentSelectedMenu"
-                  :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
-                  :download="
-                    (obj) => {
-                      employeeStore.getFile({
-                        parentId: currentFromDataEmployee.id || '',
-                        group: obj.group,
-                        fileId: obj._meta.id,
-                        download: true,
-                      });
-                    }
-                  "
-                  :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 &&
-                        !_meta.hasOwnProperty('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 }">
-                    <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"
-                    />
-                    <FormTm6 v-if="mode === 'tm6' && meta" />
-                  </template>
-                </UploadFileGroup>
               </div>
             </template>
             <template v-if="employeeFormState.currentTab === 'healthCheck'">