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

fix(03): responsive employee form personal info

Browse source
This commit is contained in:
puriphatt 2024-07-24 09:10:26 +00:00
parent 5e93c5b01c
commit 6215338e58
6 changed files with 34 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -79,10 +79,12 @@ watch(districtId, fetchSubDistrict);
<template>
<div class="col-12">
<div class="col-12 app-text-muted row items-center q-mb-md">
• {{ title || $t('formDialogTitlePersonnelAddress') }}
<span class="q-mr-lg">
• {{ title || $t('formDialogTitlePersonnelAddress') }}
</span>
<div
v-if="employee"
class="q-ml-lg surface-3 q-px-sm q-py-xs row"
class="surface-3 q-px-sm q-py-xs row"
style="border-radius: var(--radius-3)"
>
<span

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

@ -209,7 +209,7 @@ defineProps<{
emit-value
map-options
:label="$t('formDialogInputGender')"
class="col-3"
class="col-md-3 col-6"
option-label="label"
option-value="value"
v-model="gender"
@ -231,7 +231,7 @@ defineProps<{
map-options
options-dense
:label="$t('formDialogInputNationality')"
class="col-3"
class="col-md-3 col-6"
option-label="label"
option-value="label"
v-model="nationality"

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

@ -42,10 +42,10 @@ defineEmits<{
</script>
<template>
<div class="col-3 app-text-muted">
<div class="col-md-3 col-12 app-text-muted">
• {{ $t(`formDialogTitleInformation`) }}
</div>
<div v-if="!employee" class="col-9 row q-col-gutter-md">
<div v-if="!employee" class="col-md-9 col-12 row q-col-gutter-md">
<q-select
id="input-source-nationality"
:dense="dense"
@ -148,7 +148,7 @@ defineEmits<{
/>
</div>
<div v-if="employee" class="col-9 row q-col-gutter-md">
<div v-if="employee" class="col-md-9 col-12 row q-col-gutter-md">
<q-select
for="select-employer-branch"
:use-input="!customerBranch"
@ -250,16 +250,18 @@ defineEmits<{
</template>
<template v-slot:selected-item="scope">
<div v-if="scope.opt" class="row items-center no-wrap">
<div
v-if="scope.opt"
class="row items-center no-wrap"
style="width: 1px"
>
<div class="q-mr-sm">
{{ scope.opt.code }}
{{ $t('branchName') }}:
{{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
</div>
<div
class="text-caption app-text-muted-2 ellipsis col"
style="max-width: 26vw"
class="text-caption app-text-muted-2"
v-if="scope.opt.customer && scope.opt.province"
>
{{ $t('customerBranchName') }}:

5
src/components/03_customer-management/FormBusiness.vue
View file

@ -47,11 +47,8 @@ onMounted(async () => {
});
</script>
<template>
<div class="col-12 app-text-muted"></div>
<div class="col-12 row q-col-gutter-y-md">
<div class="col-3 q-pl-xl app-text-muted">
{{ $t('businessInformation') }}
</div>
<div class="col-3 app-text-muted">• {{ $t('businessInformation') }}</div>
<div class="col-9 row q-col-gutter-md">
<q-input
for="input-employment-office"

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

@ -29,8 +29,10 @@ defineProps<{
</script>
<template>
<div class="col-3 app-text-muted">• {{ $t(`formDialogTitlePassport`) }}</div>
<div class="col-9 row q-col-gutter-md">
<div class="col-md-3 col-12 app-text-muted">
• {{ $t(`formDialogTitlePassport`) }}
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-select
id="select-passport-type"
:dense="dense"
@ -44,7 +46,7 @@ defineProps<{
option-value="value"
option-label="label"
:label="$t('formDialogInputPassportType')"
class="col-3"
class="col-md-3 col-12"
:options="passportTypeOption"
lazy-rules
:rules="[
@ -58,7 +60,7 @@ defineProps<{
outlined
:readonly="readonly"
hide-bottom-space
class="col-3"
class="col-md-3 col-6"
:label="$t('formDialogInputPassportNo')"
v-model="passportNumber"
:rules="[
@ -82,7 +84,7 @@ defineProps<{
outlined
:readonly="readonly"
hide-bottom-space
class="col-3"
class="col-md-3 col-6"
:label="$t('formDialogInputWPassportPlace')"
v-model="passportIssuingPlace"
:rules="[
@ -103,7 +105,7 @@ defineProps<{
option-value="value"
option-label="label"
:label="$t('formDialogInputPassportCountry')"
class="col-3"
class="col-md-3 col-6"
:options="passportIssuingCountryOption"
lazy-rules
:rules="[
@ -121,7 +123,7 @@ defineProps<{
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
class="col-3"
class="col-md-3 col-6"
>
<template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
@ -178,7 +180,7 @@ defineProps<{
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
class="col-3"
class="col-md-3 col-6"
>
<template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}

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

@ -54,8 +54,10 @@ onMounted(async () => {
</script>
<template>
<div class="col-3 app-text-muted">• {{ $t(`formDialogTitleVisa`) }}</div>
<div class="col-9 row q-col-gutter-md">
<div class="col-md-3 col-12 app-text-muted">
• {{ $t(`formDialogTitleVisa`) }}
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-select
id="select-visa-type"
:dense="dense"
@ -69,7 +71,7 @@ onMounted(async () => {
option-value="value"
option-label="label"
:label="$t('formDialogInputVisaType')"
class="col-3"
class="col-md-3 col-6"
:options="visaTypeOption"
lazy-rules
/>
@ -83,7 +85,7 @@ onMounted(async () => {
outlined
:readonly="readonly"
hide-bottom-space
class="col-3"
class="col-md-3 col-6"
:label="$t('formDialogInputVisaNo')"
v-model="visaNumber"
/>
@ -101,7 +103,7 @@ onMounted(async () => {
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
class="col-3"
class="col-md-3 col-6"
>
<template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}
@ -166,7 +168,7 @@ onMounted(async () => {
:locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
:enableTimePicker="false"
:disabled="readonly"
class="col-3"
class="col-md-3 col-6"
>
<template #year="{ value }">
{{ $i18n.locale === 'th-th' ? value + 543 : value }}