From 60431904ce0d4345550d43e1e9794598ccd511f9 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 12 Jun 2024 09:08:43 +0000
Subject: [PATCH] fix: form employee disable rule validate

---
 .../02_personnel-management/FormAddress.vue   | 107 ++++++++++++------
 .../02_personnel-management/InfoForm.vue      |   2 +
 .../FormEmployeeVisa.vue                      |  75 ++++++++----
 src/components/FormDialog.vue                 |   2 +
 src/pages/03_customer-management/MainPage.vue |   4 +-
 5 files changed, 131 insertions(+), 59 deletions(-)

diff --git a/src/components/02_personnel-management/FormAddress.vue b/src/components/02_personnel-management/FormAddress.vue
index 4a162080..ac9a7f56 100644
--- a/src/components/02_personnel-management/FormAddress.vue
+++ b/src/components/02_personnel-management/FormAddress.vue
@@ -15,6 +15,7 @@ defineProps<{
   readonly?: boolean;
   separator?: boolean;
   employee?: boolean;
+  disabledRule?: boolean;
 }>();
 
 const adrressStore = useAddressStore();
@@ -116,10 +117,15 @@ watch(districtId, fetchSubDistrict);
           class="col-12"
           v-model="address"
           lazy-rules
-          :rules="[
-            (val) =>
-              (val && val.length > 0) || $t('formDialogInputAddressValidate'),
-          ]"
+          :rules="
+            disabledRule
+              ? []
+              : [
+                  (val) =>
+                    (val && val.length > 0) ||
+                    $t('formDialogInputAddressValidate'),
+                ]
+          "
         />
         <q-select
           id="select-province"
@@ -138,10 +144,15 @@ watch(districtId, fetchSubDistrict);
           class="col-3"
           :options="addrOptions.provinceOps"
           lazy-rules
-          :rules="[
-            (val) =>
-              (val && val.length > 0) || $t('formDialogInputProvinceValidate'),
-          ]"
+          :rules="
+            disabledRule
+              ? []
+              : [
+                  (val) =>
+                    (val && val.length > 0) ||
+                    $t('formDialogInputProvinceValidate'),
+                ]
+          "
           @update:model-value="districtId = subDistrictId = zipCode = null"
         />
         <q-select
@@ -161,10 +172,15 @@ watch(districtId, fetchSubDistrict);
           class="col-3"
           :options="addrOptions.districtOps"
           lazy-rules
-          :rules="[
-            (val) =>
-              (val && val.length > 0) || $t('formDialogInputDistrictValidate'),
-          ]"
+          :rules="
+            disabledRule
+              ? []
+              : [
+                  (val) =>
+                    (val && val.length > 0) ||
+                    $t('formDialogInputDistrictValidate'),
+                ]
+          "
           @update:model-value="subDistrictId = zipCode = null"
         />
         <q-select
@@ -184,11 +200,15 @@ watch(districtId, fetchSubDistrict);
           class="col-3"
           :options="addrOptions.subDistrictOps"
           lazy-rules
-          :rules="[
-            (val) =>
-              (val && val.length > 0) ||
-              $t('formDialogInputSubDistrictValidate'),
-          ]"
+          :rules="
+            disabledRule
+              ? []
+              : [
+                  (val) =>
+                    (val && val.length > 0) ||
+                    $t('formDialogInputSubDistrictValidate'),
+                ]
+          "
           @update:model-value="(v: string) => selectSubDistrict(v)"
         />
         <q-input
@@ -217,10 +237,15 @@ watch(districtId, fetchSubDistrict);
           class="col-12"
           v-model="addressEN"
           lazy-rules
-          :rules="[
-            (val) =>
-              (val && val.length > 0) || $t('formDialogInputAddressValidate'),
-          ]"
+          :rules="
+            disabledRule
+              ? []
+              : [
+                  (val) =>
+                    (val && val.length > 0) ||
+                    $t('formDialogInputAddressValidate'),
+                ]
+          "
         />
         <q-select
           id="select-province-en"
@@ -239,10 +264,15 @@ watch(districtId, fetchSubDistrict);
           class="col-3"
           :options="addrOptions.provinceOps"
           lazy-rules
-          :rules="[
-            (val) =>
-              (val && val.length > 0) || $t('formDialogInputProvinceValidate'),
-          ]"
+          :rules="
+            disabledRule
+              ? []
+              : [
+                  (val) =>
+                    (val && val.length > 0) ||
+                    $t('formDialogInputProvinceValidate'),
+                ]
+          "
           @update:model-value="districtId = subDistrictId = zipCode = null"
         />
         <q-select
@@ -262,10 +292,15 @@ watch(districtId, fetchSubDistrict);
           class="col-3"
           :options="addrOptions.districtOps"
           lazy-rules
-          :rules="[
-            (val) =>
-              (val && val.length > 0) || $t('formDialogInputDistrictValidate'),
-          ]"
+          :rules="
+            disabledRule
+              ? []
+              : [
+                  (val) =>
+                    (val && val.length > 0) ||
+                    $t('formDialogInputDistrictValidate'),
+                ]
+          "
           @update:model-value="subDistrictId = zipCode = null"
         />
         <q-select
@@ -285,11 +320,15 @@ watch(districtId, fetchSubDistrict);
           class="col-3"
           :options="addrOptions.subDistrictOps"
           lazy-rules
-          :rules="[
-            (val) =>
-              (val && val.length > 0) ||
-              $t('formDialogInputSubDistrictValidate'),
-          ]"
+          :rules="
+            disabledRule
+              ? []
+              : [
+                  (val) =>
+                    (val && val.length > 0) ||
+                    $t('formDialogInputSubDistrictValidate'),
+                ]
+          "
           @update:model-value="(v: string) => selectSubDistrict(v)"
         />
         <q-input
diff --git a/src/components/02_personnel-management/InfoForm.vue b/src/components/02_personnel-management/InfoForm.vue
index bed12736..c934ca99 100644
--- a/src/components/02_personnel-management/InfoForm.vue
+++ b/src/components/02_personnel-management/InfoForm.vue
@@ -9,6 +9,7 @@ defineProps<{
   addressTitleEN?: string;
   noAddress?: boolean;
   noPaddingTab?: boolean;
+  disabledRule?: boolean;
 }>();
 
 const address = defineModel('address', { default: '' });
@@ -75,6 +76,7 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
                 outlined
                 separator
                 :readonly="readonly"
+                :disabledRule="disabledRule"
                 v-model:address="address"
                 v-model:addressEN="addressEN"
                 v-model:provinceId="provinceId"
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index 70b7f1e6..24c771a1 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -71,11 +71,11 @@ onMounted(async () => {
       class="col-3"
       :options="visaTypeOption"
       lazy-rules
-      :rules="[
+    />
+    <!-- :rules="[
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogInputVisaType'),
-      ]"
-    />
+      ]" -->
     <q-input
       for="input-visa-no"
       :dense="dense"
@@ -86,11 +86,11 @@ onMounted(async () => {
       class="col-3"
       :label="$t('formDialogInputVisaNo')"
       v-model="visaNumber"
-      :rules="[
+    />
+    <!-- :rules="[
         (val: string) =>
           !!val || $t('inputValidate') + $t('formDialogInputVisaNo'),
-      ]"
-    />
+      ]" -->
     <VueDatePicker
       id="date-picker-visa-issuance"
       utc
@@ -115,11 +115,11 @@ onMounted(async () => {
           :readonly="readonly"
           :borderless="readonly"
           :model-value="visaIssueDate ? dateFormat(visaIssueDate) : ''"
-          :rules="[
+        >
+          <!-- :rules="[
             (val: string) =>
               !!val || $t('selectValidate') + $t('formDialogInputVisaIssuance'),
-          ]"
-        >
+          ]" -->
           <template v-slot:prepend>
             <q-icon
               size="xs"
@@ -128,6 +128,15 @@ onMounted(async () => {
               color="positive"
             />
           </template>
+          <template v-slot:append>
+            <q-icon
+              v-if="visaIssueDate && !readonly"
+              name="mdi-close"
+              class="cursor-pointer"
+              size="xs"
+              @click="visaIssueDate = undefined"
+            />
+          </template>
         </q-input>
       </template>
     </VueDatePicker>
@@ -155,11 +164,11 @@ onMounted(async () => {
           :readonly="readonly"
           :borderless="readonly"
           :model-value="visaExpiryDate ? dateFormat(visaExpiryDate) : ''"
-          :rules="[
+        >
+          <!-- :rules="[
             (val: string) =>
               !!val || $t('selectValidate') + $t('formDialogInputVisaExpire'),
-          ]"
-        >
+          ]" -->
           <template v-slot:prepend>
             <q-icon
               size="xs"
@@ -168,6 +177,15 @@ onMounted(async () => {
               color="positive"
             />
           </template>
+          <template v-slot:append>
+            <q-icon
+              v-if="visaExpiryDate && !readonly"
+              name="mdi-close"
+              class="cursor-pointer"
+              size="xs"
+              @click="visaExpiryDate = undefined"
+            />
+          </template>
         </q-input>
       </template>
     </VueDatePicker>
@@ -181,11 +199,11 @@ onMounted(async () => {
       class="col-6"
       :label="$t('formDialogInputVisaPlace')"
       v-model="visaIssuingPlace"
-      :rules="[
+    />
+    <!-- :rules="[
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogInputVisaPlace'),
-      ]"
-    />
+      ]" -->
     <VueDatePicker
       id="date-picker-visa-until"
       utc
@@ -210,12 +228,12 @@ onMounted(async () => {
           :readonly="readonly"
           :borderless="readonly"
           :model-value="visaStayUntilDate ? dateFormat(visaStayUntilDate) : ''"
-          :rules="[
+        >
+          <!-- :rules="[
             (val: string) =>
               !!val ||
               $t('selectValidate') + $t('formDialogInputVisaStayUntil'),
-          ]"
-        >
+          ]" -->
           <template v-slot:prepend>
             <q-icon
               size="xs"
@@ -246,11 +264,11 @@ onMounted(async () => {
       class="col-6"
       :label="$t('formDialogInputVisaTM6')"
       v-model="tm6Number"
-      :rules="[
+    />
+    <!-- :rules="[
         (val: string) =>
           !!val || $t('inputValidate') + $t('formDialogInputVisaTM6'),
-      ]"
-    />
+      ]" -->
     <VueDatePicker
       id="date-picker-visa-enter"
       utc
@@ -274,11 +292,11 @@ onMounted(async () => {
           :readonly="readonly"
           :borderless="readonly"
           :model-value="entryDate ? dateFormat(entryDate) : ''"
-          :rules="[
+        >
+          <!-- :rules="[
             (val: string) =>
               !!val || $t('selectValidate') + $t('formDialogInputVisaEnter'),
-          ]"
-        >
+          ]" -->
           <template v-slot:prepend>
             <q-icon
               size="xs"
@@ -287,6 +305,15 @@ onMounted(async () => {
               color="positive"
             />
           </template>
+          <template v-slot:append>
+            <q-icon
+              v-if="entryDate && !readonly"
+              name="mdi-close"
+              class="cursor-pointer"
+              size="xs"
+              @click="entryDate = undefined"
+            />
+          </template>
         </q-input>
       </template>
     </VueDatePicker>
diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index dd3f0304..5fef3356 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -18,6 +18,7 @@ defineProps<{
   maxWidth?: number;
   employee?: boolean;
   noAddress?: boolean;
+  disabledRule?: boolean;
   submit?: (...args: unknown[]) => void;
   close?: (...args: unknown[]) => void;
 }>();
@@ -159,6 +160,7 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
                   :employee="employee"
                   :title="titleFormAddress"
                   :separator="addressSeparator"
+                  :disabledRule="disabledRule"
                   v-model:address="address"
                   v-model:addressEN="addressEN"
                   v-model:provinceId="provinceId"
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index b623a45b..a7b3211c 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1466,8 +1466,9 @@ watch(fieldSelectedCustomer, async () => {
   </FormDialog>
 
   <FormDialog
-    v-model:modal="dialogEmployee"
     employee
+    disabledRule
+    v-model:modal="dialogEmployee"
     addressSeparator
     :noAddress="formDataEmployeeTab !== 'personalInfo'"
     :noPaddingTab="
@@ -2284,6 +2285,7 @@ watch(fieldSelectedCustomer, async () => {
       v-model:districtId="formDataEmployee.districtId"
       v-model:subDistrictId="formDataEmployee.subDistrictId"
       v-model:zipCode="formDataEmployee.zipCode"
+      disabledRule
     >
       <template #person-card>
         <div class="q-ma-md">