fix: include section creation code in SidePanelLayout component
This commit is contained in:
Shariq Ansari
parent
0092b8506d
commit
3cdd594da9
@ -1,228 +1,353 @@
|
|||||||
<template>
|
<template>
|
||||||
<FadedScrollableDiv
|
<div class="sections flex flex-col overflow-y-auto">
|
||||||
class="flex flex-col gap-1.5 overflow-y-auto"
|
<template v-for="(section, i) in _sections" :key="section.name">
|
||||||
:class="[isLastSection ? '' : 'max-h-[300px]']"
|
<div v-if="section.visible" class="section flex flex-col">
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-for="field in _fields"
|
|
||||||
:key="field.name"
|
|
||||||
:class="[field.hidden && 'hidden']"
|
|
||||||
class="section-field flex items-center gap-2 px-3 leading-5 first:mt-3"
|
|
||||||
>
|
|
||||||
<Tooltip :text="__(field.label)" :hoverDelay="1">
|
|
||||||
<div class="w-[35%] min-w-20 shrink-0 truncate text-sm text-ink-gray-5">
|
|
||||||
<span>{{ __(field.label) }}</span>
|
|
||||||
<span class="text-ink-red-3">{{ field.reqd ? ' *' : '' }}</span>
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
|
||||||
<div class="flex items-center justify-between w-[65%]">
|
|
||||||
<div
|
<div
|
||||||
class="grid min-h-[28px] flex-1 items-center overflow-hidden text-base"
|
v-if="i !== firstVisibleIndex()"
|
||||||
>
|
class="w-full section-border h-px border-t"
|
||||||
<div
|
/>
|
||||||
v-if="
|
<div class="p-3">
|
||||||
field.read_only && !['checkbox', 'dropdown'].includes(field.type)
|
<Section
|
||||||
"
|
labelClass="px-2 font-semibold"
|
||||||
class="flex h-7 cursor-pointer items-center px-2 py-1 text-ink-gray-5"
|
:label="section.label"
|
||||||
|
:opened="section.opened"
|
||||||
>
|
>
|
||||||
<Tooltip :text="__(field.tooltip)">
|
<template #actions>
|
||||||
<div>{{ data[field.name] }}</div>
|
<div v-if="section.contacts" class="pr-2">
|
||||||
</Tooltip>
|
<Link
|
||||||
</div>
|
value=""
|
||||||
<div v-else-if="field.type === 'dropdown'">
|
doctype="Contact"
|
||||||
<NestedPopover>
|
@change="(e) => addContact(e)"
|
||||||
<template #target="{ open }">
|
:onCreate="
|
||||||
<Button
|
(value, close) => {
|
||||||
:label="data[field.name]"
|
_contact = {
|
||||||
class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-surface-gray-2 px-2 py-1.5 text-base text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3"
|
first_name: value,
|
||||||
|
company_name: deal.data.organization,
|
||||||
|
}
|
||||||
|
showContactModal = true
|
||||||
|
close()
|
||||||
|
}
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<div v-if="data[field.name]" class="truncate">
|
<template #target="{ togglePopover }">
|
||||||
{{ data[field.name] }}
|
<Button
|
||||||
</div>
|
class="h-7 px-3"
|
||||||
<div
|
variant="ghost"
|
||||||
v-else
|
icon="plus"
|
||||||
class="text-base leading-5 text-ink-gray-4 truncate"
|
@click="togglePopover()"
|
||||||
>
|
|
||||||
{{ field.placeholder }}
|
|
||||||
</div>
|
|
||||||
<template #suffix>
|
|
||||||
<FeatherIcon
|
|
||||||
:name="open ? 'chevron-up' : 'chevron-down'"
|
|
||||||
class="h-4 text-ink-gray-5"
|
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</Button>
|
</Link>
|
||||||
</template>
|
</div>
|
||||||
<template #body>
|
<Button
|
||||||
<div
|
v-else-if="
|
||||||
class="my-2 p-1.5 min-w-40 space-y-1.5 divide-y divide-outline-gray-1 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
|
((!section.contacts && i == 1) || i == 0) && isManager()
|
||||||
|
"
|
||||||
|
variant="ghost"
|
||||||
|
class="w-7 mr-2"
|
||||||
|
@click="showSidePanelModal = true"
|
||||||
|
>
|
||||||
|
<EditIcon class="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
<slot v-bind="{ section }">
|
||||||
|
<FadedScrollableDiv
|
||||||
|
v-if="section.columns?.[0].fields.length"
|
||||||
|
class="column flex flex-col gap-1.5 overflow-y-auto"
|
||||||
|
>
|
||||||
|
<template
|
||||||
|
v-for="field in section.columns[0].fields || []"
|
||||||
|
:key="field.name"
|
||||||
>
|
>
|
||||||
<div>
|
<div
|
||||||
<DropdownItem
|
v-if="field.visible"
|
||||||
v-if="field.options?.length"
|
class="field flex items-center gap-2 px-3 leading-5 first:mt-3"
|
||||||
v-for="option in field.options"
|
>
|
||||||
:key="option.name"
|
<Tooltip :text="__(field.label)" :hoverDelay="1">
|
||||||
:option="option"
|
<div
|
||||||
/>
|
class="w-[35%] min-w-20 shrink-0 truncate text-sm text-ink-gray-5"
|
||||||
<div v-else>
|
>
|
||||||
<div class="p-1.5 px-7 text-base text-ink-gray-4">
|
<span>{{ __(field.label) }}</span>
|
||||||
{{ __('No {0} Available', [field.label]) }}
|
<span class="text-ink-red-3">{{
|
||||||
|
field.reqd ? ' *' : ''
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
<div class="flex items-center justify-between w-[65%]">
|
||||||
|
<div
|
||||||
|
class="grid min-h-[28px] flex-1 items-center overflow-hidden text-base"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="
|
||||||
|
field.read_only &&
|
||||||
|
!['checkbox', 'dropdown'].includes(field.type)
|
||||||
|
"
|
||||||
|
class="flex h-7 cursor-pointer items-center px-2 py-1 text-ink-gray-5"
|
||||||
|
>
|
||||||
|
<Tooltip :text="__(field.tooltip)">
|
||||||
|
<div>{{ data[field.name] }}</div>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="field.type === 'dropdown'">
|
||||||
|
<NestedPopover>
|
||||||
|
<template #target="{ open }">
|
||||||
|
<Button
|
||||||
|
:label="data[field.name]"
|
||||||
|
class="dropdown-button flex w-full items-center justify-between rounded border border-gray-100 bg-surface-gray-2 px-2 py-1.5 text-base text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-outline-gray-modals hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:outline-none focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3"
|
||||||
|
>
|
||||||
|
<div v-if="data[field.name]" class="truncate">
|
||||||
|
{{ data[field.name] }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
class="text-base leading-5 text-ink-gray-4 truncate"
|
||||||
|
>
|
||||||
|
{{ field.placeholder }}
|
||||||
|
</div>
|
||||||
|
<template #suffix>
|
||||||
|
<FeatherIcon
|
||||||
|
:name="open ? 'chevron-up' : 'chevron-down'"
|
||||||
|
class="h-4 text-ink-gray-5"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
<template #body>
|
||||||
|
<div
|
||||||
|
class="my-2 p-1.5 min-w-40 space-y-1.5 divide-y divide-outline-gray-1 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<DropdownItem
|
||||||
|
v-if="field.options?.length"
|
||||||
|
v-for="option in field.options"
|
||||||
|
:key="option.name"
|
||||||
|
:option="option"
|
||||||
|
/>
|
||||||
|
<div v-else>
|
||||||
|
<div
|
||||||
|
class="p-1.5 px-7 text-base text-ink-gray-4"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
__('No {0} Available', [field.label])
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pt-1.5">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
class="w-full !justify-start"
|
||||||
|
:label="__('Create New')"
|
||||||
|
@click="field.create()"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<FeatherIcon name="plus" class="h-4" />
|
||||||
|
</template>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</NestedPopover>
|
||||||
|
</div>
|
||||||
|
<FormControl
|
||||||
|
v-else-if="field.type == 'checkbox'"
|
||||||
|
class="form-control"
|
||||||
|
:type="field.type"
|
||||||
|
v-model="data[field.name]"
|
||||||
|
@change.stop="
|
||||||
|
emit('update', field.name, $event.target.checked)
|
||||||
|
"
|
||||||
|
:disabled="Boolean(field.read_only)"
|
||||||
|
/>
|
||||||
|
<FormControl
|
||||||
|
v-else-if="
|
||||||
|
[
|
||||||
|
'email',
|
||||||
|
'number',
|
||||||
|
'password',
|
||||||
|
'textarea',
|
||||||
|
].includes(field.type)
|
||||||
|
"
|
||||||
|
class="form-control"
|
||||||
|
:type="field.type"
|
||||||
|
:value="data[field.name]"
|
||||||
|
:placeholder="field.placeholder"
|
||||||
|
:debounce="500"
|
||||||
|
@change.stop="
|
||||||
|
emit('update', field.name, $event.target.value)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<FormControl
|
||||||
|
v-else-if="field.type === 'select'"
|
||||||
|
class="form-control cursor-pointer [&_select]:cursor-pointer truncate"
|
||||||
|
type="select"
|
||||||
|
v-model="data[field.name]"
|
||||||
|
:options="field.options"
|
||||||
|
:placeholder="field.placeholder"
|
||||||
|
@change.stop="
|
||||||
|
emit('update', field.name, $event.target.value)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<Link
|
||||||
|
v-else-if="
|
||||||
|
['lead_owner', 'deal_owner'].includes(field.name)
|
||||||
|
"
|
||||||
|
class="form-control"
|
||||||
|
:value="
|
||||||
|
data[field.name] &&
|
||||||
|
getUser(data[field.name]).full_name
|
||||||
|
"
|
||||||
|
doctype="User"
|
||||||
|
:filters="field.filters"
|
||||||
|
@change="(data) => emit('update', field.name, data)"
|
||||||
|
:placeholder="'Select' + ' ' + field.label + '...'"
|
||||||
|
:hideMe="true"
|
||||||
|
>
|
||||||
|
<template v-if="data[field.name]" #prefix>
|
||||||
|
<UserAvatar
|
||||||
|
class="mr-1.5"
|
||||||
|
:user="data[field.name]"
|
||||||
|
size="sm"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template #item-prefix="{ option }">
|
||||||
|
<UserAvatar
|
||||||
|
class="mr-1.5"
|
||||||
|
:user="option.value"
|
||||||
|
size="sm"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template #item-label="{ option }">
|
||||||
|
<Tooltip :text="option.value">
|
||||||
|
<div class="cursor-pointer">
|
||||||
|
{{ getUser(option.value).full_name }}
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
</template>
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
v-else-if="field.type === 'link'"
|
||||||
|
class="form-control select-text"
|
||||||
|
:value="data[field.name]"
|
||||||
|
:doctype="field.doctype"
|
||||||
|
:filters="field.filters"
|
||||||
|
:placeholder="field.placeholder"
|
||||||
|
@change="(data) => emit('update', field.name, data)"
|
||||||
|
:onCreate="field.create"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-else-if="field.type === 'datetime'"
|
||||||
|
class="form-control"
|
||||||
|
>
|
||||||
|
<DateTimePicker
|
||||||
|
icon-left=""
|
||||||
|
:value="data[field.name]"
|
||||||
|
:formatter="
|
||||||
|
(date) => getFormat(date, '', true, true)
|
||||||
|
"
|
||||||
|
:placeholder="field.placeholder"
|
||||||
|
placement="left-start"
|
||||||
|
@change="(data) => emit('update', field.name, data)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else-if="field.type === 'date'"
|
||||||
|
class="form-control"
|
||||||
|
>
|
||||||
|
<DatePicker
|
||||||
|
icon-left=""
|
||||||
|
:value="data[field.name]"
|
||||||
|
:formatter="(date) => getFormat(date, '', true)"
|
||||||
|
:placeholder="field.placeholder"
|
||||||
|
placement="left-start"
|
||||||
|
@change="(data) => emit('update', field.name, data)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<FormControl
|
||||||
|
v-else-if="field.type === 'percent'"
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
:value="getFormattedPercent(field.name, data)"
|
||||||
|
:placeholder="field.placeholder"
|
||||||
|
:debounce="500"
|
||||||
|
@change.stop="
|
||||||
|
emit('update', field.name, flt($event.target.value))
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<FormControl
|
||||||
|
v-else-if="field.type === 'float'"
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
:value="getFormattedFloat(field.name, data)"
|
||||||
|
:placeholder="field.placeholder"
|
||||||
|
:debounce="500"
|
||||||
|
@change.stop="
|
||||||
|
emit('update', field.name, flt($event.target.value))
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<FormControl
|
||||||
|
v-else-if="field.type === 'currency'"
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
:value="getFormattedCurrency(field.name, data)"
|
||||||
|
:placeholder="field.placeholder"
|
||||||
|
:debounce="500"
|
||||||
|
@change.stop="
|
||||||
|
emit('update', field.name, flt($event.target.value))
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<FormControl
|
||||||
|
v-else
|
||||||
|
class="form-control"
|
||||||
|
type="text"
|
||||||
|
:value="data[field.name]"
|
||||||
|
:placeholder="field.placeholder"
|
||||||
|
:debounce="500"
|
||||||
|
@change.stop="
|
||||||
|
emit('update', field.name, $event.target.value)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="ml-1">
|
||||||
|
<ArrowUpRightIcon
|
||||||
|
v-if="
|
||||||
|
field.type === 'link' &&
|
||||||
|
field.link &&
|
||||||
|
data[field.name]
|
||||||
|
"
|
||||||
|
class="h-4 w-4 shrink-0 cursor-pointer text-ink-gray-5 hover:text-ink-gray-8"
|
||||||
|
@click.stop="field.link(data[field.name])"
|
||||||
|
/>
|
||||||
|
<EditIcon
|
||||||
|
v-if="
|
||||||
|
field.type === 'link' &&
|
||||||
|
field.edit &&
|
||||||
|
data[field.name]
|
||||||
|
"
|
||||||
|
class="size-3.5 shrink-0 cursor-pointer text-ink-gray-5 hover:text-ink-gray-8"
|
||||||
|
@click.stop="field.edit(data[field.name])"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pt-1.5">
|
</template>
|
||||||
<Button
|
</FadedScrollableDiv>
|
||||||
variant="ghost"
|
</slot>
|
||||||
class="w-full !justify-start"
|
</Section>
|
||||||
:label="__('Create New')"
|
|
||||||
@click="field.create()"
|
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<FeatherIcon name="plus" class="h-4" />
|
|
||||||
</template>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</NestedPopover>
|
|
||||||
</div>
|
|
||||||
<FormControl
|
|
||||||
v-else-if="field.type == 'checkbox'"
|
|
||||||
class="form-control"
|
|
||||||
:type="field.type"
|
|
||||||
v-model="data[field.name]"
|
|
||||||
@change.stop="emit('update', field.name, $event.target.checked)"
|
|
||||||
:disabled="Boolean(field.read_only)"
|
|
||||||
/>
|
|
||||||
<FormControl
|
|
||||||
v-else-if="
|
|
||||||
['email', 'number', 'password', 'textarea'].includes(field.type)
|
|
||||||
"
|
|
||||||
class="form-control"
|
|
||||||
:type="field.type"
|
|
||||||
:value="data[field.name]"
|
|
||||||
:placeholder="field.placeholder"
|
|
||||||
:debounce="500"
|
|
||||||
@change.stop="emit('update', field.name, $event.target.value)"
|
|
||||||
/>
|
|
||||||
<FormControl
|
|
||||||
v-else-if="field.type === 'select'"
|
|
||||||
class="form-control cursor-pointer [&_select]:cursor-pointer truncate"
|
|
||||||
type="select"
|
|
||||||
v-model="data[field.name]"
|
|
||||||
:options="field.options"
|
|
||||||
:placeholder="field.placeholder"
|
|
||||||
@change.stop="emit('update', field.name, $event.target.value)"
|
|
||||||
/>
|
|
||||||
<Link
|
|
||||||
v-else-if="['lead_owner', 'deal_owner'].includes(field.name)"
|
|
||||||
class="form-control"
|
|
||||||
:value="data[field.name] && getUser(data[field.name]).full_name"
|
|
||||||
doctype="User"
|
|
||||||
:filters="field.filters"
|
|
||||||
@change="(data) => emit('update', field.name, data)"
|
|
||||||
:placeholder="'Select' + ' ' + field.label + '...'"
|
|
||||||
:hideMe="true"
|
|
||||||
>
|
|
||||||
<template v-if="data[field.name]" #prefix>
|
|
||||||
<UserAvatar class="mr-1.5" :user="data[field.name]" size="sm" />
|
|
||||||
</template>
|
|
||||||
<template #item-prefix="{ option }">
|
|
||||||
<UserAvatar class="mr-1.5" :user="option.value" size="sm" />
|
|
||||||
</template>
|
|
||||||
<template #item-label="{ option }">
|
|
||||||
<Tooltip :text="option.value">
|
|
||||||
<div class="cursor-pointer">
|
|
||||||
{{ getUser(option.value).full_name }}
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
|
||||||
</template>
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
v-else-if="field.type === 'link'"
|
|
||||||
class="form-control select-text"
|
|
||||||
:value="data[field.name]"
|
|
||||||
:doctype="field.doctype"
|
|
||||||
:filters="field.filters"
|
|
||||||
:placeholder="field.placeholder"
|
|
||||||
@change="(data) => emit('update', field.name, data)"
|
|
||||||
:onCreate="field.create"
|
|
||||||
/>
|
|
||||||
<div v-else-if="field.type === 'datetime'" class="form-control">
|
|
||||||
<DateTimePicker
|
|
||||||
icon-left=""
|
|
||||||
:value="data[field.name]"
|
|
||||||
:formatter="(date) => getFormat(date, '', true, true)"
|
|
||||||
:placeholder="field.placeholder"
|
|
||||||
placement="left-start"
|
|
||||||
@change="(data) => emit('update', field.name, data)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="field.type === 'date'" class="form-control">
|
|
||||||
<DatePicker
|
|
||||||
icon-left=""
|
|
||||||
:value="data[field.name]"
|
|
||||||
:formatter="(date) => getFormat(date, '', true)"
|
|
||||||
:placeholder="field.placeholder"
|
|
||||||
placement="left-start"
|
|
||||||
@change="(data) => emit('update', field.name, data)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<FormControl
|
|
||||||
v-else-if="field.type === 'percent'"
|
|
||||||
class="form-control"
|
|
||||||
type="text"
|
|
||||||
:value="getFormattedPercent(field.name, data)"
|
|
||||||
:placeholder="field.placeholder"
|
|
||||||
:debounce="500"
|
|
||||||
@change.stop="emit('update', field.name, flt($event.target.value))"
|
|
||||||
/>
|
|
||||||
<FormControl
|
|
||||||
v-else-if="field.type === 'float'"
|
|
||||||
class="form-control"
|
|
||||||
type="text"
|
|
||||||
:value="getFormattedFloat(field.name, data)"
|
|
||||||
:placeholder="field.placeholder"
|
|
||||||
:debounce="500"
|
|
||||||
@change.stop="emit('update', field.name, flt($event.target.value))"
|
|
||||||
/>
|
|
||||||
<FormControl
|
|
||||||
v-else-if="field.type === 'currency'"
|
|
||||||
class="form-control"
|
|
||||||
type="text"
|
|
||||||
:value="getFormattedCurrency(field.name, data)"
|
|
||||||
:placeholder="field.placeholder"
|
|
||||||
:debounce="500"
|
|
||||||
@change.stop="emit('update', field.name, flt($event.target.value))"
|
|
||||||
/>
|
|
||||||
<FormControl
|
|
||||||
v-else
|
|
||||||
class="form-control"
|
|
||||||
type="text"
|
|
||||||
:value="data[field.name]"
|
|
||||||
:placeholder="field.placeholder"
|
|
||||||
:debounce="500"
|
|
||||||
@change.stop="emit('update', field.name, $event.target.value)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="ml-1">
|
|
||||||
<ArrowUpRightIcon
|
|
||||||
v-if="field.type === 'link' && field.link && data[field.name]"
|
|
||||||
class="h-4 w-4 shrink-0 cursor-pointer text-ink-gray-5 hover:text-ink-gray-8"
|
|
||||||
@click.stop="field.link(data[field.name])"
|
|
||||||
/>
|
|
||||||
<EditIcon
|
|
||||||
v-if="field.type === 'link' && field.edit && data[field.name]"
|
|
||||||
class="size-3.5 shrink-0 cursor-pointer text-ink-gray-5 hover:text-ink-gray-8"
|
|
||||||
@click.stop="field.edit(data[field.name])"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</FadedScrollableDiv>
|
</div>
|
||||||
|
<SidePanelModal
|
||||||
|
v-if="showSidePanelModal"
|
||||||
|
v-model="showSidePanelModal"
|
||||||
|
:doctype="doctype"
|
||||||
|
@reload="() => sections.reload()"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import Section from '@/components/Section.vue'
|
||||||
import NestedPopover from '@/components/NestedPopover.vue'
|
import NestedPopover from '@/components/NestedPopover.vue'
|
||||||
import DropdownItem from '@/components/DropdownItem.vue'
|
import DropdownItem from '@/components/DropdownItem.vue'
|
||||||
import FadedScrollableDiv from '@/components/FadedScrollableDiv.vue'
|
import FadedScrollableDiv from '@/components/FadedScrollableDiv.vue'
|
||||||
@ -230,51 +355,78 @@ import ArrowUpRightIcon from '@/components/Icons/ArrowUpRightIcon.vue'
|
|||||||
import EditIcon from '@/components/Icons/EditIcon.vue'
|
import EditIcon from '@/components/Icons/EditIcon.vue'
|
||||||
import Link from '@/components/Controls/Link.vue'
|
import Link from '@/components/Controls/Link.vue'
|
||||||
import UserAvatar from '@/components/UserAvatar.vue'
|
import UserAvatar from '@/components/UserAvatar.vue'
|
||||||
|
import SidePanelModal from '@/components/Modals/SidePanelModal.vue'
|
||||||
import { getMeta } from '@/stores/meta'
|
import { getMeta } from '@/stores/meta'
|
||||||
import { usersStore } from '@/stores/users'
|
import { usersStore } from '@/stores/users'
|
||||||
import { getFormat, evaluateDependsOnValue } from '@/utils'
|
import { getFormat, evaluateDependsOnValue } from '@/utils'
|
||||||
import { flt } from '@/utils/numberFormat.js'
|
import { flt } from '@/utils/numberFormat.js'
|
||||||
import { Tooltip, DateTimePicker, DatePicker } from 'frappe-ui'
|
import { Tooltip, DateTimePicker, DatePicker } from 'frappe-ui'
|
||||||
import { computed } from 'vue'
|
import { ref, computed } from 'vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
fields: {
|
sections: {
|
||||||
type: Object,
|
type: Object,
|
||||||
},
|
},
|
||||||
doctype: {
|
doctype: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'CRM Lead',
|
default: 'CRM Lead',
|
||||||
},
|
},
|
||||||
isLastSection: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
|
const { getFormattedPercent, getFormattedFloat, getFormattedCurrency } =
|
||||||
getMeta(props.doctype)
|
getMeta(props.doctype)
|
||||||
const { getUser } = usersStore()
|
const { isManager, getUser } = usersStore()
|
||||||
|
|
||||||
const emit = defineEmits(['update'])
|
const emit = defineEmits(['update'])
|
||||||
|
|
||||||
const data = defineModel()
|
const data = defineModel()
|
||||||
|
const showSidePanelModal = ref(false)
|
||||||
|
|
||||||
const _fields = computed(() => {
|
const _sections = computed(() => {
|
||||||
let all_fields = []
|
if (!props.sections?.data?.length) return []
|
||||||
props.fields?.forEach((field) => {
|
return props.sections.data.map((section) => {
|
||||||
let df = field?.all_properties
|
if (section.columns?.length) {
|
||||||
if (df?.depends_on && !evaluateDependsOnValue(df.depends_on, data.value)) {
|
section.columns[0].fields = section.columns[0].fields.map((field) => {
|
||||||
field.hidden = true
|
let df = field?.all_properties || {}
|
||||||
|
let _field = {
|
||||||
|
...field,
|
||||||
|
depends_on: df.depends_on,
|
||||||
|
mandatory_depends_on: df.mandatory_depends_on,
|
||||||
|
display_via_depends_on: evaluateDependsOnValue(
|
||||||
|
df.depends_on,
|
||||||
|
data.value,
|
||||||
|
),
|
||||||
|
mandatory_via_depends_on: evaluateDependsOnValue(
|
||||||
|
df.mandatory_depends_on,
|
||||||
|
data.value,
|
||||||
|
),
|
||||||
|
filters: df.link_filters && JSON.parse(df.link_filters),
|
||||||
|
placeholder: field.placeholder || field.label,
|
||||||
|
}
|
||||||
|
_field.visible = isFieldVisible(_field)
|
||||||
|
return _field
|
||||||
|
})
|
||||||
}
|
}
|
||||||
all_fields.push({
|
section.visible =
|
||||||
...field,
|
section.isContactsSection ||
|
||||||
filters: df?.link_filters && JSON.parse(df.link_filters),
|
section.columns[0].fields.filter((f) => f.visible).length
|
||||||
placeholder: field.placeholder || field.label,
|
return section
|
||||||
})
|
|
||||||
})
|
})
|
||||||
return all_fields
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
function isFieldVisible(field) {
|
||||||
|
return (
|
||||||
|
(field.type == 'Check' ||
|
||||||
|
(field.read_only && data.value[field.name]) ||
|
||||||
|
!field.read_only) &&
|
||||||
|
(!field.depends_on || field.display_via_depends_on) &&
|
||||||
|
!field.hidden
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function firstVisibleIndex() {
|
||||||
|
return _sections.value.findIndex((section) => section.visible)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@ -309,4 +461,11 @@ const _fields = computed(() => {
|
|||||||
color: white;
|
color: white;
|
||||||
width: 0;
|
width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sections .section .column {
|
||||||
|
max-height: 300px;
|
||||||
|
}
|
||||||
|
.sections .section:last-of-type .column {
|
||||||
|
max-height: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user