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>
<template>
<div class="full-height full-width">
<div class="bordered-b">
<div class="full-height full-width column">
<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
inline-label
mobile-arrows
v-model="tab"
dense
class="text-grey full-width"
class="text-grey col"
active-class="active-tab"
indicator-color="transparent"
align="left"
: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
v-for="(tab, index) in employeeCheckup"
v-bind:key="index"
:name="`tab${index}`"
class="content-tab text-capitalize"
style="z-index: 999"
>
<div class="text-weight-medium row items-center no-wrap">
{{ $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 class="col-12 row q-col-gutter-y-md">
<div class="col-3 q-pl-xl"></div>
<div class="col-9 row q-col-gutter-md">
<div v-if="$q.screen.gt.sm" class="col-3 q-pl-xl"></div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-input
:for="`${prefixId}-input-citizen-id`"
:dense="dense"
@ -32,17 +32,20 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
lazy-rules
/>
</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') }}
</div>
<div class="col-9 row q-col-gutter-md">
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-input
:for="`${prefixId}-input-father-first-name`"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-3"
class="col-md-3 col-6"
:label="$t('formDialogInputFirstName')"
v-model="employeeOther.fatherFirstName"
/>
@ -52,7 +55,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
outlined
:readonly="readonly"
hide-bottom-space
class="col-3"
class="col-md-3 col-6"
:label="$t('formDialogInputLastName')"
v-model="employeeOther.fatherLastName"
/>
@ -62,7 +65,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
outlined
:readonly="readonly"
hide-bottom-space
class="col-3"
class="col-md-3 col-6"
:label="$t('formDialogInputFirstNameEN')"
v-model="employeeOther.fatherFirstNameEN"
/>
@ -72,7 +75,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
outlined
:readonly="readonly"
hide-bottom-space
class="col-3"
class="col-md-3 col-6"
:label="$t('formDialogInputLastNameEN')"
v-model="employeeOther.fatherLastNameEN"
/>
@ -88,17 +91,20 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
/>
</div>
<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') }}
</div>
<div class="col-9 row q-col-gutter-md">
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-input
:for="`${prefixId}-input-mother-first-name`"
:dense="dense"
outlined
:readonly="readonly"
hide-bottom-space
class="col-3"
class="col-md-3 col-6"
:label="$t('formDialogInputFirstName')"
v-model="employeeOther.motherFirstName"
/>
@ -108,7 +114,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
outlined
:readonly="readonly"
hide-bottom-space
class="col-3"
class="col-md-3 col-6"
:label="$t('formDialogInputLastName')"
v-model="employeeOther.motherLastName"
/>
@ -118,7 +124,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
outlined
:readonly="readonly"
hide-bottom-space
class="col-3"
class="col-md-3 col-6"
:label="$t('formDialogInputFirstNameEN')"
v-model="employeeOther.motherFirstNameEN"
/>
@ -128,7 +134,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
outlined
:readonly="readonly"
hide-bottom-space
class="col-3"
class="col-md-3 col-6"
:label="$t('formDialogInputLastNameEN')"
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 passportNumber = defineModel<string>('passportNumber');
const passportIssueDate = defineModel<Date | null>('passportIssueDate');
const passportExpiryDate = defineModel<Date | null>('passportExpiryDate');
const passportIssueDate = defineModel<Date | null | string>(
'passportIssueDate',
);
const passportExpiryDate = defineModel<Date | null | string>(
'passportExpiryDate',
);
const passportIssuingCountry = defineModel<string>('passportIssuingCountry');
const passportIssuingPlace = defineModel<string>('passportIssuingPlace');
const previousPassportReference = defineModel<string>(

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

@ -57,36 +57,37 @@ onMounted(async () => {
</script>
<template>
<div>
<div class="bordered-b full-width">
<div class="full-height full-width column">
<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
inline-label
mobile-arrows
v-model="tab"
dense
class="text-grey"
class="text-grey col"
active-class="active-tab"
indicator-color="transparent"
align="left"
: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
v-for="(tab, index) in employeeWork"
v-bind:key="index"
:name="`tab${index}`"
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) }}
<q-btn
v-if="!readonly && employeeWork?.length !== 1"
@ -113,8 +114,10 @@ onMounted(async () => {
class="row col-12 items-start"
style="overflow: auto"
>
<div class="col-3 app-text-muted">• {{ $t(`workHistory`) }}</div>
<div class="col-9 row q-col-gutter-md">
<div class="col-md-3 col-12 app-text-muted">
• {{ $t(`workHistory`) }}
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-input
:for="`${prefixId}-input-owner-name`"
:dense="dense"