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

refactor: 03 Employee => enhance responsive layout for employee management forms

Browse source
This commit is contained in:
puriphatt 2025-01-27 15:43:05 +07:00
parent a4bc6e4884
commit debfa874f3
8 changed files with 210 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -406,7 +406,7 @@ watch(
outlined
readonly
:label="$t('personnel.age')"
class="col-md-2 col-12"
class="col-md-2 col-6"
:model-value="
birthDate?.toString() === 'Invalid Date' ||
birthDate?.toString() === undefined
@ -470,7 +470,7 @@ watch(
input-debounce="0"
option-label="label"
option-value="value"
class="col-2"
class="col-md-2 col-6"
:dense="dense"
v-model="gender"
:readonly="readonly"
@ -504,7 +504,7 @@ watch(
option-label="label"
option-value="value"
v-model="nationality"
class="col-2"
class="col-md-2 col-6"
:dense="dense"
:readonly="readonly"
:options="nationalityOptions"

4
src/components/03_customer-management/FormEmployeeHealthCheck.vue
View file

@ -266,7 +266,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
:for="`${prefixId}-input-hospital`"
/>
<div class="col">
<div class="col-md col-6">
<DatePicker
v-model="checkup.coverageStartDate"
:id="`${prefixId}-input-coverage-start-date`"
@ -301,7 +301,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
map-options
hide-selected
hide-bottom-space
class="col-6"
class="col-md-6 col-12"
input-debounce="0"
option-value="value"
option-label="label"

4
src/components/03_customer-management/FormEmployeeOther.vue
View file

@ -79,7 +79,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
:readonly="readonly || employeeOther.statusSave"
hide-bottom-space
:label="$t('customerEmployee.formFamily.citizenId')"
class="col-4"
class="col-md-4 col-12"
v-model="employeeOther.citizenId"
/>
@ -90,7 +90,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
:readonly="readonly || employeeOther.statusSave"
hide-bottom-space
:label="$t('customerEmployee.formFamily.telephoneNo')"
class="col-3"
class="col-md-3 col-12"
v-model="employeeOther.telephoneNo"
/>
</div>

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

@ -220,7 +220,7 @@ watch(
</div>
</div>
<div class="row q-col-gutter-sm">
<div class="q-col-gutter-sm" :class="{ row: $q.screen.gt.sm }">
<div
class="col row justify-center q-col-gutter-sml"
style="max-height: 50%"
@ -252,7 +252,7 @@ watch(
input-debounce="0"
option-value="value"
option-label="label"
class="col-6"
class="col-md-6 col-12"
:dense="dense"
:readonly="readonly"
:options="workerStatusOptions"
@ -283,7 +283,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-6"
class="col-md-6 col-12"
:label="$t('customerEmployee.form.previousPassportNumber')"
v-model="previousPassportRef"
:rules="[
@ -306,7 +306,7 @@ watch(
option-label="label"
option-value="value"
hide-dropdown-icon
class="col-2"
class="col-md-2 col-6"
:dense="dense"
:readonly="readonly"
:options="prefixNameOptions"
@ -334,7 +334,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col"
class="col-md col-6"
:label="$t('form.firstName')"
:model-value="readonly ? firstName || '-' : firstName"
@update:model-value="
@ -388,7 +388,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-4"
class="col-md-4 col-6"
:label="$t('form.firstNameEN')"
:model-value="readonly ? firstNameEN || '-' : firstNameEN"
@update:model-value="
@ -405,7 +405,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-4"
class="col-md-4 col-6"
:label="$t('form.middleNameEN')"
:model-value="readonly ? middleNameEN || '-' : middleNameEN"
@update:model-value="
@ -419,7 +419,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-4"
class="col-md-4 col-6"
:label="$t('form.lastNameEN')"
:model-value="readonly ? lastNameEN || '-' : lastNameEN"
@update:model-value="
@ -453,7 +453,7 @@ watch(
input-debounce="0"
option-label="label"
option-value="value"
class="col-2"
class="col-md-2 col-4"
dense
:readonly="readonly"
:options="genderOptions"
@ -482,7 +482,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-6 col-md-3"
class="col-8 col-md-3"
:label="$t('customerEmployee.form.passportNo')"
v-model="passportNumber"
:rules="[
@ -494,7 +494,7 @@ watch(
<DatePicker
v-model="birthDate"
class="col-2"
class="col-md-2 col-6"
:id="`${prefixId}-input-birth-date`"
:readonly="readonly"
:label="$t('form.birthDate')"
@ -513,7 +513,7 @@ watch(
outlined
readonly
:label="$t('personnel.age')"
class="col-2"
class="col-md-2 col-6"
:model-value="
birthDate?.toString() === 'Invalid Date' ||
birthDate?.toString() === undefined
@ -534,7 +534,7 @@ watch(
input-debounce="0"
option-value="value"
option-label="label"
class="col"
class="col-md col-6"
:dense="dense"
:readonly="readonly"
:options="nationalityOptions"
@ -567,7 +567,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-4"
class="col-md-4 col-6"
:label="$t('customerEmployee.form.placeOfBirth')"
:model-value="optionStore.mapOption(birthCountry || '')"
@update:model-value="
@ -621,7 +621,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-4"
class="col-md-4 col-6"
:label="$t('customerEmployee.form.passportPlace')"
:model-value="
readonly

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

@ -147,8 +147,13 @@ watch(
<slot name="button"></slot>
</div>
</div>
<div class="row">
<div v-if="!ocr" class="col row justify-center" style="max-height: 50%">
<div :class="{ row: $q.screen.gt.sm }">
<div
v-if="!ocr"
class="col row justify-center"
:class="{ 'q-mb-md': $q.screen.lt.md }"
style="max-height: 50%"
>
<q-avatar
style="border: 1px dashed; border-color: black"
square
@ -175,7 +180,7 @@ watch(
input-debounce="0"
option-value="value"
option-label="label"
:class="{ 'col-4': !ocr, 'col-6': ocr }"
:class="{ 'col-md-4 col-6': !ocr, 'col-6': ocr }"
:dense="dense"
:readonly="readonly"
:options="workerTypeOptions"
@ -207,7 +212,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
:class="{ 'col-4': !ocr, 'col-6': ocr }"
:class="{ 'col-md-4 col-6': !ocr, 'col-6': ocr }"
:label="$t('customerEmployee.form.visaNo')"
:model-value="readonly ? number || '-' : number"
@update:model-value="
@ -221,7 +226,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
:class="{ 'col-4': !ocr, 'col-6': ocr }"
:class="{ 'col-md-4 col-12': !ocr, 'col-6': ocr }"
:label="$t('customerEmployee.form.visaPlace')"
:model-value="readonly ? issuePlace || '-' : issuePlace"
@update:model-value="
@ -280,7 +285,7 @@ watch(
input-debounce="0"
option-value="value"
option-label="label"
:class="{ 'col-4': !ocr, 'col-6': ocr }"
:class="{ 'col-md-4 col-6': !ocr, 'col-6': ocr }"
:dense="dense"
:readonly="readonly"
:options="visaTypeOptions"
@ -303,7 +308,7 @@ watch(
</template>
</q-select>
<div class="col">
<div class="col-md col-6">
<DatePicker
:id="`${prefixId}-date-picker-visa-issuance`"
:readonly="readonly"
@ -362,7 +367,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-4"
class="col-md-4 col-12"
:label="$t('customerEmployee.form.arrivalCardNo')"
:model-value="readonly ? arrivalTMNo || '-' : arrivalTMNo"
@update:model-value="
@ -374,7 +379,7 @@ watch(
/>
<DatePicker
class="col-4"
class="col-md-4 col-12"
:id="`${prefixId}-date-picker-visa-enter`"
:readonly="readonly"
:label="$t('customerEmployee.form.visaEnter')"
@ -391,7 +396,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-4"
class="col-md-4 col-12"
:label="$t('customerEmployee.form.visaCheckpoint')"
:model-value="readonly ? arrivalAt || '-' : arrivalAt"
@update:model-value="
@ -414,7 +419,7 @@ watch(
input-debounce="0"
option-value="value"
option-label="label"
class="col-4"
class="col-md-4 col-6"
:dense="dense"
:readonly="readonly"
:options="visaTypeOptions"
@ -446,7 +451,7 @@ watch(
outlined
:readonly="readonly"
hide-bottom-space
class="col-4"
class="col-md-4 col-6"
:label="$t('customerEmployee.form.entryCount')"
v-model="entryCount"
type="number"

10
src/components/03_customer-management/FormEmployeeWorkHistory.vue
View file

@ -237,7 +237,7 @@ const workplaceFilter = selectFilterOptionRefMod(
outlined
:readonly="readonly || work.statusSave"
hide-bottom-space
class="col-4"
class="col-md-4 col-12"
:label="$t('customerEmployee.formWorkHistory.identityNo')"
v-model="work.identityNo"
mask="#############"
@ -256,7 +256,7 @@ const workplaceFilter = selectFilterOptionRefMod(
outlined
:readonly="readonly || work.statusSave"
hide-bottom-space
class="col-4"
class="col-md-4 col-6"
:label="$t('customerEmployee.formWorkHistory.permitNo')"
v-model="work.workPermitNo"
/>
@ -266,7 +266,7 @@ const workplaceFilter = selectFilterOptionRefMod(
outlined
:readonly="readonly || work.statusSave"
hide-bottom-space
class="col-4"
class="col-md-4 col-6"
:label="$t('customerEmployee.formWorkHistory.permitIssuedAt')"
v-model="work.workPermitIssueAt"
/>
@ -274,7 +274,7 @@ const workplaceFilter = selectFilterOptionRefMod(
<DatePicker
:label="$t('customerEmployee.formWorkHistory.permitIssueDate')"
v-model="work.workPermitIssueDate"
class="col-3"
class="col-md-3 col-6"
:id="`${prefixId}-date-picker-work-permit-issue-date`"
:readonly="readonly || work.statusSave"
clearable
@ -282,7 +282,7 @@ const workplaceFilter = selectFilterOptionRefMod(
<DatePicker
:label="$t('customerEmployee.formWorkHistory.permitExpireDate')"
v-model="work.workPermitExpireDate"
class="col-3"
class="col-md-3 col-6"
:id="`${prefixId}-date-picker-work-permit-expire-date`"
:readonly="readonly || work.statusSave"
:disabled-dates="

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

@ -289,7 +289,7 @@ defineEmits<{
hide-bottom-space
:readonly="readonly"
:disable="!readonly"
class="col-3"
class="col-md-3 col-12"
:label="$t('customerEmployee.form.employeeCode')"
v-model="code"
/>
@ -301,7 +301,7 @@ defineEmits<{
outlined
hide-bottom-space
:readonly="readonly"
class="col-6"
class="col-md-6 col-12"
:label="$t('customerEmployee.form.nrcNo')"
:model-value="nrcNo"
@update:model-value="(v) => (typeof v === 'string' ? (nrcNo = v) : '')"

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

@ -86,6 +86,7 @@ import { nextTick } from 'vue';
import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
import { group } from 'node:console';
import PaginationPageSize from 'src/components/PaginationPageSize.vue';
import { AddButton } from 'components/button';
const { t, locale } = useI18n();
const $q = useQuasar();
@ -2720,7 +2721,7 @@ const emptyCreateDialog = ref(false);
class="col-12 col-md-10"
:class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm,
'q-pa-sm': !$q.screen.gt.sm,
}"
id="employee-form-content"
style="height: 100%; max-height: 100; overflow-y: auto"
@ -3205,7 +3206,9 @@ const emptyCreateDialog = ref(false);
<template v-if="employeeFormState.currentTab === 'passport'">
<div class="q-gutter-sm">
<div class="col-12 q-pb-sm text-weight-bold text-body1">
<div
class="col-12 q-pb-sm text-weight-bold text-body1 row items-center"
>
<q-icon
flat
size="xs"
@ -3215,6 +3218,24 @@ const emptyCreateDialog = ref(false);
style="background-color: var(--surface-3)"
/>
{{ $t('customerEmployee.form.group.passport') }}
<AddButton
v-if="$q.screen.lt.md"
id="btn-add-work"
icon-only
class="q-ml-sm"
:disabled="
currentFromDataEmployee.employeePassport?.filter((item) => {
if (item.id === undefined) {
return false;
}
return true;
}).length === 0 &&
employeeFormState.currentIndexPassport === -1
? false
: true
"
@click.stop="employeeFormStore.addPassport()"
/>
</div>
<FormEmployeePassport
@ -3345,7 +3366,9 @@ const emptyCreateDialog = ref(false);
<template v-if="employeeFormState.currentTab === 'visa'">
<div class="q-gutter-sm">
<div class="col-12 q-pb-sm text-weight-bold text-body1">
<div
class="col-12 q-pb-sm text-weight-bold text-body1 row items-center"
>
<q-icon
flat
size="xs"
@ -3355,6 +3378,23 @@ const emptyCreateDialog = ref(false);
style="background-color: var(--surface-3)"
/>
{{ $t('customerEmployee.form.group.visa') }}
<AddButton
v-if="$q.screen.lt.md"
id="btn-add-work"
icon-only
class="q-ml-sm"
:disabled="
currentFromDataEmployee.employeeVisa?.filter((item) => {
if (item.id === undefined) {
return false;
}
return true;
}).length === 0 && employeeFormState.currentIndexVisa === -1
? false
: true
"
@click.stop="employeeFormStore.addVisa()"
/>
</div>
<FormEmployeeVisa
@ -3488,6 +3528,24 @@ const emptyCreateDialog = ref(false);
/>
{{ $t(`customerEmployee.formHealthCheck.title`) }}
<AddButton
v-if="$q.screen.lt.md"
id="btn-add-work"
icon-only
class="q-ml-sm"
:disabled="
currentFromDataEmployee.employeeCheckup?.filter((item) => {
if (item.id === undefined) {
return false;
}
return true;
}).length === 0 &&
employeeFormState.currentIndexCheckup === -1
? false
: true
"
@click.stop="employeeFormStore.addCheckup()"
/>
</div>
<FormEmployeeHealthCheck
v-if="employeeFormState.currentTab === 'healthCheck'"
@ -3565,6 +3623,24 @@ const emptyCreateDialog = ref(false);
style="background-color: var(--surface-3)"
/>
{{ $t(`customerEmployee.form.group.workHistory`) }}
<AddButton
v-if="$q.screen.lt.md"
id="btn-add-work"
icon-only
class="q-ml-sm"
:disabled="
currentFromDataEmployee.employeeWork?.filter((item) => {
if (item.id === undefined) {
return false;
}
return true;
}).length === 0 &&
employeeFormState.currentIndexWorkHistory === -1
? false
: true
"
@click.stop="employeeFormStore.addWorkHistory()"
/>
</div>
<FormEmployeeWorkHistory
v-if="employeeFormState.currentTab === 'workHistory'"
@ -4397,7 +4473,7 @@ const emptyCreateDialog = ref(false);
}"
>
<div
class="col bg-red surface-1 rounded bordered row"
class="col full-width surface-1 rounded bordered row"
:key="String(!employeeFormState.isEmployeeEdit)"
>
<div class="col full-height scroll" v-if="$q.screen.gt.sm">
@ -4597,7 +4673,7 @@ const emptyCreateDialog = ref(false);
class="col-12 col-md-10 row"
:class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm,
'q-pa-sm': !$q.screen.gt.sm,
}"
id="drawer-employee-form-content"
style="height: 100%; overflow-y: auto"
@ -5097,7 +5173,9 @@ const emptyCreateDialog = ref(false);
<template v-if="employeeFormState.currentTab === 'passport'">
<div class="q-gutter-sm full-width column no-wrap">
<div class="q-pb-sm text-weight-bold text-body1">
<div
class="q-pb-sm text-weight-bold text-body1 row items-center"
>
<q-icon
flat
size="xs"
@ -5107,6 +5185,26 @@ const emptyCreateDialog = ref(false);
style="background-color: var(--surface-3)"
/>
{{ $t('customerEmployee.form.group.passport') }}
<AddButton
v-if="$q.screen.lt.md"
id="btn-add-work"
icon-only
class="q-ml-sm"
:disabled="
currentFromDataEmployee.employeePassport?.filter(
(item) => {
if (item.id === undefined) {
return false;
}
return true;
},
).length === 0 &&
employeeFormState.currentIndexPassport === -1
? false
: true
"
@click.stop="employeeFormStore.addPassport()"
/>
</div>
<div class="col self-center">
@ -5278,7 +5376,9 @@ const emptyCreateDialog = ref(false);
<template v-if="employeeFormState.currentTab === 'visa'">
<div class="q-gutter-sm full-width column no-wrap">
<div class="q-pb-sm text-weight-bold text-body1">
<div
class="q-pb-sm text-weight-bold text-body1 row items-center"
>
<q-icon
flat
size="xs"
@ -5288,6 +5388,24 @@ const emptyCreateDialog = ref(false);
style="background-color: var(--surface-3)"
/>
{{ $t('customerEmployee.form.group.visa') }}
<AddButton
v-if="$q.screen.lt.md"
id="btn-add-work"
icon-only
class="q-ml-sm"
:disabled="
currentFromDataEmployee.employeeVisa?.filter((item) => {
if (item.id === undefined) {
return false;
}
return true;
}).length === 0 &&
employeeFormState.currentIndexVisa === -1
? false
: true
"
@click.stop="employeeFormStore.addVisa()"
/>
</div>
<div class="col self-center">
<div
@ -5423,7 +5541,7 @@ const emptyCreateDialog = ref(false);
<template v-if="employeeFormState.currentTab === 'healthCheck'">
<div class="q-gutter-sm full-width column">
<div
class="q-pb-sm text-weight-bold text-body1 row items-center"
class="q-pb-sm text-weight-bold text-body1 row items-center row items-center"
>
<q-icon
flat
@ -5435,6 +5553,26 @@ const emptyCreateDialog = ref(false);
/>
{{ $t(`customerEmployee.formHealthCheck.title`) }}
<AddButton
v-if="$q.screen.lt.md"
id="btn-add-work"
icon-only
class="q-ml-sm"
:disabled="
currentFromDataEmployee.employeeCheckup?.filter(
(item) => {
if (item.id === undefined) {
return false;
}
return true;
},
).length === 0 &&
employeeFormState.currentIndexCheckup === -1
? false
: true
"
@click.stop="employeeFormStore.addCheckup()"
/>
</div>
<div class="col self-center">
@ -5526,6 +5664,24 @@ const emptyCreateDialog = ref(false);
style="background-color: var(--surface-3)"
/>
{{ $t(`customerEmployee.form.group.workHistory`) }}
<AddButton
v-if="$q.screen.lt.md"
id="btn-add-work"
icon-only
class="q-ml-sm"
:disabled="
currentFromDataEmployee.employeeWork?.filter((item) => {
if (item.id === undefined) {
return false;
}
return true;
}).length === 0 &&
employeeFormState.currentIndexWorkHistory === -1
? false
: true
"
@click.stop="employeeFormStore.addWorkHistory()"
/>
</div>
<div class="col self-center">