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

fix(04): profile layout

Browse source
This commit is contained in:
puriphatt 2024-09-27 15:22:28 +07:00
parent f423c305fb
commit ff6d53f958
1 changed files with 114 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

146
src/pages/04_product-service/MainPage.vue
View file

@ -2898,7 +2898,12 @@ watch(
:submit="() => submitGroup()" :submit="() => submitGroup()"
:close="clearFormGroup" :close="clearFormGroup"
> >
<div class="q-mx-lg q-mt-lg"> <div
:class="{
'q-mx-lg q-my-md': $q.screen.gt.sm,
'q-mx-md q-my-sm': !$q.screen.gt.sm,
}"
>
<ProfileBanner <ProfileBanner
readonly readonly
noImageAction noImageAction
@ -2947,7 +2952,11 @@ watch(
/> />
</div> </div>
<div <div
class="col surface-1 q-ma-lg rounded bordered scroll row relative-position" class="col surface-1 rounded bordered scroll row relative-position"
:class="{
'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
}"
id="group-form" id="group-form"
> >
<div <div
@ -2973,9 +2982,12 @@ watch(
</div> </div>
</div> </div>
<div <div
class="col-12 col-md-10 q-py-md q-pr-md" class="col-12 col-md-10"
id="customer-form-content" id="customer-form-content"
:class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'" :class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm,
}"
style="height: 100%; max-height: 100%; overflow-y: auto" style="height: 100%; max-height: 100%; overflow-y: auto"
> >
<!-- :isType="productMode === 'type'" --> <!-- :isType="productMode === 'type'" -->
@ -3034,7 +3046,12 @@ watch(
hide-action hide-action
> >
<InfoForm> <InfoForm>
<div class="q-mx-lg q-mt-lg"> <div
:class="{
'q-mx-lg q-my-md': $q.screen.gt.sm,
'q-mx-md q-my-sm': !$q.screen.gt.sm,
}"
>
<ProfileBanner <ProfileBanner
noImageAction noImageAction
:active="currentStatusGroupType !== 'INACTIVE'" :active="currentStatusGroupType !== 'INACTIVE'"
@ -3080,7 +3097,13 @@ watch(
/> />
</div> </div>
<div class="col q-pa-lg"> <div
class="col"
:class="{
'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
}"
>
<div <div
style="overflow-y: auto" style="overflow-y: auto"
class="row full-width full-height surface-1 rounded relative-position" class="row full-width full-height surface-1 rounded relative-position"
@ -3143,9 +3166,12 @@ watch(
/> />
</div> </div>
<div <div
class="col-12 col-md-10 q-py-md q-pr-md full-height" class="col-12 col-md-10 full-height"
id="group-info" id="group-info"
:class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'" :class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm,
}"
style="overflow-y: auto" style="overflow-y: auto"
> >
<!-- :isType="productMode === 'type'" --> <!-- :isType="productMode === 'type'" -->
@ -3356,7 +3382,7 @@ watch(
</div> </div>
</DialogForm> </DialogForm>
<!-- Add Product --> <!-- add Product -->
<DialogForm <DialogForm
v-model:modal="dialogProduct" v-model:modal="dialogProduct"
:title="$t('productService.product.addTitle')" :title="$t('productService.product.addTitle')"
@ -3373,7 +3399,12 @@ watch(
} }
" "
> >
<div class="q-mx-lg q-mt-lg"> <div
:class="{
'q-mx-lg q-my-md': $q.screen.gt.sm,
'q-mx-md q-my-sm': !$q.screen.gt.sm,
}"
>
<ProfileBanner <ProfileBanner
hideFade hideFade
useToggle useToggle
@ -3405,7 +3436,7 @@ watch(
" "
:tabsList=" :tabsList="
$q.screen.gt.sm $q.screen.gt.sm
? [] ? false
: [ : [
{ {
name: 1, name: 1,
@ -3422,8 +3453,12 @@ watch(
</div> </div>
<div <div
class="col surface-1 q-ma-lg rounded bordered scroll row relative-position" class="col surface-1 rounded bordered scroll row relative-position"
id="product-form" id="product-form"
:class="{
'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
}"
> >
<div <div
class="col" class="col"
@ -3453,9 +3488,12 @@ watch(
</div> </div>
</div> </div>
<div <div
class="col-12 col-md-10 q-py-md q-pr-md" class="col-12 col-md-10"
id="customer-form-content" id="customer-form-content"
:class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'" :class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm,
}"
style="height: 100%; max-height: 100%; overflow-y: auto" style="height: 100%; max-height: 100%; overflow-y: auto"
> >
<BasicInfoProduct <BasicInfoProduct
@ -3497,7 +3535,12 @@ watch(
" "
hide-footer hide-footer
> >
<div class="q-mx-lg q-mt-lg"> <div
:class="{
'q-mx-lg q-my-md': $q.screen.gt.sm,
'q-mx-md q-my-sm': !$q.screen.gt.sm,
}"
>
<ProfileBanner <ProfileBanner
hideFade hideFade
:useToggle="actionDisplay" :useToggle="actionDisplay"
@ -3542,7 +3585,7 @@ watch(
" "
:tabsList=" :tabsList="
$q.screen.gt.sm $q.screen.gt.sm
? [] ? false
: [ : [
{ {
name: 1, name: 1,
@ -3559,8 +3602,12 @@ watch(
</div> </div>
<div <div
class="col surface-1 q-ma-lg rounded bordered scroll row relative-position" class="col surface-1 rounded bordered scroll row relative-position"
id="group-form" id="product-form"
:class="{
'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
}"
> >
<div <div
class="surface-1 rounded row q-mx-lg q-my-md" class="surface-1 rounded row q-mx-lg q-my-md"
@ -3628,8 +3675,11 @@ watch(
</div> </div>
</div> </div>
<div <div
class="col-12 col-md-10 q-py-md q-pr-md" class="col-12 col-md-10"
:class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'" :class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm,
}"
id="customer-form-content" id="customer-form-content"
style="height: 100%; max-height: 100%; overflow-y: auto" style="height: 100%; max-height: 100%; overflow-y: auto"
> >
@ -3682,7 +3732,12 @@ watch(
} }
" "
> >
<div class="q-mx-lg q-mt-lg"> <div
:class="{
'q-mx-lg q-my-md': $q.screen.gt.sm,
'q-mx-md q-my-sm': !$q.screen.gt.sm,
}"
>
<ProfileBanner <ProfileBanner
hideFade hideFade
useToggle useToggle
@ -3721,7 +3776,7 @@ watch(
" "
:tabsList=" :tabsList="
$q.screen.gt.sm $q.screen.gt.sm
? [] ? false
: [ : [
{ {
name: 1, name: 1,
@ -3738,7 +3793,11 @@ watch(
</div> </div>
<div <div
class="col surface-1 q-mx-lg q-mt-lg q-mb-md rounded bordered scroll row relative-position" class="col surface-1 rounded bordered scroll row relative-position"
:class="{
'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
}"
id="service-form" id="service-form"
> >
<div <div
@ -3769,9 +3828,12 @@ watch(
</div> </div>
</div> </div>
<div <div
class="col-12 col-md-10 q-py-md q-pr-md" class="col-12 col-md-10"
id="customer-form-content" id="customer-form-content"
:class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'" :class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm,
}"
style="height: 100%; max-height: 100%; overflow-y: auto" style="height: 100%; max-height: 100%; overflow-y: auto"
> >
<div <div
@ -3861,7 +3923,11 @@ watch(
</div> </div>
</div> </div>
<div <div
class="col-2 surface-1 q-mx-lg q-mb-lg rounded bordered row" class="col-2 surface-1 rounded bordered row"
:class="{
'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
}"
v-if="serviceTab === 1" v-if="serviceTab === 1"
style="overflow: hidden" style="overflow: hidden"
> >
@ -3971,7 +4037,12 @@ watch(
} }
" "
> >
<div class="q-mx-lg q-mt-lg"> <div
:class="{
'q-mx-lg q-my-md': $q.screen.gt.sm,
'q-mx-md q-my-sm': !$q.screen.gt.sm,
}"
>
<ProfileBanner <ProfileBanner
hideFade hideFade
:useToggle="actionDisplay" :useToggle="actionDisplay"
@ -4019,7 +4090,7 @@ watch(
" "
:tabsList=" :tabsList="
$q.screen.gt.sm $q.screen.gt.sm
? [] ? false
: [ : [
{ {
name: 1, name: 1,
@ -4036,8 +4107,12 @@ watch(
</div> </div>
<div <div
class="col surface-1 q-mx-lg q-mt-lg q-mb-md rounded bordered scroll row relative-position" class="col surface-1 rounded bordered scroll row relative-position"
id="group-form" id="group-form"
:class="{
'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
}"
> >
<div <div
class="surface-1 rounded q-my-md q-mx-lg row items-center" class="surface-1 rounded q-my-md q-mx-lg row items-center"
@ -4146,9 +4221,12 @@ watch(
</div> </div>
</div> </div>
<div <div
class="col-12 col-md-10 q-py-md q-pr-md" class="col-12 col-md-10"
id="customer-form-content" id="customer-form-content"
:class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'" :class="{
'q-py-md q-pr-md ': $q.screen.gt.sm,
'q-py-md q-px-lg': !$q.screen.gt.sm,
}"
style="height: 100%; max-height: 100%; overflow-y: auto" style="height: 100%; max-height: 100%; overflow-y: auto"
> >
<BasicInformation <BasicInformation
@ -4198,7 +4276,11 @@ watch(
</div> </div>
</div> </div>
<div <div
class="col-2 surface-1 q-mx-lg q-mb-lg rounded bordered row" class="col-2 surface-1 rounded bordered row"
:class="{
'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
'q-mb-sm q-mx-md': !$q.screen.gt.sm,
}"
v-if="serviceTab === 1" v-if="serviceTab === 1"
style="overflow: hidden" style="overflow: hidden"
> >