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

fix(03): employee responsive

Browse source
This commit is contained in:
puriphatt 2024-07-25 10:48:04 +00:00
parent 3790dcb271
commit 305d1f2e2b
4 changed files with 61 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -84,36 +84,35 @@ onMounted(async () => {
</script> </script>
<template> <template>
<div class="full-height full-width"> <div class="full-height full-width column">
<div class="bordered-b"> <div class="bordered-b full-width row no-wrap">
<q-btn
@click="addData"
flat
class="app-text-muted"
style="background-color: var(--_body-bg); min-width: 40px"
icon="mdi-plus"
padding="8px 8px"
:disable="readonly"
:color="$q.dark.isActive ? 'primary' : ''"
:class="tab !== 'tab0' ? 'bordered-r' : ''"
/>
<q-tabs <q-tabs
inline-label inline-label
mobile-arrows mobile-arrows
v-model="tab" v-model="tab"
dense dense
class="text-grey full-width" class="text-grey col"
active-class="active-tab" active-class="active-tab"
indicator-color="transparent" indicator-color="transparent"
align="left" align="left"
:breakpoint="0" :breakpoint="0"
> >
<q-btn
@click="addData"
flat
class="app-text-muted"
style="background-color: var(--_body-bg)"
icon="mdi-plus"
padding="8px 8px"
:disable="readonly"
:color="$q.dark.isActive ? 'primary' : ''"
:class="tab !== 'tab0' ? 'bordered-r' : ''"
/>
<q-tab <q-tab
v-for="(tab, index) in employeeCheckup" v-for="(tab, index) in employeeCheckup"
v-bind:key="index" v-bind:key="index"
:name="`tab${index}`" :name="`tab${index}`"
class="content-tab text-capitalize" class="content-tab text-capitalize"
style="z-index: 999"
> >
<div class="text-weight-medium row items-center no-wrap"> <div class="text-weight-medium row items-center no-wrap">
{{ $t('formDialogTabCheckup') + (index + 1) }} {{ $t('formDialogTabCheckup') + (index + 1) }}

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

@ -18,8 +18,8 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
</div> </div>
<div class="col-12 row q-col-gutter-y-md"> <div class="col-12 row q-col-gutter-y-md">
<div class="col-3 q-pl-xl"></div> <div v-if="$q.screen.gt.sm" class="col-3 q-pl-xl"></div>
<div class="col-9 row q-col-gutter-md"> <div class="col-md-9 col-12 row q-col-gutter-md">
<q-input <q-input
:for="`${prefixId}-input-citizen-id`" :for="`${prefixId}-input-citizen-id`"
:dense="dense" :dense="dense"
@ -32,17 +32,20 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
lazy-rules lazy-rules
/> />
</div> </div>
<div class="col-3 q-pl-xl app-text-muted"> <div
class="col-md-3 col-12 app-text-muted"
:class="{ 'q-pl-xl': $q.screen.gt.sm }"
>
{{ $t('formDialogTitleFamilyHistoryDad') }} {{ $t('formDialogTitleFamilyHistoryDad') }}
</div> </div>
<div class="col-9 row q-col-gutter-md"> <div class="col-md-9 col-12 row q-col-gutter-md">
<q-input <q-input
:for="`${prefixId}-input-father-first-name`" :for="`${prefixId}-input-father-first-name`"
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-3" class="col-md-3 col-6"
:label="$t('formDialogInputFirstName')" :label="$t('formDialogInputFirstName')"
v-model="employeeOther.fatherFirstName" v-model="employeeOther.fatherFirstName"
/> />
@ -52,7 +55,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-3" class="col-md-3 col-6"
:label="$t('formDialogInputLastName')" :label="$t('formDialogInputLastName')"
v-model="employeeOther.fatherLastName" v-model="employeeOther.fatherLastName"
/> />
@ -62,7 +65,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-3" class="col-md-3 col-6"
:label="$t('formDialogInputFirstNameEN')" :label="$t('formDialogInputFirstNameEN')"
v-model="employeeOther.fatherFirstNameEN" v-model="employeeOther.fatherFirstNameEN"
/> />
@ -72,7 +75,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-3" class="col-md-3 col-6"
:label="$t('formDialogInputLastNameEN')" :label="$t('formDialogInputLastNameEN')"
v-model="employeeOther.fatherLastNameEN" v-model="employeeOther.fatherLastNameEN"
/> />
@ -88,17 +91,20 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
/> />
</div> </div>
<div class="col-12" /> <div class="col-12" />
<div class="col-3 q-pl-xl app-text-muted"> <div
class="col-md-3 col-12 app-text-muted"
:class="{ 'q-pl-xl': $q.screen.gt.sm }"
>
{{ $t('formDialogTitleFamilyHistoryMom') }} {{ $t('formDialogTitleFamilyHistoryMom') }}
</div> </div>
<div class="col-9 row q-col-gutter-md"> <div class="col-md-9 col-12 row q-col-gutter-md">
<q-input <q-input
:for="`${prefixId}-input-mother-first-name`" :for="`${prefixId}-input-mother-first-name`"
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-3" class="col-md-3 col-6"
:label="$t('formDialogInputFirstName')" :label="$t('formDialogInputFirstName')"
v-model="employeeOther.motherFirstName" v-model="employeeOther.motherFirstName"
/> />
@ -108,7 +114,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-3" class="col-md-3 col-6"
:label="$t('formDialogInputLastName')" :label="$t('formDialogInputLastName')"
v-model="employeeOther.motherLastName" v-model="employeeOther.motherLastName"
/> />
@ -118,7 +124,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-3" class="col-md-3 col-6"
:label="$t('formDialogInputFirstNameEN')" :label="$t('formDialogInputFirstNameEN')"
v-model="employeeOther.motherFirstNameEN" v-model="employeeOther.motherFirstNameEN"
/> />
@ -128,7 +134,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-3" class="col-md-3 col-6"
:label="$t('formDialogInputLastNameEN')" :label="$t('formDialogInputLastNameEN')"
v-model="employeeOther.motherLastNameEN" v-model="employeeOther.motherLastNameEN"
/> />

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

@ -6,8 +6,12 @@ const { locale } = useI18n();
const passportType = defineModel<string>('passportType'); const passportType = defineModel<string>('passportType');
const passportNumber = defineModel<string>('passportNumber'); const passportNumber = defineModel<string>('passportNumber');
const passportIssueDate = defineModel<Date | null>('passportIssueDate'); const passportIssueDate = defineModel<Date | null | string>(
const passportExpiryDate = defineModel<Date | null>('passportExpiryDate'); 'passportIssueDate',
);
const passportExpiryDate = defineModel<Date | null | string>(
'passportExpiryDate',
);
const passportIssuingCountry = defineModel<string>('passportIssuingCountry'); const passportIssuingCountry = defineModel<string>('passportIssuingCountry');
const passportIssuingPlace = defineModel<string>('passportIssuingPlace'); const passportIssuingPlace = defineModel<string>('passportIssuingPlace');
const previousPassportReference = defineModel<string>( const previousPassportReference = defineModel<string>(

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

@ -57,36 +57,37 @@ onMounted(async () => {
</script> </script>
<template> <template>
<div> <div class="full-height full-width column">
<div class="bordered-b full-width"> <div class="bordered-b full-width row no-wrap">
<q-btn
@click="addData"
flat
class="app-text-muted"
style="background-color: var(--_body-bg); min-width: 40px"
icon="mdi-plus"
padding="8px 8px"
:disable="readonly"
:color="$q.dark.isActive ? 'primary' : ''"
:class="tab !== 'tab0' ? 'bordered-r' : ''"
/>
<q-tabs <q-tabs
inline-label
mobile-arrows
v-model="tab" v-model="tab"
dense dense
class="text-grey" class="text-grey col"
active-class="active-tab" active-class="active-tab"
indicator-color="transparent" indicator-color="transparent"
align="left" align="left"
:breakpoint="0" :breakpoint="0"
> >
<q-btn
@click="addData"
flat
class="app-text-muted"
style="background-color: var(--_body-bg)"
icon="mdi-plus"
padding="8px 8px"
:disable="readonly"
:color="$q.dark.isActive ? 'primary' : ''"
:class="tab !== 'tab0' ? 'bordered-r' : ''"
/>
<q-tab <q-tab
v-for="(tab, index) in employeeWork" v-for="(tab, index) in employeeWork"
v-bind:key="index" v-bind:key="index"
:name="`tab${index}`" :name="`tab${index}`"
class="content-tab text-capitalize" class="content-tab text-capitalize"
style="z-index: 999"
> >
<div class="text-weight-medium row items-center"> <div class="text-weight-medium row items-center no-wrap">
{{ $t('formDialogTabWork') + (index + 1) }} {{ $t('formDialogTabWork') + (index + 1) }}
<q-btn <q-btn
v-if="!readonly && employeeWork?.length !== 1" v-if="!readonly && employeeWork?.length !== 1"
@ -113,8 +114,10 @@ onMounted(async () => {
class="row col-12 items-start" class="row col-12 items-start"
style="overflow: auto" style="overflow: auto"
> >
<div class="col-3 app-text-muted">• {{ $t(`workHistory`) }}</div> <div class="col-md-3 col-12 app-text-muted">
<div class="col-9 row q-col-gutter-md"> • {{ $t(`workHistory`) }}
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-input <q-input
:for="`${prefixId}-input-owner-name`" :for="`${prefixId}-input-owner-name`"
:dense="dense" :dense="dense"