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

feat: rule validate employee

Browse source
This commit is contained in:
puriphatt 2024-06-11 04:58:59 +00:00
parent 6c54c80289
commit 93697fd8cc
4 changed files with 127 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/components/02_personnel-management/FormPerson.vue
View file

@ -135,12 +135,17 @@ defineProps<{
<template #trigger>
<q-input
id="input-birth-date"
hide-bottom-space
:label="$t('formDialogInputBirthDate')"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:model-value="birthDate ? dateFormat(birthDate) : ''"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
]"
>
<template v-slot:prepend>
<q-icon
@ -150,15 +155,6 @@ defineProps<{
color="positive"
/>
</template>
<template v-slot:append>
<q-icon
v-if="birthDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="birthDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
@ -175,6 +171,7 @@ defineProps<{
<q-select
v-if="employee"
id="select-gender"
hide-bottom-space
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
@ -188,10 +185,15 @@ defineProps<{
option-value="value"
v-model="gender"
:options="userStore.userOption.genderOpts"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputGender'),
]"
/>
<q-select
v-if="employee"
id="select-nationality"
hide-bottom-space
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
@ -206,6 +208,10 @@ defineProps<{
option-value="label"
v-model="nationality"
:options="userStore.userOption.nationalityOpts"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputNationality'),
]"
/>
</div>
<q-separator

28
src/components/03_customer-management/BasicInformation.vue
View file

@ -1,4 +1,6 @@
<script setup lang="ts">
import { ref } from 'vue';
const customerName = defineModel<string>('customerName');
const customerNameEn = defineModel<string>('customerNameEn');
const taxNo = defineModel<string | null | undefined>('taxNo');
@ -10,6 +12,13 @@ const customerBranchId = defineModel<string>('customerBranchId');
const employeeID = defineModel<string>('employeeID');
const nrcNo = defineModel<string>('nrcNo');
const branchOption = ref([
{
label: 'uuu',
value: 'ad87961c-c44f-47ca-8c1e-0ef30c2b16ba',
},
]);
defineProps<{
dense?: boolean;
outlined?: boolean;
@ -72,16 +81,27 @@ defineProps<{
<div v-if="employee" class="col-9 row q-col-gutter-md">
<q-select
id="select-employer-branch"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogEmployerID')"
:label="$t('formDialogEmployerBranchCode')"
v-model="customerBranchId"
option-label="label"
option-value="value"
emit-value
map-options
:options="branchOption"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogEmployerBranchCode'),
]"
/>
<q-input
for="input-employeeID"
:dense="dense"
:outlined="!readonly"
:readonly="true"
@ -90,9 +110,9 @@ defineProps<{
class="col-3"
:label="$t('formDialogEmployeeID')"
v-model="employeeID"
for="input-employeeID"
/>
<q-input
for="input-nrcNo"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
@ -101,6 +121,10 @@ defineProps<{
class="col-6"
:label="$t('formDialogEmployeeNRCNo')"
v-model="nrcNo"
:rules="[
(val: string) =>
!!val || $t('inputValidate') + $t('formDialogEmployeeNRCNo'),
]"
/>
</div>

70
src/components/03_customer-management/FormEmployeePassport.vue
View file

@ -53,7 +53,7 @@ onMounted(async () => {
<div class="col-3 app-text-muted">• {{ $t(`formDialogTitlePassport`) }}</div>
<div class="col-9 row q-col-gutter-md">
<q-select
id="select-positionName"
id="select-passport-type"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
@ -69,9 +69,13 @@ onMounted(async () => {
class="col-3"
:options="addrOptions.provinceOps"
lazy-rules
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputPassportType'),
]"
/>
<q-input
for="input-ownerName"
for="input-passport-no"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
@ -80,9 +84,13 @@ onMounted(async () => {
class="col-3"
:label="$t('formDialogInputPassportNo')"
v-model="passportNumber"
:rules="[
(val: string) =>
!!val || $t('inputValidate') + $t('formDialogInputPassportNo'),
]"
/>
<q-input
for="input-ownerName"
for="input-passport-ref"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
@ -91,20 +99,28 @@ onMounted(async () => {
class="col-6"
:label="$t('formDialogInputPassportRef')"
v-model="previousPassportReference"
:rules="[
(val: string) =>
!!val || $t('inputValidate') + $t('formDialogInputPassportRef'),
]"
/>
<q-input
for="input-ownerName"
for="input-passport-place"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
:borderless="readonly"
hide-bottom-space
class="col-3"
:label="$t('formDialogInputWPasspornPlace')"
:label="$t('formDialogInputWPassportPlace')"
v-model="passportIssuingPlace"
:rules="[
(val: string) =>
!!val || $t('inputValidate') + $t('formDialogInputWPassportPlace'),
]"
/>
<q-select
id="select-jobType"
id="select-passport-country"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
@ -120,9 +136,13 @@ onMounted(async () => {
class="col-3"
:options="addrOptions.provinceOps"
lazy-rules
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputPassportCountry'),
]"
/>
<VueDatePicker
id="date-picker-workEndDate"
id="date-picker-passport-issueance"
utc
autoApply
:teleport="true"
@ -138,12 +158,18 @@ onMounted(async () => {
<template #trigger>
<q-input
id="input-birth-date"
hide-bottom-space
:label="$t('formDialogInputPassportIssuance')"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:model-value="passportIssueDate ? dateFormat(passportIssueDate) : ''"
:rules="[
(val: string) =>
!!val ||
$t('selectValidate') + $t('formDialogInputPassportIssuance'),
]"
>
<template v-slot:prepend>
<q-icon
@ -153,20 +179,11 @@ onMounted(async () => {
color="positive"
/>
</template>
<template v-slot:append>
<q-icon
v-if="passportIssueDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="passportIssueDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
<VueDatePicker
id="date-picker-workPermitIssuDate"
id="date-picker-passport-expire"
utc
autoApply
:teleport="true"
@ -182,6 +199,7 @@ onMounted(async () => {
<template #trigger>
<q-input
id="input-birth-date"
hide-bottom-space
:label="$t('formDialogInputPassportExpire')"
:dense="dense"
:outlined="readonly ? false : outlined"
@ -190,6 +208,11 @@ onMounted(async () => {
:model-value="
passportExpiryDate ? dateFormat(passportExpiryDate) : ''
"
:rules="[
(val: string) =>
!!val ||
$t('selectValidate') + $t('formDialogInputPassportExpire'),
]"
>
<template v-slot:prepend>
<q-icon
@ -199,15 +222,6 @@ onMounted(async () => {
color="positive"
/>
</template>
<template v-slot:append>
<q-icon
v-if="passportExpiryDate && !readonly"
name="mdi-close"
class="cursor-pointer"
size="xs"
@click="passportExpiryDate = undefined"
/>
</template>
</q-input>
</template>
</VueDatePicker>
@ -215,8 +229,8 @@ onMounted(async () => {
<q-separator
v-if="separator"
class="col-12 q-mt-xl q-mb-md"
style="padding-block: 0.5px"
class="col-12 q-mb-md"
style="padding-block: 0.5px; margin-top: 32px"
/>
</template>

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

@ -52,7 +52,7 @@ onMounted(async () => {
<div class="col-3 app-text-muted">• {{ $t(`formDialogTitleVisa`) }}</div>
<div class="col-9 row q-col-gutter-md">
<q-select
id="select-positionName"
id="select-visa-type"
:dense="dense"
:readonly="readonly"
:outlined="readonly ? false : outlined"
@ -68,9 +68,13 @@ onMounted(async () => {
class="col-3"
:options="addrOptions.provinceOps"
lazy-rules
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputVisaType'),
]"
/>
<q-input
for="input-ownerName"
for="input-visa-no"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
@ -79,9 +83,13 @@ onMounted(async () => {
class="col-3"
:label="$t('formDialogInputVisaNo')"
v-model="visaNumber"
:rules="[
(val: string) =>
!!val || $t('inputValidate') + $t('formDialogInputVisaNo'),
]"
/>
<VueDatePicker
id="date-picker-workPermitIssuDate"
id="date-picker-visa-issuance"
utc
autoApply
:teleport="true"
@ -97,12 +105,17 @@ onMounted(async () => {
<template #trigger>
<q-input
id="input-birth-date"
hide-bottom-space
:label="$t('formDialogInputVisaIssuance')"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:model-value="visaIssueDate ? dateFormat(visaIssueDate) : ''"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputVisaIssuance'),
]"
>
<template v-slot:prepend>
<q-icon
@ -112,20 +125,11 @@ 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>
<VueDatePicker
id="date-picker-workPermitIssuDate"
id="date-picker-visa-expire"
utc
autoApply
:teleport="true"
@ -141,12 +145,17 @@ onMounted(async () => {
<template #trigger>
<q-input
id="input-birth-date"
hide-bottom-space
:label="$t('formDialogInputVisaExpire')"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:model-value="visaExpiryDate ? dateFormat(visaExpiryDate) : ''"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputVisaExpire'),
]"
>
<template v-slot:prepend>
<q-icon
@ -156,20 +165,11 @@ 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>
<q-input
for="input-ownerName"
for="input-visa-place"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
@ -178,9 +178,13 @@ onMounted(async () => {
class="col-6"
:label="$t('formDialogInputVisaPlace')"
v-model="visaIssuingPlace"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputVisaPlace'),
]"
/>
<VueDatePicker
id="date-picker-workPermitIssuDate"
id="date-picker-visa-until"
utc
autoApply
:teleport="true"
@ -196,12 +200,18 @@ onMounted(async () => {
<template #trigger>
<q-input
id="input-birth-date"
hide-bottom-space
:label="$t('formDialogInputVisaStayUntil')"
:dense="dense"
:outlined="readonly ? false : outlined"
:readonly="readonly"
:borderless="readonly"
:model-value="visaStayUntilDate ? dateFormat(visaStayUntilDate) : ''"
:rules="[
(val: string) =>
!!val ||
$t('selectValidate') + $t('formDialogInputVisaStayUntil'),
]"
>
<template v-slot:prepend>
<q-icon
@ -224,7 +234,7 @@ onMounted(async () => {
</template>
</VueDatePicker>
<q-input
for="input-ownerName"
for="input-tm6"
:dense="dense"
:outlined="!readonly"
:readonly="readonly"
@ -233,9 +243,13 @@ onMounted(async () => {
class="col-6"
:label="$t('formDialogInputVisaTM6')"
v-model="tm6Number"
:rules="[
(val: string) =>
!!val || $t('inputValidate') + $t('formDialogInputVisaTM6'),
]"
/>
<VueDatePicker
id="date-picker-workPermitIssuDate"
id="date-picker-visa-enter"
utc
autoApply
:teleport="true"
@ -257,6 +271,10 @@ onMounted(async () => {
:readonly="readonly"
:borderless="readonly"
:model-value="entryDate ? dateFormat(entryDate) : ''"
:rules="[
(val: string) =>
!!val || $t('selectValidate') + $t('formDialogInputVisaEnter'),
]"
>
<template v-slot:prepend>
<q-icon
@ -266,15 +284,6 @@ 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>