fix(02): profile layout
This commit is contained in:
puriphatt
parent
4de34d2914
commit
fb068c005d
1 changed files with 212 additions and 164 deletions
|
|
@ -1525,7 +1525,12 @@ watch(
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<InfoForm>
|
<InfoForm>
|
||||||
<div class="q-px-lg q-pt-lg surface-2">
|
<div
|
||||||
|
:class="{
|
||||||
|
'q-mx-lg q-my-md': $q.screen.gt.sm,
|
||||||
|
'q-mx-md q-my-sm': !$q.screen.gt.sm,
|
||||||
|
}"
|
||||||
|
>
|
||||||
<ProfileBanner
|
<ProfileBanner
|
||||||
:active="formData.status !== 'INACTIVE'"
|
:active="formData.status !== 'INACTIVE'"
|
||||||
useToggle
|
useToggle
|
||||||
|
|
@ -1576,58 +1581,69 @@ watch(
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style="flex: 1; width: 100%; overflow-y: auto"
|
style="flex: 1; width: 100%; overflow-y: auto"
|
||||||
class="surface-2 q-pa-lg"
|
|
||||||
id="drawer-user-form"
|
id="drawer-user-form"
|
||||||
|
:class="{
|
||||||
|
'q-px-lg q-pb-lg': $q.screen.gt.sm,
|
||||||
|
'q-px-md q-pb-sm': !$q.screen.gt.sm,
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="col surface-1 full-height rounded bordered scroll row relative-position"
|
class="col surface-1 full-height rounded bordered scroll row relative-position"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="surface-1 rounded q-my-md q-mx-lg row"
|
class="rounded row"
|
||||||
|
:class="{
|
||||||
|
'q-py-md q-px-lg': $q.screen.gt.sm,
|
||||||
|
'q-py-sm q-px-lg': !$q.screen.gt.sm,
|
||||||
|
}"
|
||||||
style="position: absolute; z-index: 999; top: 0; right: 0"
|
style="position: absolute; z-index: 999; top: 0; right: 0"
|
||||||
v-if="formData.status !== 'INACTIVE'"
|
|
||||||
>
|
>
|
||||||
<UndoButton
|
<div
|
||||||
v-if="infoDrawerEdit"
|
v-if="formData.status !== 'INACTIVE'"
|
||||||
id="btn-info-basic-undo"
|
class="surface-1 row rounded"
|
||||||
icon-only
|
>
|
||||||
@click="
|
<UndoButton
|
||||||
() => {
|
v-if="infoDrawerEdit"
|
||||||
undo();
|
id="btn-info-basic-undo"
|
||||||
}
|
icon-only
|
||||||
"
|
@click="
|
||||||
type="button"
|
() => {
|
||||||
/>
|
undo();
|
||||||
<SaveButton
|
}
|
||||||
v-if="infoDrawerEdit"
|
"
|
||||||
id="btn-info-basic-save"
|
type="button"
|
||||||
icon-only
|
/>
|
||||||
type="submit"
|
<SaveButton
|
||||||
/>
|
v-if="infoDrawerEdit"
|
||||||
<EditButton
|
id="btn-info-basic-save"
|
||||||
v-if="!infoDrawerEdit"
|
icon-only
|
||||||
id="btn-info-basic-edit"
|
type="submit"
|
||||||
icon-only
|
/>
|
||||||
@click="
|
<EditButton
|
||||||
() => {
|
v-if="!infoDrawerEdit"
|
||||||
infoDrawerEdit = true;
|
id="btn-info-basic-edit"
|
||||||
isImageEdit = true;
|
icon-only
|
||||||
}
|
@click="
|
||||||
"
|
() => {
|
||||||
type="button"
|
infoDrawerEdit = true;
|
||||||
/>
|
isImageEdit = true;
|
||||||
<DeleteButton
|
}
|
||||||
v-if="!infoDrawerEdit"
|
"
|
||||||
id="btn-info-basic-delete"
|
type="button"
|
||||||
icon-only
|
/>
|
||||||
@click="
|
<DeleteButton
|
||||||
() => {
|
v-if="!infoDrawerEdit"
|
||||||
if (!currentUser) return;
|
id="btn-info-basic-delete"
|
||||||
onDelete(currentUser.id);
|
icon-only
|
||||||
}
|
@click="
|
||||||
"
|
() => {
|
||||||
type="button"
|
if (!currentUser) return;
|
||||||
/>
|
onDelete(currentUser.id);
|
||||||
|
}
|
||||||
|
"
|
||||||
|
type="button"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="col"
|
class="col"
|
||||||
|
|
@ -1672,9 +1688,12 @@ watch(
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="col-12 col-md-10 q-py-md q-pr-md relative-position"
|
class="col-12 col-md-10 relative-position"
|
||||||
|
:class="{
|
||||||
|
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||||
|
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||||||
|
}"
|
||||||
id="user-form-content"
|
id="user-form-content"
|
||||||
:class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
|
|
||||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||||
>
|
>
|
||||||
<FormInformation
|
<FormInformation
|
||||||
|
|
@ -1781,7 +1800,12 @@ watch(
|
||||||
>
|
>
|
||||||
<!-- :title="formData.name"
|
<!-- :title="formData.name"
|
||||||
:caption="formData.nameEN" -->
|
:caption="formData.nameEN" -->
|
||||||
<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
|
||||||
active
|
active
|
||||||
useToggle
|
useToggle
|
||||||
|
|
@ -1823,129 +1847,153 @@ watch(
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="col surface-1 q-ma-lg rounded bordered row relative-position"
|
class="col"
|
||||||
id="personnel-form"
|
id="personnel-form"
|
||||||
|
:class="{
|
||||||
|
'q-px-lg q-pb-lg': $q.screen.gt.sm,
|
||||||
|
'q-px-md q-pb-sm': !$q.screen.gt.sm,
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="surface-1 rounded q-my-md q-mx-lg row"
|
style="overflow-y: auto"
|
||||||
style="position: absolute; z-index: 999; right: 0; top: 0"
|
class="row full-width full-height surface-1 rounded bordered relative-position"
|
||||||
>
|
>
|
||||||
<SaveButton id="btn-info-basic-save" icon-only type="submit" />
|
<div
|
||||||
</div>
|
class="rounded row"
|
||||||
<div class="col full-height scroll" v-if="$q.screen.gt.sm">
|
style="position: absolute; z-index: 999; right: 0; top: 0"
|
||||||
<div style="position: sticky; top: 0" class="q-pa-sm">
|
:class="{
|
||||||
<SideMenu
|
'q-py-md q-px-lg': $q.screen.gt.sm,
|
||||||
:menu="
|
'q-py-sm q-px-lg': !$q.screen.gt.sm,
|
||||||
[
|
}"
|
||||||
{
|
>
|
||||||
name: $t('form.field.basicInformation'),
|
<div
|
||||||
anchor: 'dialog-form-information',
|
v-if="formData.status !== 'INACTIVE'"
|
||||||
},
|
class="surface-1 row rounded"
|
||||||
{
|
>
|
||||||
name: $t('personnel.form.personalInformation'),
|
<SaveButton id="btn-info-basic-save" icon-only type="submit" />
|
||||||
anchor: 'dialog-form-personal',
|
</div>
|
||||||
},
|
</div>
|
||||||
{
|
<div class="col full-height scroll" v-if="$q.screen.gt.sm">
|
||||||
name: $t('personnel.form.addressInformation'),
|
<div style="position: sticky; top: 0" class="q-pa-sm">
|
||||||
anchor: 'dialog-form-address',
|
<SideMenu
|
||||||
},
|
:menu="
|
||||||
].concat(
|
[
|
||||||
!!formData.userType
|
{
|
||||||
? [
|
name: $t('form.field.basicInformation'),
|
||||||
{
|
anchor: 'dialog-form-information',
|
||||||
name: $t('personnel.form.workInformation'),
|
},
|
||||||
anchor: 'dialog-info-work',
|
{
|
||||||
},
|
name: $t('personnel.form.personalInformation'),
|
||||||
]
|
anchor: 'dialog-form-personal',
|
||||||
: [],
|
},
|
||||||
)
|
{
|
||||||
"
|
name: $t('personnel.form.addressInformation'),
|
||||||
background="transparent"
|
anchor: 'dialog-form-address',
|
||||||
:active="{
|
},
|
||||||
background: 'hsla(var(--blue-6-hsl) / .2)',
|
].concat(
|
||||||
foreground: 'var(--blue-6)',
|
!!formData.userType
|
||||||
}"
|
? [
|
||||||
scroll-element="#personnel-form"
|
{
|
||||||
|
name: $t('personnel.form.workInformation'),
|
||||||
|
anchor: 'dialog-info-work',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
: [],
|
||||||
|
)
|
||||||
|
"
|
||||||
|
background="transparent"
|
||||||
|
:active="{
|
||||||
|
background: 'hsla(var(--blue-6-hsl) / .2)',
|
||||||
|
foreground: 'var(--blue-6)',
|
||||||
|
}"
|
||||||
|
scroll-element="#personnel-form"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="col-md-10 col-12 full-height scroll"
|
||||||
|
:class="{
|
||||||
|
'q-py-md q-pr-md ': $q.screen.gt.sm,
|
||||||
|
'q-py-md q-px-lg': !$q.screen.gt.sm,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<FormInformation
|
||||||
|
id="dialog-form-information"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
separator
|
||||||
|
:title="'form.field.basicInformation'"
|
||||||
|
:usernameReadonly="isEdit"
|
||||||
|
v-model:hqId="hqId"
|
||||||
|
v-model:brId="brId"
|
||||||
|
v-model:userType="formData.userType"
|
||||||
|
v-model:userRole="formData.userRole"
|
||||||
|
v-model:username="formData.username"
|
||||||
|
v-model:userCode="userCode"
|
||||||
|
class="q-mb-xl"
|
||||||
|
/>
|
||||||
|
<FormPerson
|
||||||
|
id="dialog-form-personal"
|
||||||
|
prefix-id="form-dialog-personnel"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
separator
|
||||||
|
:title="'personnel.form.personalInformation'"
|
||||||
|
v-model:firstName="formData.firstName"
|
||||||
|
v-model:lastName="formData.lastName"
|
||||||
|
v-model:midName="formData.middleName"
|
||||||
|
v-model:midNameEN="formData.middleNameEN"
|
||||||
|
v-model:prefixName="formData.namePrefix"
|
||||||
|
v-model:prefixNameEN="formData.namePrefix"
|
||||||
|
v-model:firstNameEN="formData.firstNameEN"
|
||||||
|
v-model:lastNameEN="formData.lastNameEN"
|
||||||
|
v-model:telephone-no="formData.telephoneNo"
|
||||||
|
v-model:email="formData.email"
|
||||||
|
v-model:gender="formData.gender"
|
||||||
|
v-model:birth-date="formData.birthDate"
|
||||||
|
v-model:citizen-id="formData.citizenId"
|
||||||
|
v-model:citizen-issue="formData.citizenIssue"
|
||||||
|
v-model:citizen-expire="formData.citizenExpire"
|
||||||
|
class="q-mb-xl"
|
||||||
|
/>
|
||||||
|
<AddressForm
|
||||||
|
id="dialog-form-address"
|
||||||
|
v-model:address="formData.address"
|
||||||
|
v-model:addressEN="formData.addressEN"
|
||||||
|
v-model:moo="formData.moo"
|
||||||
|
v-model:mooEN="formData.mooEN"
|
||||||
|
v-model:soi="formData.soi"
|
||||||
|
v-model:soiEN="formData.soiEN"
|
||||||
|
v-model:street="formData.street"
|
||||||
|
v-model:streetEN="formData.streetEN"
|
||||||
|
v-model:provinceId="formData.provinceId"
|
||||||
|
v-model:districtId="formData.districtId"
|
||||||
|
v-model:subDistrictId="formData.subDistrictId"
|
||||||
|
v-model:zipCode="formData.zipCode"
|
||||||
|
prefix-id="drawer-info-personnel"
|
||||||
|
dense
|
||||||
|
class="q-mb-xl"
|
||||||
|
/>
|
||||||
|
<FormByType
|
||||||
|
id="dialog-form-work"
|
||||||
|
dense
|
||||||
|
outlined
|
||||||
|
separator
|
||||||
|
v-model:userType="formData.userType"
|
||||||
|
v-model:registrationNo="formData.registrationNo"
|
||||||
|
v-model:startDate="formData.startDate"
|
||||||
|
v-model:retireDate="formData.retireDate"
|
||||||
|
v-model:responsibleArea="formData.responsibleArea"
|
||||||
|
v-model:discountCondition="formData.discountCondition"
|
||||||
|
v-model:sourceNationality="formData.sourceNationality"
|
||||||
|
v-model:importNationality="formData.importNationality"
|
||||||
|
v-model:trainingPlace="formData.trainingPlace"
|
||||||
|
v-model:checkpoint="formData.checkpoint"
|
||||||
|
v-model:checkpointEN="formData.checkpointEN"
|
||||||
|
v-model:agencyFile="agencyFile"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-10 col-12 q-pa-md full-height scroll">
|
|
||||||
<FormInformation
|
|
||||||
id="dialog-form-information"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
separator
|
|
||||||
:title="'form.field.basicInformation'"
|
|
||||||
:usernameReadonly="isEdit"
|
|
||||||
v-model:hqId="hqId"
|
|
||||||
v-model:brId="brId"
|
|
||||||
v-model:userType="formData.userType"
|
|
||||||
v-model:userRole="formData.userRole"
|
|
||||||
v-model:username="formData.username"
|
|
||||||
v-model:userCode="userCode"
|
|
||||||
class="q-mb-xl"
|
|
||||||
/>
|
|
||||||
<FormPerson
|
|
||||||
id="dialog-form-personal"
|
|
||||||
prefix-id="form-dialog-personnel"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
separator
|
|
||||||
:title="'personnel.form.personalInformation'"
|
|
||||||
v-model:firstName="formData.firstName"
|
|
||||||
v-model:lastName="formData.lastName"
|
|
||||||
v-model:midName="formData.middleName"
|
|
||||||
v-model:midNameEN="formData.middleNameEN"
|
|
||||||
v-model:prefixName="formData.namePrefix"
|
|
||||||
v-model:prefixNameEN="formData.namePrefix"
|
|
||||||
v-model:firstNameEN="formData.firstNameEN"
|
|
||||||
v-model:lastNameEN="formData.lastNameEN"
|
|
||||||
v-model:telephone-no="formData.telephoneNo"
|
|
||||||
v-model:email="formData.email"
|
|
||||||
v-model:gender="formData.gender"
|
|
||||||
v-model:birth-date="formData.birthDate"
|
|
||||||
v-model:citizen-id="formData.citizenId"
|
|
||||||
v-model:citizen-issue="formData.citizenIssue"
|
|
||||||
v-model:citizen-expire="formData.citizenExpire"
|
|
||||||
class="q-mb-xl"
|
|
||||||
/>
|
|
||||||
<AddressForm
|
|
||||||
id="dialog-form-address"
|
|
||||||
v-model:address="formData.address"
|
|
||||||
v-model:addressEN="formData.addressEN"
|
|
||||||
v-model:moo="formData.moo"
|
|
||||||
v-model:mooEN="formData.mooEN"
|
|
||||||
v-model:soi="formData.soi"
|
|
||||||
v-model:soiEN="formData.soiEN"
|
|
||||||
v-model:street="formData.street"
|
|
||||||
v-model:streetEN="formData.streetEN"
|
|
||||||
v-model:provinceId="formData.provinceId"
|
|
||||||
v-model:districtId="formData.districtId"
|
|
||||||
v-model:subDistrictId="formData.subDistrictId"
|
|
||||||
v-model:zipCode="formData.zipCode"
|
|
||||||
prefix-id="drawer-info-personnel"
|
|
||||||
dense
|
|
||||||
class="q-mb-xl"
|
|
||||||
/>
|
|
||||||
<FormByType
|
|
||||||
id="dialog-form-work"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
separator
|
|
||||||
v-model:userType="formData.userType"
|
|
||||||
v-model:registrationNo="formData.registrationNo"
|
|
||||||
v-model:startDate="formData.startDate"
|
|
||||||
v-model:retireDate="formData.retireDate"
|
|
||||||
v-model:responsibleArea="formData.responsibleArea"
|
|
||||||
v-model:discountCondition="formData.discountCondition"
|
|
||||||
v-model:sourceNationality="formData.sourceNationality"
|
|
||||||
v-model:importNationality="formData.importNationality"
|
|
||||||
v-model:trainingPlace="formData.trainingPlace"
|
|
||||||
v-model:checkpoint="formData.checkpoint"
|
|
||||||
v-model:checkpointEN="formData.checkpointEN"
|
|
||||||
v-model:agencyFile="agencyFile"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</DialogForm>
|
</DialogForm>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue