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

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