fix: Drawer info layout

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

View file

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

View file

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