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

Merge branch 'develop' of frappet.github.com:Frappet/jws-frontend into develop

Browse source
This commit is contained in:
oat_dev 2024-06-11 12:02:31 +07:00
commit 43d8ad28af
8 changed files with 184 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -224,6 +224,7 @@ watch(districtId, fetchSubDistrict);
/>
<q-select
id="select-province-en"
hide-bottom-space
:dense="dense"
:readonly="readonly || sameWithEmployer"
:outlined="readonly ? false : outlined"
@ -246,6 +247,7 @@ watch(districtId, fetchSubDistrict);
/>
<q-select
id="select-district-en"
hide-bottom-space
:dense="dense"
:readonly="readonly || sameWithEmployer"
:outlined="readonly ? false : outlined"
@ -268,6 +270,7 @@ watch(districtId, fetchSubDistrict);
/>
<q-select
id="select-sub-district-en"
hide-bottom-space
:dense="dense"
:readonly="readonly || sameWithEmployer"
:outlined="readonly ? false : outlined"
@ -290,6 +293,7 @@ watch(districtId, fetchSubDistrict);
@update:model-value="(v: string) => selectSubDistrict(v)"
/>
<q-input
hide-bottom-space
for="input-zip-code"
:dense="dense"
:outlined="readonly ? false : outlined"

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>

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

@ -21,8 +21,8 @@ const addrOptions = reactive<{
const passportType = defineModel<string>('passportType');
const passportNumber = defineModel<string>('passportNumber');
const passportIssueDate = defineModel<Date>('passportIssueDate');
const passportExpiryDate = defineModel<Date>('passportExpiryDate');
const passportIssueDate = defineModel<Date | null>('passportIssueDate');
const passportExpiryDate = defineModel<Date | null>('passportExpiryDate');
const passportIssuingCountry = defineModel<string>('passportIssuingCountry');
const passportIssuingPlace = defineModel<string>('passportIssuingPlace');
const previousPassportReference = defineModel<string>(
@ -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>

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

@ -21,12 +21,12 @@ const addrOptions = reactive<{
const visaType = defineModel<string>('visaType');
const visaNumber = defineModel<string>('visaNumber');
const visaIssueDate = defineModel<Date>('visaIssueDate');
const visaExpiryDate = defineModel<Date>('visaExpiryDate');
const visaIssueDate = defineModel<Date | null>('visaIssueDate');
const visaExpiryDate = defineModel<Date | null>('visaExpiryDate');
const visaIssuingPlace = defineModel<string>('visaIssuingPlace');
const visaStayUntilDate = defineModel<Date>('visaStayUntilDate');
const visaStayUntilDate = defineModel<Date | null>('visaStayUntilDate');
const tm6Number = defineModel<string>('tm6Number');
const entryDate = defineModel<Date>('entryDate');
const entryDate = defineModel<Date | null>('entryDate');
defineProps<{
title?: string;
@ -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>

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

@ -108,10 +108,10 @@ const fieldSelectedCustomer = ref<{ label: string; value: string }>({
const formDataEmployeeSameAddr = ref(false);
const formDataEmployeeTab = ref('personalInfo');
const formDataEmployee = ref<EmployeeCreate>({
image: new File([''], 'dummy.jpg'),
customerBranchId: '0b16ee4a-2ff3-40b8-b09d-c7589422d03d',
image: null,
customerBranchId: '',
nrcNo: '',
dateOfBirth: new Date(),
dateOfBirth: null,
gender: '',
nationality: '',
@ -126,20 +126,20 @@ const formDataEmployee = ref<EmployeeCreate>({
passportType: '',
passportNumber: '',
passportIssueDate: new Date(),
passportExpiryDate: new Date(),
passportIssueDate: null,
passportExpiryDate: null,
passportIssuingCountry: '',
passportIssuingPlace: '',
previousPassportReference: '',
visaType: '',
visaNumber: '',
visaIssueDate: new Date(),
visaExpiryDate: new Date(),
visaIssueDate: null,
visaExpiryDate: null,
visaIssuingPlace: '',
visaStayUntilDate: new Date(),
visaStayUntilDate: null,
tm6Number: '',
entryDate: new Date(),
entryDate: null,
workerStatus: '',
subDistrictId: '',
@ -424,18 +424,24 @@ function deleteBranchId(id: string) {
}
async function onSubmit() {
await create({
...formData.value,
customerType: customerType.value === 'CORP' ? 'CORP' : 'PERS',
image: profileSubmit.value ? profileFile.value ?? null : null,
});
clearForm();
const resultList = await fetchList({ includeBranch: true });
if (selectorLabel.value === 'EMPLOYER') {
await create({
...formData.value,
customerType: customerType.value === 'CORP' ? 'CORP' : 'PERS',
image: profileSubmit.value ? profileFile.value ?? null : null,
});
clearForm();
const resultList = await fetchList({ includeBranch: true });
if (resultList) listCustomer.value = resultList.result;
if (resultList) listCustomer.value = resultList.result;
}
if (selectorLabel.value === 'EMPLOYEE') {
await employeeStore.create(formDataEmployee.value);
console.log(profileFile.value);
await employeeStore.create({
...formDataEmployee.value,
image: profileSubmit.value ? profileFile.value ?? null : null,
});
const resultList = await employeeStore.fetchList();
if (resultList) listEmployee.value = resultList.result;
}
@ -891,6 +897,7 @@ watch(fieldSelectedCustomer, async () => {
<PersonCard
:list="
listEmployee.map((v: Employee) => ({
img: v.profileImageUrl,
id: v.id,
name:
$i18n.locale === 'en-US'
@ -1157,9 +1164,9 @@ watch(fieldSelectedCustomer, async () => {
employee
addressSeparator
:noAddress="formDataEmployeeTab !== 'personalInfo'"
v-model:modal="dialogEmployee"
v-model:tabs-list="employeeTab"
v-model:employee-tab="formDataEmployeeTab"
v-model:modal="dialogEmployee"
v-model:same-with-employer="formDataEmployeeSameAddr"
v-model:address="formDataEmployee.address"
v-model:addressEN="formDataEmployee.addressEN"

16
src/stores/employee/index.ts
View file

@ -56,9 +56,8 @@ const useEmployeeStore = defineStore('api-employee', () => {
},
) {
const { image, ...payload } = data;
const res = await api.post<
Employee & { imageUrl: string; imageUploadUrl: string }
Employee & { profileImageUrl: string; profileImageUploadUrl: string }
>('/employee', payload, {
headers: {
'X-Session-Id': flow?.sessionId,
@ -67,12 +66,13 @@ const useEmployeeStore = defineStore('api-employee', () => {
},
});
await axios
.put(res.data.imageUploadUrl, image, {
headers: { 'Content-Type': image.type },
onUploadProgress: (e) => console.log(e),
})
.catch((e) => console.error(e));
image &&
(await axios
.put(res.data.profileImageUploadUrl, image, {
headers: { 'Content-Type': image?.type },
onUploadProgress: (e) => console.log(e),
})
.catch((e) => console.error(e)));
if (!res) return false;

26
src/stores/employee/types.ts
View file

@ -46,14 +46,14 @@ export type Employee = {
};
export type EmployeeCreate = {
image: File;
image: File | null;
customerBranchId: string;
status?: Status;
nrcNo: string;
dateOfBirth: Date;
dateOfBirth: Date | null;
gender: string;
nationality: string;
@ -68,20 +68,20 @@ export type EmployeeCreate = {
passportType: string;
passportNumber: string;
passportIssueDate: Date;
passportExpiryDate: Date;
passportIssueDate: Date | null;
passportExpiryDate: Date | null;
passportIssuingCountry: string;
passportIssuingPlace: string;
previousPassportReference?: string;
visaType: string;
visaNumber: string;
visaIssueDate: Date;
visaExpiryDate: Date;
visaIssueDate: Date | null;
visaExpiryDate: Date | null;
visaIssuingPlace: string;
visaStayUntilDate: Date;
visaStayUntilDate: Date | null;
tm6Number: string;
entryDate: Date;
entryDate: Date | null;
workerStatus: string;
subDistrictId?: string | null;
@ -145,8 +145,8 @@ export type EmployeeCheckup = {
};
export type EmployeeCheckupCreate = {
coverageExpireDate?: Date;
coverageStartDate?: Date;
coverageExpireDate?: Date | null;
coverageStartDate?: Date | null;
insuranceCompany?: string;
medicalBenefitScheme?: string;
remark?: string;
@ -175,9 +175,9 @@ export type EmployeeWork = {
};
export type EmployeeWorkCreate = {
workEndDate?: Date;
workPermitExpireDate?: Date;
workPermitIssuDate?: Date;
workEndDate?: Date | null;
workPermitExpireDate?: Date | null;
workPermitIssuDate?: Date | null;
workPermitNo?: string;
workplace?: string;
jobType?: string;