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

fix: 01 form responsive

Browse source
This commit is contained in:
puriphatt 2024-07-23 04:57:35 +00:00
parent c05e26f36b
commit 331a45ad4e
7 changed files with 145 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/01_branch-management/FormBranchContact.vue
View file

@ -17,14 +17,16 @@ defineProps<{
</script> </script>
<template> <template>
<div class="row col-12"> <div class="row col-12">
<div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div> <div class="col-md-3 col-12 app-text-muted q-pb-sm">
<div class="col-9 row q-col-gutter-md"> • {{ $t(`${title}`) }}
</div>
<div class="col-md-9 col-12 row q-col-gutter-md">
<q-input <q-input
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-5" class="col-md-5 col-12"
:label=" :label="
typeBranch === 'headOffice' typeBranch === 'headOffice'
? $t('formDialogInputEmailHq') ? $t('formDialogInputEmailHq')
@ -39,7 +41,7 @@ defineProps<{
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-7" class="col-md-7 col-12"
:label=" :label="
typeBranch === 'headOffice' typeBranch === 'headOffice'
? $t('formDialogInputTelephoneHq') ? $t('formDialogInputTelephoneHq')
@ -54,7 +56,7 @@ defineProps<{
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-5" class="col-md-5 col-12"
:label="$t('formDialogInputContactName')" :label="$t('formDialogInputContactName')"
v-model="contactName" v-model="contactName"
for="input-contact-name" for="input-contact-name"

193
src/components/01_branch-management/FormBranchInformation.vue
View file

@ -16,103 +16,110 @@ defineProps<{
}>(); }>();
</script> </script>
<template> <template>
<div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div> <div class="row col-12">
<div class="col-9 row q-col-gutter-md"> <div class="col-md-3 col-12 app-text-muted q-pb-sm">
<q-input • {{ $t(`${title}`) }}
:dense="dense" </div>
outlined <div class="col-md-9 col-12 row q-col-gutter-md">
readonly <q-input
hide-bottom-space :dense="dense"
:class="{ outlined
'col-6': typeBranch == 'headOffice', readonly
'col-4': typeBranch != 'headOffice', hide-bottom-space
}" :class="{
:label="$t('formDialogInputCode')" 'col-12': $q.screen.xs,
v-model="code" 'col-6': typeBranch == 'headOffice',
for="input-code" 'col-4': typeBranch != 'headOffice',
/> }"
:label="$t('formDialogInputCode')"
v-model="code"
for="input-code"
/>
<q-input <q-input
v-if="typeBranch !== 'headOffice'" v-if="typeBranch !== 'headOffice'"
:dense="dense" :dense="dense"
outlined outlined
readonly readonly
hide-bottom-space hide-bottom-space
:class="{ :class="{
'col-6': typeBranch == 'headOffice', 'col-12': $q.screen.xs,
'col-4': typeBranch != 'headOffice', 'col-6': typeBranch == 'headOffice',
}" 'col-4': typeBranch != 'headOffice',
:label="$t('branchLabelCode')" }"
v-model="codeSubBranch" :label="$t('branchLabelCode')"
for="input-code-sub-branch" v-model="codeSubBranch"
/> for="input-code-sub-branch"
/>
<q-input <q-input
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
:class="{ :class="{
'col-6': typeBranch === 'headOffice', 'col-12': $q.screen.xs,
'col-4': typeBranch !== 'headOffice', 'col-6': typeBranch === 'headOffice',
}" 'col-4': typeBranch !== 'headOffice',
:label="$t('formDialogInputTaxNo')" }"
v-model="taxNo" :label="$t('formDialogInputTaxNo')"
lazy-rules v-model="taxNo"
:rules="[ lazy-rules
(val) => :rules="[
(val && val.length === 13 && /[0-9]+/.test(val)) || (val) =>
$t('formDialogInputTaxNoValidate'), (val && val.length === 13 && /[0-9]+/.test(val)) ||
]" $t('formDialogInputTaxNoValidate'),
for="input-tax-no" ]"
/> for="input-tax-no"
/>
<q-input <q-input
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-12" class="col-12"
:label=" :label="
typeBranch === 'headOffice' typeBranch === 'headOffice'
? $t('formDialogInputNameHq') ? $t('formDialogInputNameHq')
: $t('formDialogInputNameSubBranch') : $t('formDialogInputNameSubBranch')
" "
v-model="name" v-model="name"
lazy-rules lazy-rules
:rules="[(val) => val && val.length > 0]" :rules="[(val) => val && val.length > 0]"
:error-message=" :error-message="
typeBranch === 'headOffice' typeBranch === 'headOffice'
? $t('formDialogInputNameHqValidate') ? $t('formDialogInputNameHqValidate')
: $t('formDialogInputNameSubBranchValidate') : $t('formDialogInputNameSubBranchValidate')
" "
for="input-name" for="input-name"
/> />
<q-input <q-input
:dense="dense" :dense="dense"
outlined outlined
:readonly="readonly" :readonly="readonly"
hide-bottom-space hide-bottom-space
class="col-12" class="col-12"
v-model="nameEN" v-model="nameEN"
:label=" :label="
typeBranch === 'headOffice' typeBranch === 'headOffice'
? $t('formDialogInputNameHqEn') ? $t('formDialogInputNameHqEn')
: $t('formDialogInputNameSubBranchEn') : $t('formDialogInputNameSubBranchEn')
" "
:rules="[(val) => val && val.length > 0]" :rules="[(val) => val && val.length > 0]"
:error-message=" :error-message="
typeBranch === 'headOffice' typeBranch === 'headOffice'
? $t('formDialogInputNameHqEnValidate') ? $t('formDialogInputNameHqEnValidate')
: $t('formDialogInputNameSubBranchEnValidate') : $t('formDialogInputNameSubBranchEnValidate')
" "
for="input-name-en" for="input-name-en"
/>
</div>
<q-separator
v-if="separator"
class="col-12 q-mt-xl q-mb-md"
style="padding-block: 0.5px"
/> />
</div> </div>
<q-separator
v-if="separator"
class="col-12 q-mt-xl q-mb-md"
style="padding-block: 0.5px"
/>
</template> </template>

10
src/components/01_branch-management/FormImage.vue
View file

@ -14,10 +14,14 @@ defineEmits<{
}>(); }>();
</script> </script>
<template> <template>
<div class="col-3 app-text-muted">• {{ title }}</div> <div class="col-md-3 col-12 app-text-muted">• {{ title }}</div>
<div <div
:class="{ 'dark-form-show-img-qh': $q.dark.isActive }" :class="{
class="col-9 row q-mt-lg branch-form-show-img-hq" 'dark-form-show-img-qh': $q.dark.isActive,
'q-mt-lg': !$q.screen.xs,
'q-mt-sm': $q.screen.xs,
}"
class="col-md-9 col-12 row branch-form-show-img-hq"
style="min-height: 150px" style="min-height: 150px"
> >
<div class="col-12 flex flex-center" v-if="image"> <div class="col-12 flex flex-center" v-if="image">

7
src/components/01_branch-management/FormLocation.vue
View file

@ -18,8 +18,11 @@ defineProps<{
}>(); }>();
</script> </script>
<template> <template>
<div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div> <div class="col-md-3 col-12 app-text-muted">• {{ $t(`${title}`) }}</div>
<div class="col-9 q-mt-lg bordered rounded row no-padding"> <div
class="col-md-9 col-12 bordered rounded row no-padding"
:class="{ 'q-mt-lg': !$q.screen.xs, 'q-mt-sm': $q.screen.xs }"
>
<div class="col-12 q-pl-md q-py-sm app-text-muted">location</div> <div class="col-12 q-pl-md q-py-sm app-text-muted">location</div>
<div v-if="!!longitude && !!latitude" class="col-12 flex flex-center"> <div v-if="!!longitude && !!latitude" class="col-12 flex flex-center">

10
src/components/01_branch-management/FormQr.vue
View file

@ -16,10 +16,14 @@ defineEmits<{
}>(); }>();
</script> </script>
<template> <template>
<div class="col-3 app-text-muted">• {{ title }}</div> <div class="col-md-3 col-12 app-text-muted">• {{ title }}</div>
<div <div
:class="{ 'dark-form-show-qr-code': $q.dark.isActive }" :class="{
class="col-9 row q-mt-lg branch-form-show-qr-code" 'dark-form-show-qr-code': $q.dark.isActive,
'q-mt-lg': !$q.screen.xs,
'q-mt-sm': $q.screen.xs,
}"
class="col-md-9 col-12 row branch-form-show-qr-code"
> >
<div class="col-12 flex flex-center"> <div class="col-12 flex flex-center">
<q-img v-if="qr" :src="qr as string" style="width: 150px; height: 150px"> <q-img v-if="qr" :src="qr as string" style="width: 150px; height: 150px">

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

@ -113,10 +113,13 @@ watch(districtId, fetchSubDistrict);
</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 app-text-muted"> <div
class="col-md-3 col-12 app-text-muted"
:class="{ 'q-pl-xl': !$q.screen.xs }"
>
{{ addressTitle || $t('formDialogTitleAddressPure') }} {{ addressTitle || $t('formDialogTitleAddressPure') }}
</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="`${id !== undefined ? `input-address-${id}` : 'input-address'}`" :for="`${id !== undefined ? `input-address-${id}` : 'input-address'}`"
:dense="dense" :dense="dense"
@ -149,7 +152,7 @@ watch(districtId, fetchSubDistrict);
option-value="id" option-value="id"
option-label="name" option-label="name"
:label="$t('province')" :label="$t('province')"
class="col-3" class="col-md-3 col-6"
:options="addrOptions.provinceOps" :options="addrOptions.provinceOps"
:rules=" :rules="
disabledRule disabledRule
@ -176,7 +179,7 @@ watch(districtId, fetchSubDistrict);
option-value="id" option-value="id"
option-label="name" option-label="name"
:label="$t('district')" :label="$t('district')"
class="col-3" class="col-md-3 col-6"
:options="addrOptions.districtOps" :options="addrOptions.districtOps"
:rules=" :rules="
disabledRule disabledRule
@ -202,7 +205,7 @@ watch(districtId, fetchSubDistrict);
option-value="id" option-value="id"
option-label="name" option-label="name"
:label="$t('subDistrict')" :label="$t('subDistrict')"
class="col-3" class="col-md-3 col-6"
:options="addrOptions.subDistrictOps" :options="addrOptions.subDistrictOps"
:rules=" :rules="
disabledRule disabledRule
@ -221,14 +224,17 @@ watch(districtId, fetchSubDistrict);
outlined outlined
readonly readonly
:label="$t('zipCode')" :label="$t('zipCode')"
class="col-3" class="col-md-3 col-6"
v-model="zipCode" v-model="zipCode"
/> />
</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.xs }"
>
{{ addressTitleEN || $t('formDialogTitleAddressPureEN') }} {{ addressTitleEN || $t('formDialogTitleAddressPureEN') }}
</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="`${id !== undefined ? `input-address-en-${id}` : 'input-address-en'}`" :for="`${id !== undefined ? `input-address-en-${id}` : 'input-address-en'}`"
:dense="dense" :dense="dense"
@ -261,7 +267,7 @@ watch(districtId, fetchSubDistrict);
option-value="id" option-value="id"
option-label="nameEN" option-label="nameEN"
:label="$t('province')" :label="$t('province')"
class="col-3" class="col-md-3 col-6"
:options="addrOptions.provinceOps" :options="addrOptions.provinceOps"
:rules=" :rules="
disabledRule disabledRule
@ -287,7 +293,7 @@ watch(districtId, fetchSubDistrict);
option-value="id" option-value="id"
option-label="nameEN" option-label="nameEN"
:label="$t('district')" :label="$t('district')"
class="col-3" class="col-md-3 col-6"
:options="addrOptions.districtOps" :options="addrOptions.districtOps"
:rules=" :rules="
disabledRule disabledRule
@ -313,7 +319,7 @@ watch(districtId, fetchSubDistrict);
option-value="id" option-value="id"
option-label="nameEN" option-label="nameEN"
:label="$t('subDistrict')" :label="$t('subDistrict')"
class="col-3" class="col-md-3 col-6"
:options="addrOptions.subDistrictOps" :options="addrOptions.subDistrictOps"
:rules=" :rules="
disabledRule disabledRule
@ -334,7 +340,7 @@ watch(districtId, fetchSubDistrict);
readonly readonly
zip="zip-en" zip="zip-en"
:label="$t('zipCode')" :label="$t('zipCode')"
class="col-3" class="col-md-3 col-6"
v-model="zipCode" v-model="zipCode"
/> />
</div> </div>

2
src/components/FormDialog.vue
View file

@ -49,7 +49,7 @@ const currentTab = defineModel<string>('currentTab');
<div <div
class="surface-1" class="surface-1"
style="padding: 0; border-radius: var(--radius-2); height: 100%" style="padding: 0; border-radius: var(--radius-2); height: 100%"
:style="`max-width:${maxWidth ? maxWidth : '85%'}; width: ${width ? width : '85%'}; height: ${height ? height : '85vh'} `" :style="`max-width:${$q.screen.xs ? '100%' : maxWidth ? maxWidth : '85%'}; width: ${$q.screen.xs ? '100%' : width ? width : '85%'}; height: ${height ? height : '85vh'} `"
> >
<q-form <q-form
greedy greedy