chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: form employee disable rule validate

Browse source
This commit is contained in:
puriphatt 2024-06-12 09:08:43 +00:00
parent 70664067e5
commit 60431904ce
5 changed files with 131 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

107
src/components/02_personnel-management/FormAddress.vue
View file

@ -15,6 +15,7 @@ defineProps<{
readonly?: boolean; readonly?: boolean;
separator?: boolean; separator?: boolean;
employee?: boolean; employee?: boolean;
disabledRule?: boolean;
}>(); }>();
const adrressStore = useAddressStore(); const adrressStore = useAddressStore();
@ -116,10 +117,15 @@ watch(districtId, fetchSubDistrict);
class="col-12" class="col-12"
v-model="address" v-model="address"
lazy-rules lazy-rules
:rules="[ :rules="
(val) => disabledRule
(val && val.length > 0) || $t('formDialogInputAddressValidate'), ? []
]" : [
(val) =>
(val && val.length > 0) ||
$t('formDialogInputAddressValidate'),
]
"
/> />
<q-select <q-select
id="select-province" id="select-province"
@ -138,10 +144,15 @@ watch(districtId, fetchSubDistrict);
class="col-3" class="col-3"
:options="addrOptions.provinceOps" :options="addrOptions.provinceOps"
lazy-rules lazy-rules
:rules="[ :rules="
(val) => disabledRule
(val && val.length > 0) || $t('formDialogInputProvinceValidate'), ? []
]" : [
(val) =>
(val && val.length > 0) ||
$t('formDialogInputProvinceValidate'),
]
"
@update:model-value="districtId = subDistrictId = zipCode = null" @update:model-value="districtId = subDistrictId = zipCode = null"
/> />
<q-select <q-select
@ -161,10 +172,15 @@ watch(districtId, fetchSubDistrict);
class="col-3" class="col-3"
:options="addrOptions.districtOps" :options="addrOptions.districtOps"
lazy-rules lazy-rules
:rules="[ :rules="
(val) => disabledRule
(val && val.length > 0) || $t('formDialogInputDistrictValidate'), ? []
]" : [
(val) =>
(val && val.length > 0) ||
$t('formDialogInputDistrictValidate'),
]
"
@update:model-value="subDistrictId = zipCode = null" @update:model-value="subDistrictId = zipCode = null"
/> />
<q-select <q-select
@ -184,11 +200,15 @@ watch(districtId, fetchSubDistrict);
class="col-3" class="col-3"
:options="addrOptions.subDistrictOps" :options="addrOptions.subDistrictOps"
lazy-rules lazy-rules
:rules="[ :rules="
(val) => disabledRule
(val && val.length > 0) || ? []
$t('formDialogInputSubDistrictValidate'), : [
]" (val) =>
(val && val.length > 0) ||
$t('formDialogInputSubDistrictValidate'),
]
"
@update:model-value="(v: string) => selectSubDistrict(v)" @update:model-value="(v: string) => selectSubDistrict(v)"
/> />
<q-input <q-input
@ -217,10 +237,15 @@ watch(districtId, fetchSubDistrict);
class="col-12" class="col-12"
v-model="addressEN" v-model="addressEN"
lazy-rules lazy-rules
:rules="[ :rules="
(val) => disabledRule
(val && val.length > 0) || $t('formDialogInputAddressValidate'), ? []
]" : [
(val) =>
(val && val.length > 0) ||
$t('formDialogInputAddressValidate'),
]
"
/> />
<q-select <q-select
id="select-province-en" id="select-province-en"
@ -239,10 +264,15 @@ watch(districtId, fetchSubDistrict);
class="col-3" class="col-3"
:options="addrOptions.provinceOps" :options="addrOptions.provinceOps"
lazy-rules lazy-rules
:rules="[ :rules="
(val) => disabledRule
(val && val.length > 0) || $t('formDialogInputProvinceValidate'), ? []
]" : [
(val) =>
(val && val.length > 0) ||
$t('formDialogInputProvinceValidate'),
]
"
@update:model-value="districtId = subDistrictId = zipCode = null" @update:model-value="districtId = subDistrictId = zipCode = null"
/> />
<q-select <q-select
@ -262,10 +292,15 @@ watch(districtId, fetchSubDistrict);
class="col-3" class="col-3"
:options="addrOptions.districtOps" :options="addrOptions.districtOps"
lazy-rules lazy-rules
:rules="[ :rules="
(val) => disabledRule
(val && val.length > 0) || $t('formDialogInputDistrictValidate'), ? []
]" : [
(val) =>
(val && val.length > 0) ||
$t('formDialogInputDistrictValidate'),
]
"
@update:model-value="subDistrictId = zipCode = null" @update:model-value="subDistrictId = zipCode = null"
/> />
<q-select <q-select
@ -285,11 +320,15 @@ watch(districtId, fetchSubDistrict);
class="col-3" class="col-3"
:options="addrOptions.subDistrictOps" :options="addrOptions.subDistrictOps"
lazy-rules lazy-rules
:rules="[ :rules="
(val) => disabledRule
(val && val.length > 0) || ? []
$t('formDialogInputSubDistrictValidate'), : [
]" (val) =>
(val && val.length > 0) ||
$t('formDialogInputSubDistrictValidate'),
]
"
@update:model-value="(v: string) => selectSubDistrict(v)" @update:model-value="(v: string) => selectSubDistrict(v)"
/> />
<q-input <q-input

2
src/components/02_personnel-management/InfoForm.vue
View file

@ -9,6 +9,7 @@ defineProps<{
addressTitleEN?: string; addressTitleEN?: string;
noAddress?: boolean; noAddress?: boolean;
noPaddingTab?: boolean; noPaddingTab?: boolean;
disabledRule?: boolean;
}>(); }>();
const address = defineModel('address', { default: '' }); const address = defineModel('address', { default: '' });
@ -75,6 +76,7 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
outlined outlined
separator separator
:readonly="readonly" :readonly="readonly"
:disabledRule="disabledRule"
v-model:address="address" v-model:address="address"
v-model:addressEN="addressEN" v-model:addressEN="addressEN"
v-model:provinceId="provinceId" v-model:provinceId="provinceId"

75
src/components/03_customer-management/FormEmployeeVisa.vue
View file

@ -71,11 +71,11 @@ onMounted(async () => {
class="col-3" class="col-3"
:options="visaTypeOption" :options="visaTypeOption"
lazy-rules lazy-rules
:rules="[ />
<!-- :rules="[
(val: string) => (val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputVisaType'), !!val || $t('selectValidate') + $t('formDialogInputVisaType'),
]" ]" -->
/>
<q-input <q-input
for="input-visa-no" for="input-visa-no"
:dense="dense" :dense="dense"
@ -86,11 +86,11 @@ onMounted(async () => {
class="col-3" class="col-3"
:label="$t('formDialogInputVisaNo')" :label="$t('formDialogInputVisaNo')"
v-model="visaNumber" v-model="visaNumber"
:rules="[ />
<!-- :rules="[
(val: string) => (val: string) =>
!!val || $t('inputValidate') + $t('formDialogInputVisaNo'), !!val || $t('inputValidate') + $t('formDialogInputVisaNo'),
]" ]" -->
/>
<VueDatePicker <VueDatePicker
id="date-picker-visa-issuance" id="date-picker-visa-issuance"
utc utc
@ -115,11 +115,11 @@ onMounted(async () => {
:readonly="readonly" :readonly="readonly"
:borderless="readonly" :borderless="readonly"
:model-value="visaIssueDate ? dateFormat(visaIssueDate) : ''" :model-value="visaIssueDate ? dateFormat(visaIssueDate) : ''"
:rules="[ >
<!-- :rules="[
(val: string) => (val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputVisaIssuance'), !!val || $t('selectValidate') + $t('formDialogInputVisaIssuance'),
]" ]" -->
>
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
size="xs" size="xs"
@ -128,6 +128,15 @@ onMounted(async () => {
color="positive" color="positive"
/> />
</template> </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> </q-input>
</template> </template>
</VueDatePicker> </VueDatePicker>
@ -155,11 +164,11 @@ onMounted(async () => {
:readonly="readonly" :readonly="readonly"
:borderless="readonly" :borderless="readonly"
:model-value="visaExpiryDate ? dateFormat(visaExpiryDate) : ''" :model-value="visaExpiryDate ? dateFormat(visaExpiryDate) : ''"
:rules="[ >
<!-- :rules="[
(val: string) => (val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputVisaExpire'), !!val || $t('selectValidate') + $t('formDialogInputVisaExpire'),
]" ]" -->
>
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
size="xs" size="xs"
@ -168,6 +177,15 @@ onMounted(async () => {
color="positive" color="positive"
/> />
</template> </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> </q-input>
</template> </template>
</VueDatePicker> </VueDatePicker>
@ -181,11 +199,11 @@ onMounted(async () => {
class="col-6" class="col-6"
:label="$t('formDialogInputVisaPlace')" :label="$t('formDialogInputVisaPlace')"
v-model="visaIssuingPlace" v-model="visaIssuingPlace"
:rules="[ />
<!-- :rules="[
(val: string) => (val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputVisaPlace'), !!val || $t('selectValidate') + $t('formDialogInputVisaPlace'),
]" ]" -->
/>
<VueDatePicker <VueDatePicker
id="date-picker-visa-until" id="date-picker-visa-until"
utc utc
@ -210,12 +228,12 @@ onMounted(async () => {
:readonly="readonly" :readonly="readonly"
:borderless="readonly" :borderless="readonly"
:model-value="visaStayUntilDate ? dateFormat(visaStayUntilDate) : ''" :model-value="visaStayUntilDate ? dateFormat(visaStayUntilDate) : ''"
:rules="[ >
<!-- :rules="[
(val: string) => (val: string) =>
!!val || !!val ||
$t('selectValidate') + $t('formDialogInputVisaStayUntil'), $t('selectValidate') + $t('formDialogInputVisaStayUntil'),
]" ]" -->
>
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
size="xs" size="xs"
@ -246,11 +264,11 @@ onMounted(async () => {
class="col-6" class="col-6"
:label="$t('formDialogInputVisaTM6')" :label="$t('formDialogInputVisaTM6')"
v-model="tm6Number" v-model="tm6Number"
:rules="[ />
<!-- :rules="[
(val: string) => (val: string) =>
!!val || $t('inputValidate') + $t('formDialogInputVisaTM6'), !!val || $t('inputValidate') + $t('formDialogInputVisaTM6'),
]" ]" -->
/>
<VueDatePicker <VueDatePicker
id="date-picker-visa-enter" id="date-picker-visa-enter"
utc utc
@ -274,11 +292,11 @@ onMounted(async () => {
:readonly="readonly" :readonly="readonly"
:borderless="readonly" :borderless="readonly"
:model-value="entryDate ? dateFormat(entryDate) : ''" :model-value="entryDate ? dateFormat(entryDate) : ''"
:rules="[ >
<!-- :rules="[
(val: string) => (val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputVisaEnter'), !!val || $t('selectValidate') + $t('formDialogInputVisaEnter'),
]" ]" -->
>
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
size="xs" size="xs"
@ -287,6 +305,15 @@ onMounted(async () => {
color="positive" color="positive"
/> />
</template> </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> </q-input>
</template> </template>
</VueDatePicker> </VueDatePicker>

2
src/components/FormDialog.vue
View file

@ -18,6 +18,7 @@ defineProps<{
maxWidth?: number; maxWidth?: number;
employee?: boolean; employee?: boolean;
noAddress?: boolean; noAddress?: boolean;
disabledRule?: boolean;
submit?: (...args: unknown[]) => void; submit?: (...args: unknown[]) => void;
close?: (...args: unknown[]) => void; close?: (...args: unknown[]) => void;
}>(); }>();
@ -159,6 +160,7 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
:employee="employee" :employee="employee"
:title="titleFormAddress" :title="titleFormAddress"
:separator="addressSeparator" :separator="addressSeparator"
:disabledRule="disabledRule"
v-model:address="address" v-model:address="address"
v-model:addressEN="addressEN" v-model:addressEN="addressEN"
v-model:provinceId="provinceId" v-model:provinceId="provinceId"

4
src/pages/03_customer-management/MainPage.vue
View file

@ -1466,8 +1466,9 @@ watch(fieldSelectedCustomer, async () => {
</FormDialog> </FormDialog>
<FormDialog <FormDialog
v-model:modal="dialogEmployee"
employee employee
disabledRule
v-model:modal="dialogEmployee"
addressSeparator addressSeparator
:noAddress="formDataEmployeeTab !== 'personalInfo'" :noAddress="formDataEmployeeTab !== 'personalInfo'"
:noPaddingTab=" :noPaddingTab="
@ -2284,6 +2285,7 @@ watch(fieldSelectedCustomer, async () => {
v-model:districtId="formDataEmployee.districtId" v-model:districtId="formDataEmployee.districtId"
v-model:subDistrictId="formDataEmployee.subDistrictId" v-model:subDistrictId="formDataEmployee.subDistrictId"
v-model:zipCode="formDataEmployee.zipCode" v-model:zipCode="formDataEmployee.zipCode"
disabledRule
> >
<template #person-card> <template #person-card>
<div class="q-ma-md"> <div class="q-ma-md">