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

fix: Drawer info layout

Browse source
This commit is contained in:
puriphatt 2024-07-30 09:44:21 +00:00
parent ac171b1379
commit 6f501da99b
4 changed files with 136 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

83
src/components/02_personnel-management/InfoForm.vue
View file

@ -53,59 +53,49 @@ const employeeTab = defineModel<string>('employeeTab');
</div> </div>
<div <div
class="full-width no-wrap col" class="col full-height q-pa-md"
:class="$q.screen.gt.xs ? 'row' : 'column'" :class="{ row: $q.screen.gt.sm, column: $q.screen.lt.md }"
> >
<div class="col-3" v-if="$slots['person-card']"> <div class="col-md-2" v-if="$slots['person-card']">
<slot name="person-card"></slot> <slot name="person-card"></slot>
</div> </div>
<div <div
class="bordered surface-1 rounded q-pa-md scroll full-height col"
:class="{ :class="{
'col-9': $slots['person-card'], 'q-ml-md': $q.screen.gt.sm && $slots['person-card'],
'col-12': !$slots['person-card'], 'q-mt-md': $q.screen.lt.md,
'q-ml-md': $q.screen.xs,
}" }"
class="relative-position"
> >
<AppBox <div class="row q-col-gutter-y-md">
bordered <slot name="information"></slot>
:noPadding="noPaddingTab" <slot name="person"></slot>
:class="{ <slot name="address" v-if="!noAddress">
'q-my-md q-mr-md': $slots['person-card'], <FormAddress
'q-ma-md': !$slots['person-card'], dense
}" outlined
style="position: absolute; overflow-y: auto; inset: 0" separator
> prefix-id="default"
<div class="row q-col-gutter-y-md"> :employee="employee"
<slot name="information"></slot> :readonly="readonly"
<slot name="person"></slot> :disabledRule="disabledRule"
<slot name="address" v-if="!noAddress"> v-model:address="address"
<FormAddress v-model:addressEN="addressEN"
dense v-model:provinceId="provinceId"
outlined v-model:districtId="districtId"
separator v-model:subDistrictId="subDistrictId"
prefix-id="default" v-model:zipCode="zipCode"
:employee="employee" v-model:same-with-employer="sameWithEmployer"
:readonly="readonly" :title="titleFormAddress"
:disabledRule="disabledRule" :addressTitle="addressTitle || ''"
v-model:address="address" :addressTitleEN="addressTitleEN || ''"
v-model:addressEN="addressEN" v-if="!$slots.address"
v-model:provinceId="provinceId" />
v-model:districtId="districtId" </slot>
v-model:subDistrictId="subDistrictId" <slot name="qr-code"></slot>
v-model:zipCode="zipCode" <slot name="location"></slot>
v-model:same-with-employer="sameWithEmployer" <slot name="by-type"></slot>
:title="titleFormAddress" </div>
:addressTitle="addressTitle || ''"
:addressTitleEN="addressTitleEN || ''"
v-if="!$slots.address"
/>
</slot>
<slot name="qr-code"></slot>
<slot name="location"></slot>
<slot name="by-type"></slot>
</div>
</AppBox>
</div> </div>
</div> </div>
</div> </div>
@ -126,6 +116,5 @@ const employeeTab = defineModel<string>('employeeTab');
.content-tab { .content-tab {
border-top-left-radius: var(--radius-2); border-top-left-radius: var(--radius-2);
border-top-right-radius: var(--radius-2); border-top-right-radius: var(--radius-2);
position: relative;
} }
</style> </style>

30
src/components/DrawerInfo.vue
View file

@ -43,17 +43,7 @@ function reset() {
no-swipe-open no-swipe-open
@before-hide="reset" @before-hide="reset"
@hide="close" @hide="close"
:width=" :width="$q.screen.gt.xs ? windowSize * 0.85 : windowSize"
$q.screen.gt.xs
? $q.screen.gt.sm
? $q.screen.gt.md
? $q.screen.gt.lg
? 1400
: 1200
: 1000
: 700
: windowSize
"
v-model="drawerOpen" v-model="drawerOpen"
behavior="mobile" behavior="mobile"
side="right" side="right"
@ -70,7 +60,8 @@ function reset() {
class="column justify-between full-height" class="column justify-between full-height"
style="padding: 0; border-radius: var(--radius-2)" style="padding: 0; border-radius: var(--radius-2)"
> >
<div class="form-header col q-px-lg row items-center"> <!-- header -->
<div class="bordered-b q-pa-lg row items-center">
<div v-if="showEdit"> <div v-if="showEdit">
<div v-if="isEdit" class="row"> <div v-if="isEdit" class="row">
<q-btn <q-btn
@ -154,17 +145,18 @@ function reset() {
/> />
</div> </div>
<!-- body -->
<div <div
class="col-10 form-body full-width" class="col form-body full-width"
style="position: relative"
:class="`${bgColor || 'surface-0'} ${$q.dark.isActive && 'dark'}`" :class="`${bgColor || 'surface-0'} ${$q.dark.isActive && 'dark'}`"
> >
<slot></slot> <slot></slot>
<slot name="info"></slot> <slot name="info"></slot>
</div> </div>
<!-- footer -->
<div <div
class="form-footer col q-pr-lg row items-center justify-end q-gutter-x-lg" class="bordered-t q-pr-lg row items-center justify-end q-gutter-x-lg q-py-md"
> >
<q-btn <q-btn
v-if="isEdit" v-if="isEdit"
@ -214,10 +206,6 @@ function reset() {
} }
} }
.form-header {
border-bottom: 1px solid var(--border-color);
}
.form-body { .form-body {
--_body-bg: var(--sand-0); --_body-bg: var(--sand-0);
background-color: var(--_body-bg); background-color: var(--_body-bg);
@ -228,10 +216,6 @@ function reset() {
} }
} }
.form-footer {
border-top: 1px solid var(--border-color);
}
.branch-badge { .branch-badge {
--_branch-badge-fg: var(--green-8-hsl); --_branch-badge-fg: var(--green-8-hsl);
--_branch-badge-bg: var(--green-6-hsl); --_branch-badge-bg: var(--green-6-hsl);

20
src/pages/02_personnel-management/MainPage.vue
View file

@ -1469,17 +1469,16 @@ watch(
v-model:zipCode="formData.zipCode" v-model:zipCode="formData.zipCode"
> >
<template #person-card> <template #person-card>
<div class="q-ma-md"> <ProfileUpload
<ProfileUpload prefix-id="drawer-info-personnel"
prefix-id="drawer-info-personnel" v-model:url-profile="profileUrl"
v-model:url-profile="profileUrl" v-model:status-toggle="statusToggle"
v-model:status-toggle="statusToggle" v-model:profile-submit="profileSubmit"
v-model:profile-submit="profileSubmit" @input-file="inputFile.click()"
@input-file="inputFile.click()" @cancel-file="inputFile.value = ''"
@cancel-file="inputFile.value = ''" />
/>
<!-- <AppBox class="surface-1" style="padding: 0"> <!-- <AppBox class="surface-1" style="padding: 0">
<PersonCard <PersonCard
:can-edit-profile="infoDrawerEdit" :can-edit-profile="infoDrawerEdit"
:data="{ :data="{
@ -1498,7 +1497,6 @@ watch(
@edit-profile="inputFile.click()" @edit-profile="inputFile.click()"
/> />
</AppBox> --> </AppBox> -->
</div>
</template> </template>
<template #information> <template #information>
<FormInformation <FormInformation

178
src/pages/03_customer-management/MainPage.vue
View file

@ -2916,6 +2916,7 @@ watch(isMainPage, () => {
<CustomerInfoComponent <CustomerInfoComponent
:customer-type="customerType" :customer-type="customerType"
:customer-id="currentCustomerId" :customer-id="currentCustomerId"
v-model:mode-view="modeView"
@back=" @back="
() => { () => {
isMainPage = true; isMainPage = true;
@ -3598,38 +3599,34 @@ watch(isMainPage, () => {
<template #info> <template #info>
<InfoForm> <InfoForm>
<template #person-card> <template #person-card>
<div class="q-ma-md"> <UsersDetailCardComponent
<AppBox class="surface-1 bordered-b" style="padding: 0"> :can-edit-profile="infoDrawerEdit"
<UsersDetailCardComponent :hideButton="true"
:can-edit-profile="infoDrawerEdit" v-if="!!currentCustomer"
:hideButton="true" no-bg
v-if="!!currentCustomer" no-detail
no-bg no-hover
no-detail :color="
no-hover currentCustomer.customerType === 'CORP' ? 'purple' : 'green'
:color=" "
currentCustomer.customerType === 'CORP' ? 'purple' : 'green' :metadata="{
" id: '1',
:metadata="{ disabled: currentCustomer.status === 'ACTIVE',
id: '1', }"
disabled: currentCustomer.status === 'ACTIVE', :list="{
}" id: '1',
:list="{ type: currentCustomer.customerType,
id: '1', name: currentCustomer.customerName,
type: currentCustomer.customerType, imageUrl: currentCustomer.imageUrl,
name: currentCustomer.customerName, status: currentCustomer.status,
imageUrl: currentCustomer.imageUrl, code: 'HQ006',
status: currentCustomer.status, }"
code: 'HQ006', @edit-profile="
}" () => {
@edit-profile=" inputFile.click();
() => { }
inputFile.click(); "
} />
"
/>
</AppBox>
</div>
</template> </template>
<template #information> <template #information>
<BasicInformation <BasicInformation
@ -3823,43 +3820,39 @@ watch(isMainPage, () => {
<template #info> <template #info>
<InfoForm> <InfoForm>
<template #person-card> <template #person-card>
<div class="q-ma-md"> <UsersDetailCardComponent
<AppBox class="surface-1" style="padding: 0"> :hideButton="true"
<UsersDetailCardComponent v-if="!!currentCustomer"
:hideButton="true" no-bg
v-if="!!currentCustomer" no-detail
no-bg no-hover
no-detail :color="
no-hover currentCustomer.customerType === 'CORP' ? 'purple' : 'green'
:color=" "
currentCustomer.customerType === 'CORP' ? 'purple' : 'green' :metadata="{
" id: '1',
:metadata="{ disabled: currentCustomer.status === 'ACTIVE',
id: '1', }"
disabled: currentCustomer.status === 'ACTIVE', :list="{
}" id: '1',
:list="{ type: currentCustomer.customerType,
id: '1', name: currentCustomer.customerName,
type: currentCustomer.customerType, imageUrl: currentCustomer.imageUrl,
name: currentCustomer.customerName, status: currentCustomer.status,
imageUrl: currentCustomer.imageUrl, code: 'HQ006',
status: currentCustomer.status, }"
code: 'HQ006', />
}"
/>
</AppBox>
<div class="text-left q-pt-md" v-if="infoDrawerEdit"> <div class="text-left q-pt-md" v-if="infoDrawerEdit">
<q-toggle <q-toggle
id="toggle-status" id="toggle-status"
dense dense
size="md" size="md"
v-model="statusToggle" v-model="statusToggle"
padding="none" padding="none"
class="q-pr-md" class="q-pr-md"
/> />
<span>สถานะสาขา</span> <span>สถานะสาขา</span>
</div>
</div> </div>
</template> </template>
<template #information> <template #information>
@ -3888,8 +3881,8 @@ watch(isMainPage, () => {
<TabComponent <TabComponent
:stat-branch-no="statBranchNo" :stat-branch-no="statBranchNo"
prefix-id="drawer-info-customer-branch" prefix-id="drawer-info-customer-branch"
:edit="true" :edit="infoDrawerEdit"
:readonly="true" :readonly="!infoDrawerEdit"
v-model:customer-branch="formData.customerBranch" v-model:customer-branch="formData.customerBranch"
v-model:tab-index="indexTab" v-model:tab-index="indexTab"
> >
@ -4067,30 +4060,27 @@ watch(isMainPage, () => {
employee employee
> >
<template #person-card> <template #person-card>
<div class="q-pa-md full-height" style="overflow: hidden"> <PersonCard
<PersonCard :can-edit-profile="infoDrawerEmployeeEdit"
:can-edit-profile="infoDrawerEmployeeEdit" prefix-id="drawer-edit"
no-hover no-hover
no-action no-action
no-detail no-detail
prefix-id="drawer-edit" :data="{
:data="{ name: formDataEmployee.firstName + ' ' + formDataEmployee.lastName,
name: code: formDataEmployee.code,
formDataEmployee.firstName + ' ' + formDataEmployee.lastName, male: formDataEmployee.gender === 'male',
code: formDataEmployee.code, female: formDataEmployee.gender === 'female',
male: formDataEmployee.gender === 'male', img: profileUrl || undefined,
female: formDataEmployee.gender === 'female', }"
img: profileUrl || undefined, :list="infoEmployeePersonCard ? infoEmployeePersonCard : []"
}" :gridColumns="1"
:list="infoEmployeePersonCard ? infoEmployeePersonCard : []" @edit-profile="
:gridColumns="1" () => {
@edit-profile=" inputFile.click();
() => { }
inputFile.click(); "
} />
"
/>
</div>
</template> </template>
<template #information> <template #information>
<BasicInformation <BasicInformation