fix: made lead layout changes on deal
This commit is contained in:
Shariq Ansari
parent
b538a2ab62
commit
ef43810298
@ -35,313 +35,318 @@
|
|||||||
</Dropdown>
|
</Dropdown>
|
||||||
</template>
|
</template>
|
||||||
</LayoutHeader>
|
</LayoutHeader>
|
||||||
<TabGroup v-slot="{ selectedIndex }" v-if="deal.data" @change="onTabChange">
|
<div class="flex h-full overflow-hidden">
|
||||||
<TabList class="flex items-center gap-6 border-b pl-5 relative">
|
<TabGroup v-slot="{ selectedIndex }" v-if="deal.data" @change="onTabChange">
|
||||||
<Tab
|
<div class="flex flex-col flex-1">
|
||||||
ref="tabRef"
|
<TabList class="flex items-center gap-6 border-b pl-5 relative">
|
||||||
as="template"
|
<Tab
|
||||||
v-for="tab in tabs"
|
ref="tabRef"
|
||||||
:key="tab.label"
|
as="template"
|
||||||
v-slot="{ selected }"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="flex items-center gap-2 py-[9px] -mb-[1px] text-base text-gray-600 border-b border-transparent hover:text-gray-900 hover:border-gray-400 transition-all duration-300 ease-in-out"
|
|
||||||
:class="{ 'text-gray-900': selected }"
|
|
||||||
>
|
|
||||||
<component v-if="tab.icon" :is="tab.icon" class="h-5" />
|
|
||||||
{{ tab.label }}
|
|
||||||
</button>
|
|
||||||
</Tab>
|
|
||||||
<div
|
|
||||||
ref="indicator"
|
|
||||||
class="h-[1px] bg-gray-900 w-[82px] absolute -bottom-[1px]"
|
|
||||||
:style="{ left: `${indicatorLeftValue}px` }"
|
|
||||||
/>
|
|
||||||
</TabList>
|
|
||||||
<div class="flex h-full overflow-hidden">
|
|
||||||
<div class="flex-1 flex flex-col">
|
|
||||||
<TabPanels class="flex flex-1 overflow-hidden">
|
|
||||||
<TabPanel
|
|
||||||
class="flex-1 flex flex-col overflow-y-auto"
|
|
||||||
v-for="tab in tabs"
|
v-for="tab in tabs"
|
||||||
:key="tab.label"
|
:key="tab.label"
|
||||||
|
v-slot="{ selected }"
|
||||||
>
|
>
|
||||||
<Activities
|
<button
|
||||||
:title="tab.activityTitle"
|
class="flex items-center gap-2 py-2.5 -mb-[1px] text-base text-gray-600 border-b border-transparent hover:text-gray-900 hover:border-gray-400 transition-all duration-300 ease-in-out"
|
||||||
:activities="tab.content"
|
:class="{ 'text-gray-900': selected }"
|
||||||
@makeCall="makeCall(deal.data.mobile_no)"
|
|
||||||
@makeNote="(e) => showNote(e)"
|
|
||||||
@deleteNote="(e) => deleteNote(e)"
|
|
||||||
@setFocusOnEmail="() => $refs.sendEmailRef.el.click()"
|
|
||||||
/>
|
|
||||||
</TabPanel>
|
|
||||||
</TabPanels>
|
|
||||||
<CommunicationArea
|
|
||||||
ref="sendEmailRef"
|
|
||||||
v-if="[0, 1].includes(selectedIndex)"
|
|
||||||
v-model="deal"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col justify-between border-l w-[370px]">
|
|
||||||
<FileUploader @success="changeDealImage" :validateFile="validateFile">
|
|
||||||
<template #default="{ openFileSelector, error }">
|
|
||||||
<div
|
|
||||||
class="flex flex-col gap-3 pb-4 p-5 items-center justify-center border-b"
|
|
||||||
>
|
>
|
||||||
|
<component v-if="tab.icon" :is="tab.icon" class="h-5" />
|
||||||
|
{{ tab.label }}
|
||||||
|
</button>
|
||||||
|
</Tab>
|
||||||
|
<div
|
||||||
|
ref="indicator"
|
||||||
|
class="h-[1px] bg-gray-900 w-[82px] absolute -bottom-[1px]"
|
||||||
|
:style="{ left: `${indicatorLeftValue}px` }"
|
||||||
|
/>
|
||||||
|
</TabList>
|
||||||
|
<div class="flex flex-col h-full overflow-auto">
|
||||||
|
<TabPanels class="flex flex-1 overflow-hidden">
|
||||||
|
<TabPanel
|
||||||
|
class="flex-1 flex flex-col overflow-y-auto"
|
||||||
|
v-for="tab in tabs"
|
||||||
|
:key="tab.label"
|
||||||
|
>
|
||||||
|
<Activities
|
||||||
|
:title="tab.activityTitle"
|
||||||
|
:activities="tab.content"
|
||||||
|
@makeCall="makeCall(deal.data.mobile_no)"
|
||||||
|
@makeNote="(e) => showNote(e)"
|
||||||
|
@deleteNote="(e) => deleteNote(e)"
|
||||||
|
@setFocusOnEmail="() => $refs.sendEmailRef.el.click()"
|
||||||
|
/>
|
||||||
|
</TabPanel>
|
||||||
|
</TabPanels>
|
||||||
|
<CommunicationArea
|
||||||
|
ref="sendEmailRef"
|
||||||
|
v-if="[0, 1].includes(selectedIndex)"
|
||||||
|
v-model="deal"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabGroup>
|
||||||
|
<div class="flex flex-col justify-between border-l w-[352px]">
|
||||||
|
<div
|
||||||
|
class="flex items-center border-b px-5 py-2.5 h-[41px] font-semibold text-lg"
|
||||||
|
>
|
||||||
|
About this deal
|
||||||
|
</div>
|
||||||
|
<FileUploader @success="changeDealImage" :validateFile="validateFile">
|
||||||
|
<template #default="{ openFileSelector, error }">
|
||||||
|
<div class="flex gap-5 items-center justify-start p-5 border-b">
|
||||||
|
<div class="relative w-[88px] h-[88px] group">
|
||||||
<Avatar
|
<Avatar
|
||||||
size="3xl"
|
size="3xl"
|
||||||
shape="square"
|
class="w-[88px] h-[88px]"
|
||||||
:label="deal.data.organization_name"
|
:label="deal.data.organization_name"
|
||||||
:image="deal.data.organization_logo"
|
:image="deal.data.organization_logo"
|
||||||
/>
|
/>
|
||||||
<ErrorMessage :message="error" />
|
<Dropdown
|
||||||
|
:options="[
|
||||||
|
{
|
||||||
|
icon: 'upload',
|
||||||
|
label: deal.data.organization_logo
|
||||||
|
? 'Change image'
|
||||||
|
: 'Upload image',
|
||||||
|
onClick: openFileSelector,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'trash-2',
|
||||||
|
label: 'Remove image',
|
||||||
|
onClick: () => {
|
||||||
|
deal.data.organization_logo = ''
|
||||||
|
updateDeal('organization_logo', '')
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
class="!absolute bottom-0 left-0 right-0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="absolute bottom-0 left-0 right-0 rounded-b-full z-1 h-11 flex items-center justify-center pt-3 bg-black bg-opacity-40 cursor-pointer opacity-0 group-hover:opacity-100 duration-300 ease-in-out"
|
||||||
|
style="
|
||||||
|
-webkit-clip-path: inset(12px 0 0 0);
|
||||||
|
clip-path: inset(12px 0 0 0);
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<CameraIcon class="h-6 w-6 text-white cursor-pointer" />
|
||||||
|
</div>
|
||||||
|
</Dropdown>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-2.5">
|
||||||
<div class="font-medium text-2xl">
|
<div class="font-medium text-2xl">
|
||||||
{{ deal.data.organization_name }}
|
{{ deal.data.organization_name }}
|
||||||
</div>
|
</div>
|
||||||
<div class="flex gap-3">
|
<div class="flex gap-1.5">
|
||||||
<Tooltip text="Make a call...">
|
<Tooltip text="Make a call...">
|
||||||
<Button
|
<Button
|
||||||
class="rounded-full h-8 w-8"
|
class="h-7 w-7"
|
||||||
@click="() => makeCall(deal.data.mobile_no)"
|
@click="() => makeCall(deal.data.mobile_no)"
|
||||||
>
|
>
|
||||||
<PhoneIcon class="h-4 w-4" />
|
<PhoneIcon class="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Button class="rounded-full h-8 w-8">
|
<Button class="h-7 w-7">
|
||||||
<EmailIcon class="h-4 w-4" />
|
<EmailIcon class="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
<Tooltip text="Go to website...">
|
<Tooltip text="Go to website...">
|
||||||
<Button
|
<Button class="h-7 w-7">
|
||||||
icon="link"
|
<LinkIcon
|
||||||
@click="openWebsite(deal.data.website)"
|
class="h-4 w-4"
|
||||||
class="rounded-full h-8 w-8"
|
@click="openWebsite(deal.data.website)"
|
||||||
/>
|
/>
|
||||||
|
</Button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Dropdown
|
|
||||||
:options="[
|
|
||||||
{
|
|
||||||
icon: 'upload',
|
|
||||||
label: deal.data.organization_logo
|
|
||||||
? 'Change image'
|
|
||||||
: 'Upload image',
|
|
||||||
onClick: openFileSelector,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: 'trash-2',
|
|
||||||
label: 'Remove image',
|
|
||||||
onClick: () => {
|
|
||||||
deal.data.organization_logo = ''
|
|
||||||
updateDeal('organization_logo', '')
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
<Button icon="more-horizontal" class="rounded-full h-8 w-8" />
|
|
||||||
</Dropdown>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<ErrorMessage :message="error" />
|
||||||
</template>
|
|
||||||
</FileUploader>
|
|
||||||
<div class="flex-1 flex flex-col justify-between overflow-hidden">
|
|
||||||
<div class="flex flex-col gap-6 p-3 overflow-y-auto">
|
|
||||||
<div
|
|
||||||
v-for="section in detailSections"
|
|
||||||
:key="section.label"
|
|
||||||
class="flex flex-col"
|
|
||||||
>
|
|
||||||
<Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
|
|
||||||
<div
|
|
||||||
class="flex items-center gap-2 text-base font-semibold leading-5 pl-2 pr-3 cursor-pointer max-w-fit"
|
|
||||||
@click="toggle()"
|
|
||||||
>
|
|
||||||
<FeatherIcon
|
|
||||||
name="chevron-right"
|
|
||||||
class="h-4 text-gray-600 transition-all duration-300 ease-in-out"
|
|
||||||
:class="{ 'rotate-90': opened }"
|
|
||||||
/>
|
|
||||||
{{ section.label }}
|
|
||||||
</div>
|
|
||||||
<transition
|
|
||||||
enter-active-class="duration-300 ease-in"
|
|
||||||
leave-active-class="duration-300 ease-[cubic-bezier(0, 1, 0.5, 1)]"
|
|
||||||
enter-to-class="max-h-[200px] overflow-hidden"
|
|
||||||
leave-from-class="max-h-[200px] overflow-hidden"
|
|
||||||
enter-from-class="max-h-0 overflow-hidden"
|
|
||||||
leave-to-class="max-h-0 overflow-hidden"
|
|
||||||
>
|
|
||||||
<div v-if="opened" class="flex flex-col gap-1.5">
|
|
||||||
<div
|
|
||||||
v-for="field in section.fields"
|
|
||||||
:key="field.label"
|
|
||||||
class="flex items-center px-3 gap-2 text-base leading-5 first:mt-3"
|
|
||||||
>
|
|
||||||
<div class="text-gray-600 w-[106px]">
|
|
||||||
{{ field.label }}
|
|
||||||
</div>
|
|
||||||
<div class="flex-1">
|
|
||||||
<FormControl
|
|
||||||
v-if="field.type === 'select'"
|
|
||||||
type="select"
|
|
||||||
:options="field.options"
|
|
||||||
:value="deal.data[field.name]"
|
|
||||||
@change.stop="
|
|
||||||
updateDeal(field.name, $event.target.value)
|
|
||||||
"
|
|
||||||
:debounce="500"
|
|
||||||
class="form-control cursor-pointer [&_select]:cursor-pointer"
|
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<IndicatorIcon
|
|
||||||
:class="dealStatuses[deal.data[field.name]].color"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</FormControl>
|
|
||||||
<FormControl
|
|
||||||
v-else-if="field.type === 'email'"
|
|
||||||
type="email"
|
|
||||||
class="form-control"
|
|
||||||
:value="deal.data[field.name]"
|
|
||||||
@change.stop="
|
|
||||||
updateDeal(field.name, $event.target.value)
|
|
||||||
"
|
|
||||||
:debounce="500"
|
|
||||||
/>
|
|
||||||
<Autocomplete
|
|
||||||
v-else-if="field.type === 'link'"
|
|
||||||
:value="deal.data[field.name]"
|
|
||||||
:options="field.options"
|
|
||||||
@change="(e) => field.change(e)"
|
|
||||||
:placeholder="field.placeholder"
|
|
||||||
class="form-control"
|
|
||||||
/>
|
|
||||||
<Autocomplete
|
|
||||||
v-else-if="field.type === 'user'"
|
|
||||||
:options="activeAgents"
|
|
||||||
:value="getUser(deal.data[field.name]).full_name"
|
|
||||||
@change="
|
|
||||||
(option) => updateAssignedAgent(option.email)
|
|
||||||
"
|
|
||||||
class="form-control"
|
|
||||||
:placeholder="deal.placeholder"
|
|
||||||
>
|
|
||||||
<template #target="{ togglePopover }">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
@click="togglePopover()"
|
|
||||||
:label="getUser(deal.data[field.name]).full_name"
|
|
||||||
class="!justify-start w-full"
|
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<UserAvatar
|
|
||||||
:user="deal.data[field.name]"
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</Button>
|
|
||||||
</template>
|
|
||||||
<template #item-prefix="{ option }">
|
|
||||||
<UserAvatar
|
|
||||||
class="mr-2"
|
|
||||||
:user="option.email"
|
|
||||||
size="sm"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</Autocomplete>
|
|
||||||
<Dropdown
|
|
||||||
v-else-if="field.type === 'dropdown'"
|
|
||||||
:options="
|
|
||||||
statusDropdownOptions(deal.data, 'deal', updateDeal)
|
|
||||||
"
|
|
||||||
class="w-full flex-1"
|
|
||||||
>
|
|
||||||
<template #default="{ open }">
|
|
||||||
<Button
|
|
||||||
:label="deal.data[field.name]"
|
|
||||||
class="justify-between w-full"
|
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<IndicatorIcon
|
|
||||||
:class="
|
|
||||||
dealStatuses[deal.data[field.name]].color
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<template #default>{{
|
|
||||||
deal.data[field.name]
|
|
||||||
}}</template>
|
|
||||||
<template #suffix>
|
|
||||||
<FeatherIcon
|
|
||||||
:name="open ? 'chevron-up' : 'chevron-down'"
|
|
||||||
class="h-4 text-gray-600"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</Button>
|
|
||||||
</template>
|
|
||||||
</Dropdown>
|
|
||||||
<FormControl
|
|
||||||
v-else-if="field.type === 'date'"
|
|
||||||
type="date"
|
|
||||||
:value="deal.data[field.name]"
|
|
||||||
@change.stop="
|
|
||||||
updateDeal(field.name, $event.target.value)
|
|
||||||
"
|
|
||||||
:debounce="500"
|
|
||||||
class="form-control"
|
|
||||||
/>
|
|
||||||
<FormControl
|
|
||||||
v-else-if="field.type === 'number'"
|
|
||||||
type="number"
|
|
||||||
:value="deal.data[field.name]"
|
|
||||||
@change.stop="
|
|
||||||
updateDeal(field.name, $event.target.value)
|
|
||||||
"
|
|
||||||
:debounce="500"
|
|
||||||
class="form-control"
|
|
||||||
/>
|
|
||||||
<FormControl
|
|
||||||
v-else-if="field.type === 'tel'"
|
|
||||||
type="tel"
|
|
||||||
:value="deal.data[field.name]"
|
|
||||||
@change.stop="
|
|
||||||
updateDeal(field.name, $event.target.value)
|
|
||||||
"
|
|
||||||
:debounce="500"
|
|
||||||
class="form-control"
|
|
||||||
/>
|
|
||||||
<FormControl
|
|
||||||
v-else
|
|
||||||
type="text"
|
|
||||||
:value="deal.data[field.name]"
|
|
||||||
@change.stop="
|
|
||||||
updateDeal(field.name, $event.target.value)
|
|
||||||
"
|
|
||||||
:debounce="500"
|
|
||||||
class="form-control"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
</Toggler>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
<div
|
</FileUploader>
|
||||||
class="flex items-center gap-1 text-sm px-6 p-3 leading-5 cursor-pointer"
|
<div class="flex-1 flex flex-col justify-between overflow-hidden">
|
||||||
>
|
<div class="flex flex-col overflow-y-auto">
|
||||||
<span class="text-gray-600">Created </span>
|
<div
|
||||||
<Tooltip :text="dateFormat(deal.data.creation, dateTooltipFormat)">
|
v-for="(section, i) in detailSections"
|
||||||
{{ timeAgo(deal.data.creation) }}
|
:key="section.label"
|
||||||
</Tooltip>
|
class="flex flex-col p-3"
|
||||||
<span> · </span>
|
:class="{ 'border-b': i !== detailSections.length - 1 }"
|
||||||
<span class="text-gray-600">Updated </span>
|
>
|
||||||
<Tooltip :text="dateFormat(deal.data.modified, dateTooltipFormat)">
|
<Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
|
||||||
{{ timeAgo(deal.data.modified) }}
|
<div
|
||||||
</Tooltip>
|
class="flex items-center gap-2 text-base font-semibold leading-5 pl-2 pr-3 cursor-pointer max-w-fit"
|
||||||
|
@click="toggle()"
|
||||||
|
>
|
||||||
|
<FeatherIcon
|
||||||
|
name="chevron-right"
|
||||||
|
class="h-4 text-gray-600 transition-all duration-300 ease-in-out"
|
||||||
|
:class="{ 'rotate-90': opened }"
|
||||||
|
/>
|
||||||
|
{{ section.label }}
|
||||||
|
</div>
|
||||||
|
<transition
|
||||||
|
enter-active-class="duration-300 ease-in"
|
||||||
|
leave-active-class="duration-300 ease-[cubic-bezier(0, 1, 0.5, 1)]"
|
||||||
|
enter-to-class="max-h-[200px] overflow-hidden"
|
||||||
|
leave-from-class="max-h-[200px] overflow-hidden"
|
||||||
|
enter-from-class="max-h-0 overflow-hidden"
|
||||||
|
leave-to-class="max-h-0 overflow-hidden"
|
||||||
|
>
|
||||||
|
<div v-if="opened" class="flex flex-col gap-1.5">
|
||||||
|
<div
|
||||||
|
v-for="field in section.fields"
|
||||||
|
:key="field.label"
|
||||||
|
class="flex items-center px-3 gap-2 text-base leading-5 first:mt-3"
|
||||||
|
>
|
||||||
|
<div class="text-gray-600 w-[106px]">
|
||||||
|
{{ field.label }}
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<FormControl
|
||||||
|
v-if="field.type === 'select'"
|
||||||
|
type="select"
|
||||||
|
:options="field.options"
|
||||||
|
:value="deal.data[field.name]"
|
||||||
|
@change.stop="
|
||||||
|
updateDeal(field.name, $event.target.value)
|
||||||
|
"
|
||||||
|
:debounce="500"
|
||||||
|
class="form-control cursor-pointer [&_select]:cursor-pointer"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<IndicatorIcon
|
||||||
|
:class="dealStatuses[deal.data[field.name]].color"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</FormControl>
|
||||||
|
<FormControl
|
||||||
|
v-else-if="field.type === 'email'"
|
||||||
|
type="email"
|
||||||
|
class="form-control"
|
||||||
|
:value="deal.data[field.name]"
|
||||||
|
@change.stop="
|
||||||
|
updateDeal(field.name, $event.target.value)
|
||||||
|
"
|
||||||
|
:debounce="500"
|
||||||
|
/>
|
||||||
|
<Autocomplete
|
||||||
|
v-else-if="field.type === 'link'"
|
||||||
|
:value="deal.data[field.name]"
|
||||||
|
:options="field.options"
|
||||||
|
@change="(e) => field.change(e)"
|
||||||
|
:placeholder="field.placeholder"
|
||||||
|
class="form-control"
|
||||||
|
/>
|
||||||
|
<Autocomplete
|
||||||
|
v-else-if="field.type === 'user'"
|
||||||
|
:options="activeAgents"
|
||||||
|
:value="getUser(deal.data[field.name]).full_name"
|
||||||
|
@change="(option) => updateAssignedAgent(option.email)"
|
||||||
|
class="form-control"
|
||||||
|
:placeholder="deal.placeholder"
|
||||||
|
>
|
||||||
|
<template #target="{ togglePopover }">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
@click="togglePopover()"
|
||||||
|
:label="getUser(deal.data[field.name]).full_name"
|
||||||
|
class="!justify-start w-full"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<UserAvatar
|
||||||
|
:user="deal.data[field.name]"
|
||||||
|
size="sm"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
<template #item-prefix="{ option }">
|
||||||
|
<UserAvatar
|
||||||
|
class="mr-2"
|
||||||
|
:user="option.email"
|
||||||
|
size="sm"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</Autocomplete>
|
||||||
|
<Dropdown
|
||||||
|
v-else-if="field.type === 'dropdown'"
|
||||||
|
:options="
|
||||||
|
statusDropdownOptions(deal.data, 'deal', updateDeal)
|
||||||
|
"
|
||||||
|
class="w-full flex-1"
|
||||||
|
>
|
||||||
|
<template #default="{ open }">
|
||||||
|
<Button
|
||||||
|
:label="deal.data[field.name]"
|
||||||
|
class="justify-between w-full"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<IndicatorIcon
|
||||||
|
:class="
|
||||||
|
dealStatuses[deal.data[field.name]].color
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template #default>{{
|
||||||
|
deal.data[field.name]
|
||||||
|
}}</template>
|
||||||
|
<template #suffix>
|
||||||
|
<FeatherIcon
|
||||||
|
:name="open ? 'chevron-up' : 'chevron-down'"
|
||||||
|
class="h-4 text-gray-600"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
</Dropdown>
|
||||||
|
<FormControl
|
||||||
|
v-else-if="field.type === 'date'"
|
||||||
|
type="date"
|
||||||
|
:value="deal.data[field.name]"
|
||||||
|
@change.stop="
|
||||||
|
updateDeal(field.name, $event.target.value)
|
||||||
|
"
|
||||||
|
:debounce="500"
|
||||||
|
class="form-control"
|
||||||
|
/>
|
||||||
|
<FormControl
|
||||||
|
v-else-if="field.type === 'number'"
|
||||||
|
type="number"
|
||||||
|
:value="deal.data[field.name]"
|
||||||
|
@change.stop="
|
||||||
|
updateDeal(field.name, $event.target.value)
|
||||||
|
"
|
||||||
|
:debounce="500"
|
||||||
|
class="form-control"
|
||||||
|
/>
|
||||||
|
<FormControl
|
||||||
|
v-else-if="field.type === 'tel'"
|
||||||
|
type="tel"
|
||||||
|
:value="deal.data[field.name]"
|
||||||
|
@change.stop="
|
||||||
|
updateDeal(field.name, $event.target.value)
|
||||||
|
"
|
||||||
|
:debounce="500"
|
||||||
|
class="form-control"
|
||||||
|
/>
|
||||||
|
<FormControl
|
||||||
|
v-else
|
||||||
|
type="text"
|
||||||
|
:value="deal.data[field.name]"
|
||||||
|
@change.stop="
|
||||||
|
updateDeal(field.name, $event.target.value)
|
||||||
|
"
|
||||||
|
:debounce="500"
|
||||||
|
class="form-control"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</Toggler>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</TabGroup>
|
</div>
|
||||||
<NoteModal v-model="showNoteModal" :note="note" @updateNote="updateNote" />
|
<NoteModal v-model="showNoteModal" :note="note" @updateNote="updateNote" />
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -351,6 +356,8 @@ import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
|
|||||||
import TaskIcon from '@/components/Icons/TaskIcon.vue'
|
import TaskIcon from '@/components/Icons/TaskIcon.vue'
|
||||||
import NoteIcon from '@/components/Icons/NoteIcon.vue'
|
import NoteIcon from '@/components/Icons/NoteIcon.vue'
|
||||||
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
|
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
|
||||||
|
import CameraIcon from '@/components/Icons/CameraIcon.vue'
|
||||||
|
import LinkIcon from '@/components/Icons/LinkIcon.vue'
|
||||||
import LayoutHeader from '@/components/LayoutHeader.vue'
|
import LayoutHeader from '@/components/LayoutHeader.vue'
|
||||||
import Toggler from '@/components/Toggler.vue'
|
import Toggler from '@/components/Toggler.vue'
|
||||||
import Activities from '@/components/Activities.vue'
|
import Activities from '@/components/Activities.vue'
|
||||||
@ -361,9 +368,6 @@ import NoteModal from '@/components/NoteModal.vue'
|
|||||||
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
|
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
|
||||||
import { TransitionPresets, useTransition } from '@vueuse/core'
|
import { TransitionPresets, useTransition } from '@vueuse/core'
|
||||||
import {
|
import {
|
||||||
dateFormat,
|
|
||||||
timeAgo,
|
|
||||||
dateTooltipFormat,
|
|
||||||
dealStatuses,
|
dealStatuses,
|
||||||
statusDropdownOptions,
|
statusDropdownOptions,
|
||||||
openWebsite,
|
openWebsite,
|
||||||
|
|||||||
@ -89,7 +89,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</TabGroup>
|
</TabGroup>
|
||||||
<div class="flex flex-col justify-between border-l w-[352px]">
|
<div class="flex flex-col justify-between border-l w-[352px]">
|
||||||
<div class="flex items-center border-b px-5 py-2.5 h-[41px] font-semibold text-lg">
|
<div
|
||||||
|
class="flex items-center border-b px-5 py-2.5 h-[41px] font-semibold text-lg"
|
||||||
|
>
|
||||||
About this lead
|
About this lead
|
||||||
</div>
|
</div>
|
||||||
<FileUploader @success="changeLeadImage" :validateFile="validateFile">
|
<FileUploader @success="changeLeadImage" :validateFile="validateFile">
|
||||||
@ -336,9 +338,6 @@ import NoteModal from '@/components/NoteModal.vue'
|
|||||||
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
|
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
|
||||||
import { TransitionPresets, useTransition } from '@vueuse/core'
|
import { TransitionPresets, useTransition } from '@vueuse/core'
|
||||||
import {
|
import {
|
||||||
dateFormat,
|
|
||||||
timeAgo,
|
|
||||||
dateTooltipFormat,
|
|
||||||
leadStatuses,
|
leadStatuses,
|
||||||
statusDropdownOptions,
|
statusDropdownOptions,
|
||||||
openWebsite,
|
openWebsite,
|
||||||
@ -349,7 +348,6 @@ import { usersStore } from '@/stores/users'
|
|||||||
import { contactsStore } from '@/stores/contacts'
|
import { contactsStore } from '@/stores/contacts'
|
||||||
import {
|
import {
|
||||||
createResource,
|
createResource,
|
||||||
createDocumentResource,
|
|
||||||
createListResource,
|
createListResource,
|
||||||
FileUploader,
|
FileUploader,
|
||||||
ErrorMessage,
|
ErrorMessage,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user