From de9551cd828f285aa5a85da20f0cd1dcfe3af495 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Fri, 9 Aug 2024 15:26:52 +0700
Subject: [PATCH] refactor: Add conditions to edit

---
 .../FormEmployeeHealthCheck.vue               | 56 ++++++++-----------
 .../FormEmployeeOther.vue                     | 22 ++++----
 .../FormEmployeeWorkHistory.vue               | 46 +++++++--------
 3 files changed, 57 insertions(+), 67 deletions(-)

diff --git a/src/components/03_customer-management/FormEmployeeHealthCheck.vue b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
index 29043627..3cc749dd 100644
--- a/src/components/03_customer-management/FormEmployeeHealthCheck.vue
+++ b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
@@ -66,7 +66,7 @@ defineEmits<{
   (e: 'save', index: number): void;
   (e: 'edit', index: number): void;
   (e: 'delete', index: number): void;
-  (e: 'undo'): void;
+  (e: 'undo', index: number): void;
 }>();
 
 async function fetchProvince() {
@@ -182,10 +182,10 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         {{ `ครั้งที่ ${index + 1}` }}
         <div class="row items-center">
           <UndoButton
-            v-if="!readonly"
+            v-if="!readonly && !!checkup.id && !checkup.statusSave"
             id="btn-info-health-undo"
             icon-only
-            @click="$emit('undo')"
+            @click="$emit('undo', index)"
             type="button"
           />
           <SaveButton
@@ -197,7 +197,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
           <EditButton
             icon-only
             id="btn-info-health-edit"
-            v-if="readonly"
+            v-if="!readonly && checkup.statusSave"
             @click="$emit('edit', index)"
             type="button"
           />
@@ -209,25 +209,13 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
             type="button"
           />
         </div>
-
-        <!-- <q-btn
-          v-if="!readonly && !checkup.statusSave"
-          type="submit"
-          dense
-          unelevated
-          id="save-basic-info"
-          :label="$t('save')"
-          color="primary"
-          class="q-px-md rounded"
-          @click="$emit('save', index)"
-        /> -->
       </span>
 
       <q-input
         lazy-rules="ondemand"
         :dense="dense"
         outlined
-        :readonly="readonly"
+        :readonly="readonly || checkup.statusSave"
         hide-bottom-space
         class="col-5"
         :label="$t('formDialogInputCheckupRes')"
@@ -250,9 +238,9 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         lazy-rules="ondemand"
         v-model="checkup.checkupType"
         :dense="dense"
-        :readonly="readonly"
+        :readonly="readonly || checkup.statusSave"
         :options="checkupTypeOptions"
-        :hide-dropdown-icon="readonly"
+        :hide-dropdown-icon="readonly || checkup.statusSave"
         :for="`${prefixId}-select-checkup-type`"
         :label="$t('formDialogInputCheckupType')"
         @filter="checkupTypeFilter"
@@ -281,9 +269,9 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         class="col-2"
         v-model="checkup.provinceId"
         :dense="dense"
-        :readonly="readonly"
+        :readonly="readonly || checkup.statusSave"
         :label="$t('province')"
-        :hide-dropdown-icon="readonly"
+        :hide-dropdown-icon="readonly || checkup.statusSave"
         :for="`${prefixId}-select-province`"
         :options="provinceOptions"
         @filter="provinceFilter"
@@ -301,7 +289,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         lazy-rules="ondemand"
         :dense="dense"
         outlined
-        :readonly="readonly"
+        :readonly="readonly || checkup.statusSave"
         hide-bottom-space
         class="col-5"
         :label="$t('formDialogInputHospital')"
@@ -324,8 +312,8 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         lazy-rules="ondemand"
         v-model="checkup.medicalBenefitScheme"
         :dense="dense"
-        :readonly="readonly"
-        :hide-dropdown-icon="readonly"
+        :readonly="readonly || checkup.statusSave"
+        :hide-dropdown-icon="readonly || checkup.statusSave"
         :options="medicalBenefitOptions"
         :for="`${prefixId}-select-province`"
         :label="$t('formDialogInputMedicalBenefit')"
@@ -344,7 +332,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         :label="$t('formDialogInputRemark')"
         :dense="dense"
         outlined
-        :readonly="readonly"
+        :readonly="readonly || checkup.statusSave"
         hide-bottom-space
         class="col-12"
         v-model="checkup.remark"
@@ -359,7 +347,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         :dark="$q.dark.isActive"
         :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
         :enableTimePicker="false"
-        :disabled="readonly"
+        :disabled="readonly || checkup.statusSave"
         class="col"
       >
         <template #year="{ value }">
@@ -376,12 +364,12 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
             :label="$t('formDialogInputCoverageStartDate')"
             :dense="dense"
             outlined
-            :readonly="readonly"
+            :readonly="readonly || checkup.statusSave"
             placeholder="DD/MM/YYYY"
-            :mask="readonly ? '' : '##/##/####'"
+            :mask="readonly || checkup.statusSave ? '' : '##/##/####'"
             :model-value="
               checkup.coverageStartDate
-                ? readonly
+                ? readonly || checkup.statusSave
                   ? dateFormat(checkup.coverageStartDate)
                   : dateFormat(checkup.coverageStartDate, false, false, true)
                 : undefined
@@ -438,12 +426,12 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
             :label="$t('formDialogInputCoverageExpiretDate')"
             :dense="dense"
             outlined
-            :readonly="readonly"
+            :readonly="readonly || checkup.statusSave"
             placeholder="DD/MM/YYYY"
-            :mask="readonly ? '' : '##/##/####'"
+            :mask="readonly || checkup.statusSave ? '' : '##/##/####'"
             :model-value="
               checkup.coverageExpireDate
-                ? readonly
+                ? readonly || checkup.statusSave
                   ? dateFormat(checkup.coverageExpireDate)
                   : dateFormat(checkup.coverageExpireDate, false, false, true)
                 : undefined
@@ -493,8 +481,8 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         lazy-rules="ondemand"
         v-model="checkup.insuranceCompany"
         :dense="dense"
-        :readonly="readonly"
-        :hide-dropdown-icon="readonly"
+        :readonly="readonly || checkup.statusSave"
+        :hide-dropdown-icon="readonly || checkup.statusSave"
         :options="insuranceCompanyOptions"
         :for="`${prefixId}-select-province`"
         :label="$t('formDialogInputInsuranceCompany')"
diff --git a/src/components/03_customer-management/FormEmployeeOther.vue b/src/components/03_customer-management/FormEmployeeOther.vue
index 051bfad2..28b658fc 100644
--- a/src/components/03_customer-management/FormEmployeeOther.vue
+++ b/src/components/03_customer-management/FormEmployeeOther.vue
@@ -70,7 +70,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :for="`${prefixId}-input-citizen-id`"
           :dense="dense"
           outlined
-          :readonly="readonly"
+          :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           :label="$t('formDialogInputCitizenId')"
           class="col"
@@ -87,7 +87,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :for="`${prefixId}-input-father-first-name`"
           :dense="dense"
           outlined
-          :readonly="readonly"
+          :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-md-3 col-6"
           :label="$t('formDialogInputFirstName')"
@@ -98,7 +98,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :for="`${prefixId}-input-father-last-name`"
           :dense="dense"
           outlined
-          :readonly="readonly"
+          :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-md-3 col-6"
           :label="$t('formDialogInputLastName')"
@@ -109,7 +109,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :for="`${prefixId}-input-father-first-name-en`"
           :dense="dense"
           outlined
-          :readonly="readonly"
+          :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-md-3 col-6"
           :label="$t('formDialogInputFirstNameEN')"
@@ -120,7 +120,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :for="`${prefixId}-input-father-last-name-en`"
           :dense="dense"
           outlined
-          :readonly="readonly"
+          :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-md-3 col-6"
           :label="$t('formDialogInputLastNameEN')"
@@ -131,7 +131,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :for="`${prefixId}-input-father-birthplace`"
           :dense="dense"
           outlined
-          :readonly="readonly"
+          :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-6"
           :label="$t('formDialogInputFamilyBirthPlace')"
@@ -149,7 +149,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :for="`${prefixId}-input-mother-first-name`"
           :dense="dense"
           outlined
-          :readonly="readonly"
+          :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-md-3 col-6"
           :label="$t('formDialogInputFirstName')"
@@ -160,7 +160,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :for="`${prefixId}-input-mother-last-name`"
           :dense="dense"
           outlined
-          :readonly="readonly"
+          :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-md-3 col-6"
           :label="$t('formDialogInputLastName')"
@@ -171,7 +171,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :for="`${prefixId}-input-mother-first-name-en`"
           :dense="dense"
           outlined
-          :readonly="readonly"
+          :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-md-3 col-6"
           :label="$t('formDialogInputFirstNameEN')"
@@ -182,7 +182,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :for="`${prefixId}-input-mother-last-name-en`"
           :dense="dense"
           outlined
-          :readonly="readonly"
+          :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-md-3 col-6"
           :label="$t('formDialogInputLastNameEN')"
@@ -193,7 +193,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :for="`${prefixId}-input-mother-birthplace`"
           :dense="dense"
           outlined
-          :readonly="readonly"
+          :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-6"
           :label="$t('formDialogInputFamilyBirthPlace')"
diff --git a/src/components/03_customer-management/FormEmployeeWorkHistory.vue b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
index 94858a81..2cb21555 100644
--- a/src/components/03_customer-management/FormEmployeeWorkHistory.vue
+++ b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
@@ -41,7 +41,7 @@ defineEmits<{
   (e: 'save', index: number): void;
   (e: 'edit', index: number): void;
   (e: 'delete', index: number): void;
-  (e: 'undo'): void;
+  (e: 'undo', index: number): void;
 }>();
 
 function addData() {
@@ -117,6 +117,7 @@ const workplaceFilter = selectFilterOptionRefMod(
         id="btn-add-bank"
         icon-only
         class="q-ml-sm"
+        type="button"
         @click="addData"
       />
     </div>
@@ -137,12 +138,13 @@ const workplaceFilter = selectFilterOptionRefMod(
         {{ `ครั้งที่ ${index + 1}` }}
         <div class="row items-center">
           <UndoButton
-            v-if="!readonly"
+            v-if="!readonly && !!work.id && !work.statusSave"
             id="btn-info-health-undo"
             icon-only
-            @click="$emit('undo')"
+            @click="$emit('undo', index)"
             type="button"
           />
+
           <SaveButton
             icon-only
             v-if="!readonly && !work.statusSave"
@@ -151,7 +153,7 @@ const workplaceFilter = selectFilterOptionRefMod(
 
           <EditButton
             icon-only
-            v-if="readonly"
+            v-if="!readonly && work.statusSave"
             @click="$emit('edit', index)"
             type="button"
           />
@@ -179,7 +181,7 @@ const workplaceFilter = selectFilterOptionRefMod(
         lazy-rules="ondemand"
         v-model="work.jobType"
         :dense="dense"
-        :readonly="readonly"
+        :readonly="readonly || work.statusSave"
         :options="jobTypeOptions"
         :hide-dropdown-icon="readonly"
         :for="`${prefixId}-select-job-type`"
@@ -210,7 +212,7 @@ const workplaceFilter = selectFilterOptionRefMod(
         option-value="value"
         v-model="work.workplace"
         :dense="dense"
-        :readonly="readonly"
+        :readonly="readonly || work.statusSave"
         :options="workplaceOptions"
         :hide-dropdown-icon="readonly"
         :for="`${prefixId}-select-province`"
@@ -231,7 +233,7 @@ const workplaceFilter = selectFilterOptionRefMod(
         :label="$t('formDialogInputRemark')"
         :dense="dense"
         outlined
-        :readonly="readonly"
+        :readonly="readonly || work.statusSave"
         hide-bottom-space
         class="col-12"
         v-model="work.remark"
@@ -246,7 +248,7 @@ const workplaceFilter = selectFilterOptionRefMod(
         :dark="$q.dark.isActive"
         :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
         :enableTimePicker="false"
-        :disabled="readonly"
+        :disabled="readonly || work.statusSave"
         class="col-3"
       >
         <template #year="{ value }">
@@ -262,12 +264,12 @@ const workplaceFilter = selectFilterOptionRefMod(
             :label="$t('formDialogInputWorkUntil')"
             :dense="dense"
             outlined
-            :readonly="readonly"
+            :readonly="readonly || work.statusSave"
             placeholder="DD/MM/YYYY"
             :mask="readonly ? '' : '##/##/####'"
             :model-value="
               work.workEndDate
-                ? readonly
+                ? readonly || work.statusSave
                   ? dateFormat(work.workEndDate)
                   : dateFormat(work.workEndDate, false, false, true)
                 : undefined
@@ -305,7 +307,7 @@ const workplaceFilter = selectFilterOptionRefMod(
         :for="`${prefixId}-input-work-permit-no`"
         :dense="dense"
         outlined
-        :readonly="readonly"
+        :readonly="readonly || work.statusSave"
         hide-bottom-space
         class="col-6"
         :label="$t('formDialogInputWorkPermitNo')"
@@ -320,7 +322,7 @@ const workplaceFilter = selectFilterOptionRefMod(
         :dark="$q.dark.isActive"
         :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
         :enableTimePicker="false"
-        :disabled="readonly"
+        :disabled="readonly || work.statusSave"
         class="col-3"
       >
         <template #year="{ value }">
@@ -336,12 +338,12 @@ const workplaceFilter = selectFilterOptionRefMod(
             :label="$t('formDialogInputWorkPermitIssueDate')"
             :dense="dense"
             outlined
-            :readonly="readonly"
+            :readonly="readonly || work.statusSave"
             placeholder="DD/MM/YYYY"
-            :mask="readonly ? '' : '##/##/####'"
+            :mask="readonly || work.statusSave ? '' : '##/##/####'"
             :model-value="
               work.workPermitIssuDate
-                ? readonly
+                ? readonly || work.statusSave
                   ? dateFormat(work.workPermitIssuDate)
                   : dateFormat(work.workPermitIssuDate, false, false, true)
                 : undefined
@@ -383,7 +385,7 @@ const workplaceFilter = selectFilterOptionRefMod(
         :dark="$q.dark.isActive"
         :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
         :enableTimePicker="false"
-        :disabled="readonly"
+        :disabled="readonly || work.statusSave"
         class="col-3"
       >
         <template #year="{ value }">
@@ -399,12 +401,12 @@ const workplaceFilter = selectFilterOptionRefMod(
             :label="$t('formDialogInputWorkPermitExpireDate')"
             :dense="dense"
             outlined
-            :readonly="readonly"
+            :readonly="readonly || work.statusSave"
             placeholder="DD/MM/YYYY"
-            :mask="readonly ? '' : '##/##/####'"
+            :mask="readonly || work.statusSave ? '' : '##/##/####'"
             :model-value="
               work.workPermitExpireDate
-                ? readonly
+                ? readonly || work.statusSave
                   ? dateFormat(work.workPermitExpireDate)
                   : dateFormat(work.workPermitExpireDate, false, false, true)
                 : undefined
@@ -442,7 +444,7 @@ const workplaceFilter = selectFilterOptionRefMod(
         :for="`${prefixId}-input-owner-name`"
         :dense="dense"
         outlined
-        :readonly="readonly"
+        :readonly="readonly || work.statusSave"
         hide-bottom-space
         class="col-5"
         :label="$t('formDialogInputOwnerName')"
@@ -464,9 +466,9 @@ const workplaceFilter = selectFilterOptionRefMod(
         lazy-rules="ondemand"
         v-model="work.positionName"
         :dense="dense"
-        :readonly="readonly"
+        :readonly="readonly || work.statusSave"
         :options="positionNameOptions"
-        :hide-dropdown-icon="readonly"
+        :hide-dropdown-icon="readonly || work.statusSave"
         :for="`${prefixId}-select-position-name`"
         :label="$t('formDialogInputJobPosition')"
         @filter="positionNameFilter"