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>
|
||||
<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
|
||||
:active="formData.status !== 'INACTIVE'"
|
||||
useToggle
|
||||
|
|
@ -1576,58 +1581,69 @@ watch(
|
|||
|
||||
<div
|
||||
style="flex: 1; width: 100%; overflow-y: auto"
|
||||
class="surface-2 q-pa-lg"
|
||||
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
|
||||
class="col surface-1 full-height rounded bordered scroll row relative-position"
|
||||
>
|
||||
<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"
|
||||
v-if="formData.status !== 'INACTIVE'"
|
||||
>
|
||||
<UndoButton
|
||||
v-if="infoDrawerEdit"
|
||||
id="btn-info-basic-undo"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
undo();
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="infoDrawerEdit"
|
||||
id="btn-info-basic-save"
|
||||
icon-only
|
||||
type="submit"
|
||||
/>
|
||||
<EditButton
|
||||
v-if="!infoDrawerEdit"
|
||||
id="btn-info-basic-edit"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
infoDrawerEdit = true;
|
||||
isImageEdit = true;
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="!infoDrawerEdit"
|
||||
id="btn-info-basic-delete"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
if (!currentUser) return;
|
||||
onDelete(currentUser.id);
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<div
|
||||
v-if="formData.status !== 'INACTIVE'"
|
||||
class="surface-1 row rounded"
|
||||
>
|
||||
<UndoButton
|
||||
v-if="infoDrawerEdit"
|
||||
id="btn-info-basic-undo"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
undo();
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<SaveButton
|
||||
v-if="infoDrawerEdit"
|
||||
id="btn-info-basic-save"
|
||||
icon-only
|
||||
type="submit"
|
||||
/>
|
||||
<EditButton
|
||||
v-if="!infoDrawerEdit"
|
||||
id="btn-info-basic-edit"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
infoDrawerEdit = true;
|
||||
isImageEdit = true;
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
<DeleteButton
|
||||
v-if="!infoDrawerEdit"
|
||||
id="btn-info-basic-delete"
|
||||
icon-only
|
||||
@click="
|
||||
() => {
|
||||
if (!currentUser) return;
|
||||
onDelete(currentUser.id);
|
||||
}
|
||||
"
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col"
|
||||
|
|
@ -1672,9 +1688,12 @@ watch(
|
|||
</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"
|
||||
:class="$q.screen.xs ? 'q-pl-md' : 'q-pl-sm'"
|
||||
style="height: 100%; max-height: 100; overflow-y: auto"
|
||||
>
|
||||
<FormInformation
|
||||
|
|
@ -1781,7 +1800,12 @@ watch(
|
|||
>
|
||||
<!-- :title="formData.name"
|
||||
: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
|
||||
active
|
||||
useToggle
|
||||
|
|
@ -1823,129 +1847,153 @@ watch(
|
|||
</div>
|
||||
|
||||
<div
|
||||
class="col surface-1 q-ma-lg rounded bordered row relative-position"
|
||||
class="col"
|
||||
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
|
||||
class="surface-1 rounded q-my-md q-mx-lg row"
|
||||
style="position: absolute; z-index: 999; right: 0; top: 0"
|
||||
style="overflow-y: auto"
|
||||
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="col full-height scroll" v-if="$q.screen.gt.sm">
|
||||
<div style="position: sticky; top: 0" class="q-pa-sm">
|
||||
<SideMenu
|
||||
:menu="
|
||||
[
|
||||
{
|
||||
name: $t('form.field.basicInformation'),
|
||||
anchor: 'dialog-form-information',
|
||||
},
|
||||
{
|
||||
name: $t('personnel.form.personalInformation'),
|
||||
anchor: 'dialog-form-personal',
|
||||
},
|
||||
{
|
||||
name: $t('personnel.form.addressInformation'),
|
||||
anchor: 'dialog-form-address',
|
||||
},
|
||||
].concat(
|
||||
!!formData.userType
|
||||
? [
|
||||
{
|
||||
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
|
||||
class="rounded row"
|
||||
style="position: absolute; z-index: 999; right: 0; top: 0"
|
||||
:class="{
|
||||
'q-py-md q-px-lg': $q.screen.gt.sm,
|
||||
'q-py-sm q-px-lg': !$q.screen.gt.sm,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-if="formData.status !== 'INACTIVE'"
|
||||
class="surface-1 row rounded"
|
||||
>
|
||||
<SaveButton id="btn-info-basic-save" icon-only type="submit" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col full-height scroll" v-if="$q.screen.gt.sm">
|
||||
<div style="position: sticky; top: 0" class="q-pa-sm">
|
||||
<SideMenu
|
||||
:menu="
|
||||
[
|
||||
{
|
||||
name: $t('form.field.basicInformation'),
|
||||
anchor: 'dialog-form-information',
|
||||
},
|
||||
{
|
||||
name: $t('personnel.form.personalInformation'),
|
||||
anchor: 'dialog-form-personal',
|
||||
},
|
||||
{
|
||||
name: $t('personnel.form.addressInformation'),
|
||||
anchor: 'dialog-form-address',
|
||||
},
|
||||
].concat(
|
||||
!!formData.userType
|
||||
? [
|
||||
{
|
||||
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 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>
|
||||
</DialogForm>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue