feat: add contact name and contact tel fields to user types and forms
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 8s
Some checks failed
Spell Check / Spell Check with Typos (push) Failing after 8s
This commit is contained in:
puriphatt
parent
e189b9a880
commit
145784ee40
7 changed files with 116 additions and 246 deletions
|
|
@ -1,10 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { QSelect } from 'quasar';
|
||||
import useOptionStore from 'stores/options';
|
||||
import { selectFilterOptionRefMod } from 'stores/utils';
|
||||
import { calculateAge, disabledAfterToday } from 'src/utils/datetime';
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { capitalize } from 'vue';
|
||||
import { watch } from 'vue';
|
||||
import SelectInput from '../shared/SelectInput.vue';
|
||||
import DatePicker from '../shared/DatePicker.vue';
|
||||
|
||||
const optionStore = useOptionStore();
|
||||
|
|
@ -23,6 +21,8 @@ const midNameEN = defineModel<string | null>('midNameEn');
|
|||
const citizenId = defineModel<string>('citizenId');
|
||||
const citizenIssue = defineModel<Date | null>('citizenIssue');
|
||||
const citizenExpire = defineModel<Date | null>('citizenExpire');
|
||||
const contactName = defineModel<string>('contactName');
|
||||
const contactTel = defineModel<string>('contactTel');
|
||||
|
||||
const props = defineProps<{
|
||||
dense?: boolean;
|
||||
|
|
@ -30,94 +30,19 @@ const props = defineProps<{
|
|||
readonly?: boolean;
|
||||
separator?: boolean;
|
||||
employee?: boolean;
|
||||
agency?: boolean;
|
||||
title?: string;
|
||||
prefixId: string;
|
||||
hideNameEn?: boolean;
|
||||
}>();
|
||||
|
||||
const prefixNameOptions = ref<Record<string, unknown>[]>([]);
|
||||
let prefixNameFilter: (
|
||||
value: string,
|
||||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
||||
) => void;
|
||||
|
||||
const prefixNameOptionsEn = ref<Record<string, unknown>[]>([]);
|
||||
let prefixNameFilterEn: (
|
||||
value: string,
|
||||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
||||
) => void;
|
||||
|
||||
const genderOptions = ref<Record<string, unknown>[]>([]);
|
||||
let genderFilter: (
|
||||
value: string,
|
||||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
||||
) => void;
|
||||
|
||||
const nationalityOptions = ref<Record<string, unknown>[]>([]);
|
||||
let nationalityFilter: (
|
||||
value: string,
|
||||
update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
|
||||
) => void;
|
||||
|
||||
function matPreFixName() {
|
||||
function matchPreFixName() {
|
||||
if (gender.value === 'male') prefixName.value = 'mr';
|
||||
if (gender.value === 'female' && prefixName.value === 'mr') {
|
||||
prefixName.value = 'mrs';
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
prefixNameFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption?.prefix),
|
||||
prefixNameOptions,
|
||||
'label',
|
||||
);
|
||||
|
||||
prefixNameFilterEn = selectFilterOptionRefMod(
|
||||
ref(optionStore.rawOption?.eng.prefix),
|
||||
prefixNameOptionsEn,
|
||||
'label',
|
||||
);
|
||||
|
||||
genderFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption?.gender),
|
||||
genderOptions,
|
||||
'label',
|
||||
);
|
||||
nationalityFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption?.nationality),
|
||||
nationalityOptions,
|
||||
'label',
|
||||
);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => optionStore.globalOption,
|
||||
() => {
|
||||
prefixNameFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption.prefix),
|
||||
prefixNameOptions,
|
||||
'label',
|
||||
);
|
||||
genderFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption.gender),
|
||||
genderOptions,
|
||||
'label',
|
||||
);
|
||||
nationalityFilter = selectFilterOptionRefMod(
|
||||
ref(optionStore.globalOption.nationality),
|
||||
nationalityOptions,
|
||||
'label',
|
||||
);
|
||||
|
||||
prefixNameFilterEn = selectFilterOptionRefMod(
|
||||
ref(optionStore.rawOption?.eng.prefix),
|
||||
prefixNameOptionsEn,
|
||||
'label',
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => prefixName.value,
|
||||
(v) => {
|
||||
|
|
@ -131,7 +56,7 @@ watch(
|
|||
() => gender.value,
|
||||
() => {
|
||||
if (props.readonly) return;
|
||||
matPreFixName();
|
||||
matchPreFixName();
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
|
@ -171,41 +96,17 @@ watch(
|
|||
for="input-citizen-id"
|
||||
/>
|
||||
<div class="col-12 row" style="display: flex; gap: var(--size-2)">
|
||||
<q-select
|
||||
outlined
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
<SelectInput
|
||||
hide-dropdown-icon
|
||||
autocomplete="off"
|
||||
class="col-md-1 col-6"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="prefixNameOptions"
|
||||
:readonly
|
||||
:option="optionStore.globalOption?.prefix"
|
||||
:id="`${prefixId}-select-prefix-name`"
|
||||
:for="`${prefixId}-select-prefix-name`"
|
||||
:label="$t('personnel.form.prefixName')"
|
||||
@filter="prefixNameFilter"
|
||||
:model-value="readonly ? prefixName || '-' : prefixName"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (prefixName = v) : '')
|
||||
"
|
||||
@clear="prefixName = ''"
|
||||
:rules="[(val: string) => !!val || $t('form.error.required')]"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
:label="$t('personnel.form.prefixName')"
|
||||
class="col-md-1 col-6"
|
||||
v-model="prefixName"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-first-name`"
|
||||
|
|
@ -217,7 +118,7 @@ watch(
|
|||
:label="$t('personnel.form.firstName')"
|
||||
v-model="firstName"
|
||||
:rules="
|
||||
employee
|
||||
employee || agency
|
||||
? []
|
||||
: [(val: string) => !!val || $t('form.error.required')]
|
||||
"
|
||||
|
|
@ -255,41 +156,17 @@ watch(
|
|||
class="col-12 row"
|
||||
style="display: flex; gap: var(--size-2)"
|
||||
>
|
||||
<q-select
|
||||
outlined
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
<SelectInput
|
||||
hide-dropdown-icon
|
||||
autocomplete="off"
|
||||
class="col-md-1 col-6"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="prefixNameOptionsEn"
|
||||
:readonly
|
||||
:option="optionStore.rawOption?.eng.prefix"
|
||||
:id="`${prefixId}-select-prefix-name-en`"
|
||||
:for="`${prefixId}-select-prefix-name-en`"
|
||||
label="Prefix"
|
||||
@filter="prefixNameFilter"
|
||||
:model-value="readonly ? prefixName || '-' : prefixName"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (prefixName = v) : '')
|
||||
"
|
||||
@clear="prefixName = ''"
|
||||
:rules="[(val: string) => !!val || $t('form.error.required')]"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
:label="$t('personnel.form.prefixName')"
|
||||
class="col-md-1 col-6"
|
||||
v-model="prefixName"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:for="`${prefixId}-input-first-name-en`"
|
||||
|
|
@ -405,39 +282,16 @@ watch(
|
|||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-select
|
||||
<SelectInput
|
||||
v-if="!employee"
|
||||
outlined
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
autocomplete="off"
|
||||
class="col-md-2 col-6"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="genderOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:readonly
|
||||
:option="optionStore.globalOption?.gender"
|
||||
:id="`${prefixId}-select-gender`"
|
||||
:for="`${prefixId}-select-gender`"
|
||||
:label="$t('form.gender')"
|
||||
@filter="genderFilter"
|
||||
:model-value="readonly ? gender || '-' : gender"
|
||||
@update:model-value="(v) => (typeof v === 'string' ? (gender = v) : '')"
|
||||
@clear="gender = ''"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
class="col-md-2 col-6"
|
||||
v-model="gender"
|
||||
/>
|
||||
|
||||
<DatePicker
|
||||
v-model="birthDate"
|
||||
|
|
@ -514,70 +368,67 @@ watch(
|
|||
"
|
||||
/>
|
||||
|
||||
<q-select
|
||||
<SelectInput
|
||||
v-if="employee"
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
autocomplete="off"
|
||||
hide-bottom-space
|
||||
input-debounce="0"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
class="col-md-2 col-6"
|
||||
:dense="dense"
|
||||
v-model="gender"
|
||||
:readonly="readonly"
|
||||
:options="genderOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:readonly
|
||||
:option="optionStore.globalOption?.gender"
|
||||
:id="`${prefixId}-select-gender`"
|
||||
:for="`${prefixId}-select-gender`"
|
||||
:label="$t('form.gender')"
|
||||
@filter="genderFilter"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-select
|
||||
v-if="employee"
|
||||
outlined
|
||||
clearable
|
||||
use-input
|
||||
fill-input
|
||||
emit-value
|
||||
map-options
|
||||
hide-selected
|
||||
hide-bottom-space
|
||||
autocomplete="off"
|
||||
input-debounce="0"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
v-model="nationality"
|
||||
class="col-md-2 col-6"
|
||||
:dense="dense"
|
||||
:readonly="readonly"
|
||||
:options="nationalityOptions"
|
||||
:hide-dropdown-icon="readonly"
|
||||
v-model="gender"
|
||||
/>
|
||||
<SelectInput
|
||||
v-if="employee"
|
||||
:readonly
|
||||
:option="optionStore.globalOption.nationality"
|
||||
:id="`${prefixId}-select-nationality`"
|
||||
:for="`${prefixId}-select-nationality`"
|
||||
:label="$t('general.nationality')"
|
||||
@filter="nationalityFilter"
|
||||
class="col-md-2 col-6"
|
||||
v-model="nationality"
|
||||
clearable
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-if="agency"
|
||||
for="input-agencies-contact-name"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-md-4 col-12"
|
||||
:label="$t('personnel.form.contactName')"
|
||||
:model-value="readonly ? contactName || '-' : contactName"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (contactName = v) : '')
|
||||
"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-if="agency"
|
||||
for="input-agencies-contact-tel"
|
||||
id="input-agencies-contact-tel"
|
||||
dense
|
||||
outlined
|
||||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-md-4 col-12"
|
||||
:label="$t('personnel.form.contactTel')"
|
||||
:model-value="readonly ? contactTel || '-' : contactTel"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (contactTel = v) : '')
|
||||
"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey">
|
||||
{{ $t('general.noData') }}
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<template #prepend>
|
||||
<q-icon
|
||||
size="xs"
|
||||
name="mdi-phone-outline"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ type Options = { label: string; value: string };
|
|||
:readonly="readonly"
|
||||
hide-bottom-space
|
||||
class="col-md-4 col-12"
|
||||
:label="$t('form.telephone')"
|
||||
:label="$t('agencies.contactTel')"
|
||||
:model-value="readonly ? contactTel || '-' : contactTel"
|
||||
@update:model-value="
|
||||
(v) => (typeof v === 'string' ? (contactTel = v) : '')
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ const props = withDefaults(
|
|||
disable?: boolean;
|
||||
multiple?: boolean;
|
||||
hideInput?: boolean;
|
||||
hideDropdownIcon?: boolean;
|
||||
|
||||
rules?: ((value: string) => string | true)[];
|
||||
}>(),
|
||||
|
|
@ -82,7 +83,7 @@ watch(
|
|||
:hide-selected
|
||||
hide-bottom-space
|
||||
:fill-input="fillInput && !!model"
|
||||
:hide-dropdown-icon="readonly"
|
||||
:hide-dropdown-icon="readonly || hideDropdownIcon"
|
||||
input-debounce="500"
|
||||
:option-value="
|
||||
typeof props.optionValue === 'string' ? props.optionValue : 'value'
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ export default {
|
|||
branchStatus: 'Branch Status',
|
||||
success: 'Success',
|
||||
taxNo: 'Legal Person',
|
||||
contactName: 'Contact Name',
|
||||
contactName: 'Contact Person',
|
||||
image: 'Image of ',
|
||||
apply: 'Apply',
|
||||
licenseNumber: 'License number',
|
||||
|
|
@ -382,7 +382,7 @@ export default {
|
|||
branchLabel: 'Branch',
|
||||
branchHQLabel: 'Headoffice',
|
||||
taxNo: 'Legal Person',
|
||||
contactName: 'Contact Name',
|
||||
contactName: 'Contact Person',
|
||||
},
|
||||
page: {
|
||||
captionManage: 'Manage',
|
||||
|
|
@ -403,8 +403,8 @@ export default {
|
|||
code: 'Headoffice Code',
|
||||
codeBranch: 'Branch Code',
|
||||
taxNo: 'Tax Identification Number',
|
||||
contactName: 'Contact Name',
|
||||
contactTelephone: 'Contact Telephone',
|
||||
contactName: 'Contact Person',
|
||||
contactTelephone: 'Contact Number',
|
||||
branchName: 'Branch Name',
|
||||
branchNameEN: 'Branch Name (EN)',
|
||||
servicePointName: 'Service Point Name',
|
||||
|
|
@ -469,6 +469,8 @@ export default {
|
|||
normal: 'Normal',
|
||||
canceled: 'Canceled',
|
||||
blacklist: 'Black list',
|
||||
contactName: 'Contact Person',
|
||||
contactTel: 'Contact Number',
|
||||
},
|
||||
},
|
||||
customer: {
|
||||
|
|
@ -560,7 +562,7 @@ export default {
|
|||
jobPosition: 'Job Position',
|
||||
address: 'Address',
|
||||
workPlace: 'Workplace',
|
||||
contactName: 'Contact Name',
|
||||
contactName: 'Contact Person',
|
||||
contactPhone: 'Contact Phone',
|
||||
totalEmployee: 'Total Employee',
|
||||
officeTel: 'Headoffice Telephone',
|
||||
|
|
@ -798,7 +800,7 @@ export default {
|
|||
employee: 'Employee',
|
||||
employeeName: 'Full Name',
|
||||
workName: 'Work Name',
|
||||
contactName: 'Contact Name',
|
||||
contactName: 'Contact Person',
|
||||
documentReceivePoint: 'Document Drop-Off Point"',
|
||||
dueDate: 'Quotation Due Date',
|
||||
specialCondition: 'Special Conditions',
|
||||
|
|
@ -916,8 +918,8 @@ export default {
|
|||
code: 'Agencies Code',
|
||||
group: 'Agencies Group',
|
||||
name: 'Agencies Name',
|
||||
contactName: 'Contact Name',
|
||||
contactTel: 'Contact Telephone',
|
||||
contactName: 'Contact Person',
|
||||
contactTel: 'Contact Number',
|
||||
bankInfo: 'Bank Information',
|
||||
},
|
||||
|
||||
|
|
@ -1006,7 +1008,7 @@ export default {
|
|||
issueBranch: 'Issue Branch',
|
||||
issueDate: 'Issue Date',
|
||||
madeBy: 'Made By',
|
||||
contactName: 'Contact Name',
|
||||
contactName: 'Contact Person',
|
||||
workOrderCode: 'Work Order Code',
|
||||
workOrderName: 'Work Order Name',
|
||||
telephone: 'Telephone',
|
||||
|
|
|
|||
|
|
@ -465,6 +465,8 @@ export default {
|
|||
normal: 'ปกติ',
|
||||
canceled: 'ยกเลิก',
|
||||
blacklist: 'แบล็คลิสต์',
|
||||
contactName: 'ชื่อผู้ติดต่อ',
|
||||
contactTel: 'เบอร์โทรศัพท์ผู้ติดต่อ',
|
||||
},
|
||||
},
|
||||
customer: {
|
||||
|
|
|
|||
|
|
@ -151,6 +151,8 @@ const defaultFormData = {
|
|||
citizenExpire: null,
|
||||
citizenIssue: null,
|
||||
citizenId: '',
|
||||
contactName: '',
|
||||
contactTel: '',
|
||||
remark: '',
|
||||
agencyStatus: '',
|
||||
};
|
||||
|
|
@ -201,6 +203,8 @@ const formData = ref<UserCreate>({
|
|||
citizenExpire: null,
|
||||
citizenIssue: null,
|
||||
citizenId: '',
|
||||
contactName: '',
|
||||
contactTel: '',
|
||||
remark: '',
|
||||
agencyStatus: '',
|
||||
});
|
||||
|
|
@ -590,6 +594,8 @@ async function assignFormData(idEdit: string) {
|
|||
responsibleArea: foundUser.responsibleArea,
|
||||
status: foundUser.status,
|
||||
selectedImage: foundUser.selectedImage,
|
||||
contactName: foundUser.contactName,
|
||||
contactTel: foundUser.contactTel,
|
||||
licenseExpireDate:
|
||||
(foundUser.licenseExpireDate &&
|
||||
new Date(foundUser.licenseExpireDate)) ||
|
||||
|
|
@ -1752,12 +1758,15 @@ watch(
|
|||
v-model:citizen-id="formData.citizenId"
|
||||
v-model:citizen-issue="formData.citizenIssue"
|
||||
v-model:citizen-expire="formData.citizenExpire"
|
||||
v-model:contact-name="formData.contactName"
|
||||
v-model:contact-tel="formData.contactTel"
|
||||
:title="'personnel.form.personalInformation'"
|
||||
prefix-id="drawer-info-personnel"
|
||||
dense
|
||||
outlined
|
||||
separator
|
||||
:readonly="!infoDrawerEdit"
|
||||
:agency="formData.userType === 'AGENCY'"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
|
||||
|
|
@ -1967,6 +1976,7 @@ watch(
|
|||
id="dialog-form-personal"
|
||||
prefix-id="form-dialog-personnel"
|
||||
dense
|
||||
:agency="formData.userType === 'AGENCY'"
|
||||
outlined
|
||||
separator
|
||||
:title="'personnel.form.personalInformation'"
|
||||
|
|
@ -1985,6 +1995,8 @@ watch(
|
|||
v-model:citizen-id="formData.citizenId"
|
||||
v-model:citizen-issue="formData.citizenIssue"
|
||||
v-model:citizen-expire="formData.citizenExpire"
|
||||
v-model:contact-name="formData.contactName"
|
||||
v-model:contact-tel="formData.contactTel"
|
||||
class="q-mb-xl"
|
||||
/>
|
||||
<AddressForm
|
||||
|
|
|
|||
|
|
@ -57,7 +57,8 @@ export type User = {
|
|||
citizenIssue?: Date | null;
|
||||
citizenId: string;
|
||||
branch: Branch[];
|
||||
|
||||
contactName?: string;
|
||||
contactTel?: string;
|
||||
remark?: string;
|
||||
agencyStatus?: AgencyStatus;
|
||||
};
|
||||
|
|
@ -108,7 +109,8 @@ export type UserCreate = {
|
|||
citizenExpire?: Date | null;
|
||||
citizenIssue?: Date | null;
|
||||
citizenId: string;
|
||||
|
||||
contactName?: string;
|
||||
contactTel?: string;
|
||||
remark?: string;
|
||||
agencyStatus?: AgencyStatus | string;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue