chamomind/jws-frontend
chamomind/jws-frontend
7
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

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

@ -32,7 +32,9 @@ defineProps<{
outlined?: boolean;
readonly?: boolean;
separator?: boolean;
img?: string;
ocr?: boolean;
hideTitle?: boolean;
prefixId: string;
}>();
@ -86,7 +88,10 @@ watch(
<template>
<div class="row col-12">
<div v-if="!ocr" class="col-12 q-pb-sm text-weight-bold text-body1">
<div
v-if="!ocr && !hideTitle"
class="col-12 q-pb-sm text-weight-bold text-body1"
>
<q-icon
flat
size="xs"
@ -98,151 +103,189 @@ watch(
{{ title }}
</div>
<div class="col-12 row q-col-gutter-sm">
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
input-debounce="0"
option-value="value"
option-label="label"
v-model="passportType"
class="col-12"
:class="{ 'col-md-3': !ocr }"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:options="passportTypeOptions"
:for="`${prefixId}-select-passport-type`"
:label="$t('customerEmployee.form.passportType')"
:rules="[
(val) =>
(val && val.length > 0) ||
$t('form.error.selectField', {
field: $t('customerEmployee.form.passportType'),
}),
]"
@filter="passportTypeFilter"
<div
v-if="!ocr"
class="col-12 row justify-between q-pb-sm text-weight-bold"
>
<div class="app-text-muted">
<slot name="expiryDate" />
</div>
<div>
<slot name="button"></slot>
</div>
</div>
<div class="row q-col-gutter-sm">
<div
v-if="!ocr"
class="col row justify-center q-col-gutter-sml"
style="max-height: 50%"
>
<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-input
:for="`${prefixId}-input-passport-no`"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
:class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
:label="$t('customerEmployee.form.passportNo')"
v-model="passportNumber"
:rules="[(val) => (val && val.length > 0) || $t('form.error.required')]"
/>
<q-input
:for="`${prefixId}-input-passport-ref`"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
:class="{ 'col-12': ocr, 'col-6': !ocr }"
:label="$t('customerEmployee.form.passportRef')"
:model-value="
readonly
? previousPassportReference || '-'
: previousPassportReference
"
@update:model-value="
(v) => (typeof v === 'string' ? (previousPassportReference = v) : '')
"
/>
<q-input
:for="`${prefixId}-input-passport-place`"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
:class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
:label="$t('customerEmployee.form.passportPlace')"
v-model="passportIssuingPlace"
:rules="[(val) => (val && val.length > 0) || $t('form.error.required')]"
/>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
input-debounce="0"
option-value="value"
option-label="label"
:class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
v-model="passportIssuingCountry"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:options="passportIssuingCountryOptions"
:for="`${prefixId}-select-passport-country`"
:label="$t('customerEmployee.form.passportIssuer')"
:rules="[
(val) =>
(val && val.length > 0) ||
$t('form.error.selectField', {
field: $t('customerEmployee.form.passportIssuer'),
}),
]"
@filter="passportIssuingCountryFilter"
<div style="border: 1px dashed">
<q-avatar
square
size="100px"
font-size="50px"
color="grey-4"
text-color="grey"
icon="mdi-image-outline"
/>
</div>
</div>
<div
class="row q-col-gutter-sm"
:class="{ 'col-10': !ocr, 'col-12': ocr }"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
</q-select>
<DatePicker
:id="`${prefixId}-date-picker-passport-issueance`"
:label="$t('customerEmployee.form.passportIssueDate')"
v-model="passportIssueDate"
class="col-6"
:class="{ 'col-md-3': !ocr }"
:readonly="readonly"
:rules="[
(val) =>
(val && val.length > 0) ||
$t('form.error.selectField', {
field: $t('customerEmployee.form.passportIssueDate'),
}),
]"
/>
<DatePicker
:id="`${prefixId}-date-picker-passport-expire`"
:label="$t('customerEmployee.form.passportExpireDate')"
v-model="passportExpiryDate"
class="col-6"
:class="{ 'col-md-3': !ocr }"
:readonly="readonly"
:rules="[
(val) =>
(val && val.length > 0) ||
$t('form.error.selectField', {
field: $t('customerEmployee.form.passportExpireDate'),
}),
]"
/>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
input-debounce="0"
option-value="value"
option-label="label"
v-model="passportType"
:class="{ 'col-12': ocr, 'col-md-3': !ocr }"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:options="passportTypeOptions"
:for="`${prefixId}-select-passport-type`"
:label="$t('customerEmployee.form.passportType')"
:rules="[
(val) =>
(val && val.length > 0) ||
$t('form.error.selectField', {
field: $t('customerEmployee.form.passportType'),
}),
]"
@filter="passportTypeFilter"
>
<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-input
:for="`${prefixId}-input-passport-no`"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
:class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
:label="$t('customerEmployee.form.passportNo')"
v-model="passportNumber"
:rules="[
(val) => (val && val.length > 0) || $t('form.error.required'),
]"
/>
<q-input
:for="`${prefixId}-input-passport-ref`"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
:class="{ 'col-12': ocr, 'col-6': !ocr }"
:label="$t('customerEmployee.form.passportRef')"
:model-value="
readonly
? previousPassportReference || '-'
: previousPassportReference
"
@update:model-value="
(v) =>
typeof v === 'string' ? (previousPassportReference = v) : ''
"
/>
<q-input
:for="`${prefixId}-input-passport-place`"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
:class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
:label="$t('customerEmployee.form.passportPlace')"
v-model="passportIssuingPlace"
:rules="[
(val) => (val && val.length > 0) || $t('form.error.required'),
]"
/>
<q-select
outlined
clearable
use-input
fill-input
emit-value
map-options
hide-selected
hide-bottom-space
input-debounce="0"
option-value="value"
option-label="label"
:class="{ 'col-12': ocr, 'col-6': !ocr, 'col-md-3': !ocr }"
v-model="passportIssuingCountry"
:dense="dense"
:readonly="readonly"
:hide-dropdown-icon="readonly"
:options="passportIssuingCountryOptions"
:for="`${prefixId}-select-passport-country`"
:label="$t('customerEmployee.form.passportIssuer')"
:rules="[
(val) =>
(val && val.length > 0) ||
$t('form.error.selectField', {
field: $t('customerEmployee.form.passportIssuer'),
}),
]"
@filter="passportIssuingCountryFilter"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
{{ $t('general.noData') }}
</q-item-section>
</q-item>
</template>
</q-select>
<DatePicker
:id="`${prefixId}-date-picker-passport-issueance`"
:label="$t('customerEmployee.form.passportIssueDate')"
v-model="passportIssueDate"
class="col-6"
:class="{ 'col-md-3': !ocr }"
:readonly="readonly"
:rules="[
(val) =>
(val && val.length > 0) ||
$t('form.error.selectField', {
field: $t('customerEmployee.form.passportIssueDate'),
}),
]"
/>
<DatePicker
:id="`${prefixId}-date-picker-passport-expire`"
:label="$t('customerEmployee.form.passportExpireDate')"
v-model="passportExpiryDate"
class="col-6"
:class="{ 'col-md-3': !ocr }"
:readonly="readonly"
:rules="[
(val) =>
(val && val.length > 0) ||
$t('form.error.selectField', {
field: $t('customerEmployee.form.passportExpireDate'),
}),
]"
/>
</div>
</div>
</div>
</template>

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'"

122
src/pages/03_customer-management/form.ts
View file

@ -588,6 +588,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
currentEmployeeCode: string;
currentEmployee: Employee | null;
currentIndex: number;
currentIndexPassport: number;
profileUrl: string;
isEmployeeEdit: boolean;
profileSubmit: boolean;
@ -617,6 +618,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
ocr: boolean;
}>({
isImageEdit: false,
currentIndexPassport: -1,
currentIndex: -1,
statusSavePersonal: false,
drawerModal: false,
@ -718,6 +720,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
employeePassport: [
{
id: undefined,
number: '',
type: '',
issueDate: new Date(),
@ -763,6 +766,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
// }
function resetFormDataEmployee(clean = false) {
state.value.currentIndexPassport = -1;
if (clean) {
state.value.currentTab = 'personalInfo';
state.value.formDataEmployeeOwner = undefined;
@ -776,6 +780,58 @@ export const useEmployeeForm = defineStore('form-employee', () => {
currentFromDataEmployee.value = structuredClone(resetEmployeeData);
}
async function submitPassport() {
if (
currentFromDataEmployee.value.employeePassport?.[
state.value.currentIndexPassport
] === undefined
)
return;
if (
currentFromDataEmployee.value.employeePassport?.[
state.value.currentIndexPassport
].id === undefined
) {
const res = await employeeStore.postMeta({
parentId: currentFromDataEmployee.value.id || '',
group: 'passport',
meta: currentFromDataEmployee.value.employeePassport?.[
state.value.currentIndexPassport
],
});
if (res) {
currentFromDataEmployee.value.employeePassport[
state.value.currentIndexPassport
].id = res.id;
}
}
if (
currentFromDataEmployee.value.employeePassport?.[
state.value.currentIndexPassport
].id !== undefined
) {
const { id, ...payload } =
currentFromDataEmployee.value.employeePassport?.[
state.value.currentIndexPassport
];
await employeeStore.putMeta({
parentId: currentFromDataEmployee.value.id || '',
group: 'passport',
metaId:
currentFromDataEmployee.value.employeePassport?.[
state.value.currentIndexPassport
].id || '',
meta: payload,
});
}
await assignFormDataEmployee(currentFromDataEmployee.value.id);
state.value.currentIndexPassport = -1;
}
async function submitOther() {
if (!currentFromDataEmployee.value.employeeOtherInfo) return;
@ -802,6 +858,25 @@ export const useEmployeeForm = defineStore('form-employee', () => {
await assignFormDataEmployee(currentFromDataEmployee.value.id);
}
async function deletePassport() {
const res = await employeeStore.delMeta({
parentId: currentFromDataEmployee.value.id || '',
group: 'passport',
metaId:
currentFromDataEmployee.value.employeePassport?.[
state.value.currentIndexPassport
].id || '',
});
if (res) {
currentFromDataEmployee.value.employeePassport?.splice(
state.value.currentIndexPassport,
1,
);
await assignFormDataEmployee(currentFromDataEmployee.value.id);
}
}
async function deleteWorkHistory() {
if (!currentFromDataEmployee.value.employeeWork) return;
@ -990,6 +1065,22 @@ export const useEmployeeForm = defineStore('form-employee', () => {
provinceId: province?.id || '',
districtId: district?.id || '',
subDistrictId: subDistrict?.id || '',
employeePassport: structuredClone(
payload.employeePassport?.length === 0
? defaultFormData.employeePassport
: payload.employeePassport?.map((item) => ({
id: item.id,
number: item.number,
type: item.type,
issueDate: item.issueDate,
expireDate: item.expireDate,
issueCountry: item.issueCountry,
issuePlace: item.issuePlace,
previousPassportRef: item.previousPassportRef,
})),
),
employeeCheckup: structuredClone(
payload.employeeCheckup?.length === 0
? defaultFormData.employeeCheckup
@ -1029,6 +1120,17 @@ export const useEmployeeForm = defineStore('form-employee', () => {
};
currentFromDataEmployee.value = structuredClone(resetEmployeeData);
state.value.currentIndexPassport =
(currentFromDataEmployee.value.employeePassport?.length || 0) - 1;
if (
currentFromDataEmployee.value.employeePassport?.[
state.value.currentIndexPassport
].id !== undefined
) {
state.value.currentIndexPassport = -1;
}
const foundBranch = await customerStore.fetchListCustomeBranchById(
payload.customerBranchId,
);
@ -1075,16 +1177,36 @@ export const useEmployeeForm = defineStore('form-employee', () => {
});
}
function addPassport() {
currentFromDataEmployee.value.employeePassport?.push({
id: undefined,
number: '',
type: '',
issueDate: new Date(),
expireDate: new Date(),
issueCountry: '',
issuePlace: '',
previousPassportRef: '',
});
state.value.currentIndexPassport =
(currentFromDataEmployee.value.employeePassport?.length || 0) - 1;
}
return {
state,
currentFromDataEmployee,
resetEmployeeData,
addPassport,
submitPassport,
submitOther,
submitWorkHistory,
submitPersonal,
submitHealthCheck,
deletePassport,
deleteWorkHistory,
deleteHealthCheck,