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

refactor: add tab passport

Browse source
This commit is contained in:
Thanaphon Frappet 2024-10-03 17:35:56 +07:00
parent 6879d0868c
commit e969db16e0
3 changed files with 505 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,7 @@ import { useQuasar } from 'quasar';
import { useRoute, useRouter } from 'vue-router';
import { getUserId, getRole } from 'src/services/keycloak';
import { baseUrl, waitAll } from 'src/stores/utils';
import { dateFormat } from 'src/utils/datetime';
import useOcrStore from 'stores/ocr';
import useCustomerStore from 'stores/customer';
@ -473,7 +474,7 @@ async function toggleStatusCustomer(id: string, status: boolean) {
async function deleteEmployeeById(opts: {
id?: string;
type?: 'healthCheck' | 'work';
type?: 'passport' | 'healthCheck' | 'work';
}) {
dialog({
color: 'negative',
@ -483,6 +484,10 @@ async function deleteEmployeeById(opts: {
persistent: true,
message: t('dialog.message.confirmDelete'),
action: async () => {
if (opts.type === 'passport') {
await employeeFormStore.deletePassport();
}
if (opts.type === 'healthCheck') {
await employeeFormStore.deleteHealthCheck();
}
@ -1286,6 +1291,25 @@ const emptyCreateDialog = ref(false);
</q-tooltip>
</q-td>
<q-td v-if="fieldSelected.includes('address')">
{{
locale === 'eng'
? `${props.row.branch[0].addressEN}, ${props.row.branch[0].mooEN && `${$t('form.moo')} ${props.row.branch[0].mooEN},`} ${props.row.branch[0].soiEN && `${$t('form.soi')} ${props.row.branch[0].soiEN},`} ${props.row.branch[0].moo && `${props.row.branch[0].streetEN} Rd,`} ${props.row.branch[0].subDistrict.nameEN}, ${props.row.branch[0].district.nameEN}, ${props.row.branch[0].province.nameEN} ${props.row.branch[0].subDistrict.zipCode}` ||
'-'
: `${props.row.branch[0].address}, ${props.row.branch[0].moo && `${$t('form.moo')} ${props.row.branch[0].moo},`} ${props.row.branch[0].soi && `${$t('form.soi')} ${props.row.branch[0].soi},`} ${props.row.branch[0].street && `${$t('form.road')} ${props.row.branch[0].street},`} ${props.row.branch[0].subDistrict.name}, ${props.row.branch[0].district.name}, ${props.row.branch[0].province.name} ${props.row.branch[0].subDistrict.zipCode}` ||
'-'
}}
<q-tooltip>
{{
locale === 'eng'
? `${props.row.branch[0].addressEN}, ${props.row.branch[0].mooEN && `${$t('form.moo')} ${props.row.branch[0].mooEN},`} ${props.row.branch[0].soiEN && `${$t('form.soi')} ${props.row.branch[0].soiEN},`} ${props.row.branch[0].moo && `${props.row.branch[0].streetEN} Rd,`} ${props.row.branch[0].subDistrict.nameEN}, ${props.row.branch[0].district.nameEN}, ${props.row.branch[0].province.nameEN} ${props.row.branch[0].subDistrict.zipCode}` ||
'-'
: `${props.row.branch[0].address}, ${props.row.branch[0].moo && `${$t('form.moo')} ${props.row.branch[0].moo},`} ${props.row.branch[0].soi && `${$t('form.soi')} ${props.row.branch[0].soi},`} ${props.row.branch[0].street && `${$t('form.road')} ${props.row.branch[0].street},`} ${props.row.branch[0].subDistrict.name}, ${props.row.branch[0].district.name}, ${props.row.branch[0].province.name} ${props.row.branch[0].subDistrict.zipCode}` ||
'-'
}}
</q-tooltip>
</q-td>
<q-td v-if="fieldSelected.includes('contactName')">
{{ props.row.branch[0]?.contactName || '-' }}
</q-td>
@ -3537,6 +3561,11 @@ const emptyCreateDialog = ref(false);
employeeFormState.dialogType = 'info';
employeeFormState.isEmployeeEdit = false;
}
if (employeeFormState.currentTab === 'passport') {
await employeeFormStore.submitPassport();
}
if (employeeFormState.currentTab === 'healthCheck') {
await employeeFormStore.submitHealthCheck();
}
@ -3619,6 +3648,10 @@ const emptyCreateDialog = ref(false);
name: 'personalInfo',
label: 'customerEmployee.form.group.personalInfo',
},
{
name: 'passport',
label: 'customerEmployee.fileType.passport',
},
{
name: 'healthCheck',
label: 'customerEmployee.form.group.healthCheck',
@ -3669,6 +3702,31 @@ const emptyCreateDialog = ref(false);
anchor: 'drawer-upload-file',
tab: 'personalInfo',
},
{
name: $t('customerEmployee.form.group.passport'),
anchor: 'drawer-passport',
tab: 'passport',
useBtn:
currentFromDataEmployee.employeePassport?.filter(
(item) => {
if (item.id === undefined) {
return true;
}
return false;
},
).length === 0 &&
employeeFormState.currentIndexPassport === -1
? true
: false,
},
...(currentFromDataEmployee.employeePassport?.map(
(v, i) => ({
name: dateFormat(v.expireDate),
anchor: `drawer-employee-employeePassport-${i}`,
tab: 'passport',
sub: true,
}),
) || []),
...(currentFromDataEmployee.employeeCheckup?.map(
(v, i) => ({
@ -3695,7 +3753,20 @@ const emptyCreateDialog = ref(false);
foreground: 'var(--blue-6)',
}"
scroll-element="#drawer-employee-form-content"
/>
>
<template v-slot:btn-drawer-passport>
<q-btn
dense
flat
icon="mdi-plus"
size="sm"
rounded
padding="0px 0px"
style="color: var(--stone-9)"
@click.stop="employeeFormStore.addPassport()"
/>
</template>
</SideMenu>
</div>
</div>
<div
@ -4010,7 +4081,7 @@ const emptyCreateDialog = ref(false);
v-model:passport-expiry-date="meta.expireDate"
v-model:passport-issuing-place="meta.issuePlace"
v-model:passport-issuing-country="meta.issueCountry"
/>
></FormEmployeePassport>
<FormEmployeeVisa
v-if="mode === 'visa' && meta"
prefix-id="drawer-info-employee"
@ -4031,6 +4102,128 @@ const emptyCreateDialog = ref(false);
</template>
</UploadFileGroup>
</template>
<template v-if="employeeFormState.currentTab === 'passport'">
<div class="q-gutter-sm">
<div class="col-12 q-pb-sm text-weight-bold text-body1">
<q-icon
flat
size="xs"
class="q-pa-sm rounded q-mr-xs"
color="info"
name="mdi-passport"
style="background-color: var(--surface-3)"
/>
{{ $t('customerEmployee.form.group.passport') }}
</div>
<FormEmployeePassport
v-for="(
value, index
) in currentFromDataEmployee.employeePassport"
prefix-id="drawer-info-employee"
:key="index"
id="form-passport"
hide-title
dense
outlined
separator
:title="$t('customerEmployee.form.group.passport')"
:readonly="employeeFormState.currentIndexPassport !== index"
v-model:passport-type="value.type"
v-model:passport-number="value.number"
v-model:passport-issue-date="value.issueDate"
v-model:passport-expiry-date="value.expireDate"
v-model:passport-issuing-place="value.issuePlace"
v-model:passport-issuing-country="value.issueCountry"
>
<template v-slot:expiryDate>
{{ $t('general.expirationDate') }} :
{{ dateFormat(value.expireDate) }}
</template>
<template v-slot:button>
<div class="surface-1 row rounded" style="min-height: 35px">
<UndoButton
v-if="
employeeFormState.isEmployeeEdit &&
!(employeeFormState.currentIndexPassport === -1) &&
employeeFormState.currentIndexPassport === index
"
id="btn-info-basic-undo"
icon-only
@click="
() => {
employeeFormStore.resetFormDataEmployee();
employeeFormState.isEmployeeEdit = false;
employeeFormState.dialogType = 'info';
employeeFormState.currentIndexPassport = -1;
}
"
type="button"
/>
<SaveButton
v-if="
(employeeFormState.isEmployeeEdit ||
value.id === undefined) &&
!(employeeFormState.currentIndexPassport === -1) &&
employeeFormState.currentIndexPassport === index
"
id="btn-info-basic-save"
icon-only
@click="
() => {
employeeFormState.currentIndexPassport = index;
}
"
type="submit"
/>
<EditButton
v-if="
employeeFormState.currentIndexPassport === -1 ||
(!employeeFormState.isEmployeeEdit &&
value.id !== undefined &&
employeeFormState.currentIndexPassport === index)
"
id="btn-info-basic-edit"
icon-only
@click="
() => {
employeeFormState.currentIndexPassport = index;
employeeFormState.isEmployeeEdit = true;
employeeFormState.dialogType = 'edit';
}
"
type="button"
/>
<DeleteButton
v-if="
employeeFormState.currentIndexPassport === -1 ||
(!employeeFormState.isEmployeeEdit &&
value.id !== undefined &&
!(employeeFormState.currentIndexPassport === -1) &&
employeeFormState.currentIndexPassport === index)
"
id="btn-info-basic-delete"
icon-only
@click.stop="
() => {
employeeFormState.currentIndexPassport = index;
deleteEmployeeById({ type: 'passport' });
}
"
type="button"
:disabled="
!(employeeFormState.currentIndex === -1) &&
!(employeeFormState.currentIndex === index)
"
/>
</div>
</template>
</FormEmployeePassport>
</div>
</template>
<template v-if="employeeFormState.currentTab === 'healthCheck'">
<FormEmployeeHealthCheck
v-if="employeeFormState.currentTab === 'healthCheck'"