fix: separated tab and details section
This commit is contained in:
Shariq Ansari
parent
c81f6ae61e
commit
3d659bb88e
@ -41,278 +41,278 @@
|
|||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</LayoutHeader>
|
</LayoutHeader>
|
||||||
<TabGroup v-slot="{ selectedIndex }" v-if="lead.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="lead.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-[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"
|
||||||
:activities="tab.content"
|
:class="{ 'text-gray-900': selected }"
|
||||||
@makeCall="makeCall(lead.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="lead"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col justify-between border-l w-[370px]">
|
|
||||||
<FileUploader @success="changeLeadImage" :validateFile="validateFile">
|
|
||||||
<template #default="{ openFileSelector, error }">
|
|
||||||
<div
|
|
||||||
class="flex flex-col gap-3 pb-4 p-5 items-center justify-center border-b"
|
|
||||||
>
|
>
|
||||||
<Avatar
|
<component v-if="tab.icon" :is="tab.icon" class="h-5" />
|
||||||
size="3xl"
|
{{ tab.label }}
|
||||||
:label="lead.data.first_name"
|
</button>
|
||||||
:image="lead.data.image"
|
</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(lead.data.mobile_no)"
|
||||||
|
@makeNote="(e) => showNote(e)"
|
||||||
|
@deleteNote="(e) => deleteNote(e)"
|
||||||
|
@setFocusOnEmail="() => $refs.sendEmailRef.el.click()"
|
||||||
/>
|
/>
|
||||||
<ErrorMessage :message="error" />
|
</TabPanel>
|
||||||
<div class="font-medium text-2xl">{{ lead.data.lead_name }}</div>
|
</TabPanels>
|
||||||
<div class="flex gap-3">
|
<CommunicationArea
|
||||||
<Tooltip text="Make a call...">
|
ref="sendEmailRef"
|
||||||
<Button
|
v-if="[0, 1].includes(selectedIndex)"
|
||||||
class="rounded-full h-8 w-8"
|
v-model="lead"
|
||||||
@click="() => makeCall(lead.data.mobile_no)"
|
/>
|
||||||
>
|
</div>
|
||||||
<PhoneIcon class="h-4 w-4" />
|
</div>
|
||||||
</Button>
|
</TabGroup>
|
||||||
</Tooltip>
|
<div class="flex flex-col justify-between border-l w-[352px]">
|
||||||
<Button class="rounded-full h-8 w-8">
|
<FileUploader @success="changeLeadImage" :validateFile="validateFile">
|
||||||
<EmailIcon class="h-4 w-4" />
|
<template #default="{ openFileSelector, error }">
|
||||||
|
<div
|
||||||
|
class="flex flex-col gap-3 pb-4 p-5 items-center justify-center border-b"
|
||||||
|
>
|
||||||
|
<Avatar
|
||||||
|
size="3xl"
|
||||||
|
:label="lead.data.first_name"
|
||||||
|
:image="lead.data.image"
|
||||||
|
/>
|
||||||
|
<ErrorMessage :message="error" />
|
||||||
|
<div class="font-medium text-2xl">{{ lead.data.lead_name }}</div>
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<Tooltip text="Make a call...">
|
||||||
|
<Button
|
||||||
|
class="rounded-full h-8 w-8"
|
||||||
|
@click="() => makeCall(lead.data.mobile_no)"
|
||||||
|
>
|
||||||
|
<PhoneIcon class="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
<Tooltip text="Go to website...">
|
</Tooltip>
|
||||||
<Button
|
<Button class="rounded-full h-8 w-8">
|
||||||
icon="link"
|
<EmailIcon class="h-4 w-4" />
|
||||||
@click="openWebsite(lead.data.website)"
|
</Button>
|
||||||
class="rounded-full h-8 w-8"
|
<Tooltip text="Go to website...">
|
||||||
/>
|
<Button
|
||||||
</Tooltip>
|
icon="link"
|
||||||
<Dropdown
|
@click="openWebsite(lead.data.website)"
|
||||||
:options="[
|
class="rounded-full h-8 w-8"
|
||||||
{
|
/>
|
||||||
icon: 'upload',
|
</Tooltip>
|
||||||
label: lead.data.image ? 'Change photo' : 'Upload photo',
|
<Dropdown
|
||||||
onClick: openFileSelector,
|
:options="[
|
||||||
|
{
|
||||||
|
icon: 'upload',
|
||||||
|
label: lead.data.image ? 'Change photo' : 'Upload photo',
|
||||||
|
onClick: openFileSelector,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'trash-2',
|
||||||
|
label: 'Remove photo',
|
||||||
|
onClick: () => {
|
||||||
|
lead.data.image = ''
|
||||||
|
updateLead('image', '')
|
||||||
},
|
},
|
||||||
{
|
},
|
||||||
icon: 'trash-2',
|
]"
|
||||||
label: 'Remove photo',
|
>
|
||||||
onClick: () => {
|
<Button icon="more-horizontal" class="rounded-full h-8 w-8" />
|
||||||
lead.data.image = ''
|
</Dropdown>
|
||||||
updateLead('image', '')
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
<Button icon="more-horizontal" class="rounded-full h-8 w-8" />
|
|
||||||
</Dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</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.name"
|
|
||||||
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="lead.data[field.name]"
|
|
||||||
@change.stop="
|
|
||||||
updateLead(field.name, $event.target.value)
|
|
||||||
"
|
|
||||||
:debounce="500"
|
|
||||||
class="form-control cursor-pointer [&_select]:cursor-pointer"
|
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<IndicatorIcon
|
|
||||||
:class="leadStatuses[lead.data[field.name]].color"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</FormControl>
|
|
||||||
<FormControl
|
|
||||||
v-else-if="field.type === 'email'"
|
|
||||||
type="email"
|
|
||||||
class="form-control"
|
|
||||||
:value="lead.data[field.name]"
|
|
||||||
@change.stop="
|
|
||||||
updateLead(field.name, $event.target.value)
|
|
||||||
"
|
|
||||||
:debounce="500"
|
|
||||||
/>
|
|
||||||
<Autocomplete
|
|
||||||
v-else-if="field.type === 'link'"
|
|
||||||
:value="lead.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(lead.data[field.name]).full_name"
|
|
||||||
@change="
|
|
||||||
(option) => updateAssignedAgent(option.email)
|
|
||||||
"
|
|
||||||
class="form-control"
|
|
||||||
:placeholder="field.placeholder"
|
|
||||||
>
|
|
||||||
<template #target="{ togglePopover }">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
@click="togglePopover()"
|
|
||||||
:label="getUser(lead.data[field.name]).full_name"
|
|
||||||
class="!justify-start w-full"
|
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<UserAvatar
|
|
||||||
:user="lead.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(lead.data, 'lead', updateLead)
|
|
||||||
"
|
|
||||||
class="w-full flex-1"
|
|
||||||
>
|
|
||||||
<template #default="{ open }">
|
|
||||||
<Button
|
|
||||||
:label="lead.data[field.name]"
|
|
||||||
class="justify-between w-full"
|
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<IndicatorIcon
|
|
||||||
:class="
|
|
||||||
leadStatuses[lead.data[field.name]].color
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<template #default>{{
|
|
||||||
lead.data[field.name]
|
|
||||||
}}</template>
|
|
||||||
<template #suffix>
|
|
||||||
<FeatherIcon
|
|
||||||
:name="open ? 'chevron-up' : 'chevron-down'"
|
|
||||||
class="h-4"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</Button>
|
|
||||||
</template>
|
|
||||||
</Dropdown>
|
|
||||||
<FormControl
|
|
||||||
v-else
|
|
||||||
type="text"
|
|
||||||
:value="lead.data[field.name]"
|
|
||||||
@change.stop="
|
|
||||||
updateLead(field.name, $event.target.value)
|
|
||||||
"
|
|
||||||
class="form-control"
|
|
||||||
:debounce="500"
|
|
||||||
/>
|
|
||||||
</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 gap-6 p-3 overflow-y-auto">
|
||||||
<span class="text-gray-600">Created </span>
|
<div
|
||||||
<Tooltip :text="dateFormat(lead.data.creation, dateTooltipFormat)">
|
v-for="section in detailSections"
|
||||||
{{ timeAgo(lead.data.creation) }}
|
:key="section.label"
|
||||||
</Tooltip>
|
class="flex flex-col"
|
||||||
<span> · </span>
|
>
|
||||||
<span class="text-gray-600">Updated </span>
|
<Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
|
||||||
<Tooltip :text="dateFormat(lead.data.modified, dateTooltipFormat)">
|
<div
|
||||||
{{ timeAgo(lead.data.modified) }}
|
class="flex items-center gap-2 text-base font-semibold leading-5 pl-2 pr-3 cursor-pointer max-w-fit"
|
||||||
</Tooltip>
|
@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.name"
|
||||||
|
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="lead.data[field.name]"
|
||||||
|
@change.stop="
|
||||||
|
updateLead(field.name, $event.target.value)
|
||||||
|
"
|
||||||
|
:debounce="500"
|
||||||
|
class="form-control cursor-pointer [&_select]:cursor-pointer"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<IndicatorIcon
|
||||||
|
:class="leadStatuses[lead.data[field.name]].color"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</FormControl>
|
||||||
|
<FormControl
|
||||||
|
v-else-if="field.type === 'email'"
|
||||||
|
type="email"
|
||||||
|
class="form-control"
|
||||||
|
:value="lead.data[field.name]"
|
||||||
|
@change.stop="
|
||||||
|
updateLead(field.name, $event.target.value)
|
||||||
|
"
|
||||||
|
:debounce="500"
|
||||||
|
/>
|
||||||
|
<Autocomplete
|
||||||
|
v-else-if="field.type === 'link'"
|
||||||
|
:value="lead.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(lead.data[field.name]).full_name"
|
||||||
|
@change="(option) => updateAssignedAgent(option.email)"
|
||||||
|
class="form-control"
|
||||||
|
:placeholder="field.placeholder"
|
||||||
|
>
|
||||||
|
<template #target="{ togglePopover }">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
@click="togglePopover()"
|
||||||
|
:label="getUser(lead.data[field.name]).full_name"
|
||||||
|
class="!justify-start w-full"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<UserAvatar
|
||||||
|
:user="lead.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(lead.data, 'lead', updateLead)
|
||||||
|
"
|
||||||
|
class="w-full flex-1"
|
||||||
|
>
|
||||||
|
<template #default="{ open }">
|
||||||
|
<Button
|
||||||
|
:label="lead.data[field.name]"
|
||||||
|
class="justify-between w-full"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<IndicatorIcon
|
||||||
|
:class="
|
||||||
|
leadStatuses[lead.data[field.name]].color
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template #default>{{
|
||||||
|
lead.data[field.name]
|
||||||
|
}}</template>
|
||||||
|
<template #suffix>
|
||||||
|
<FeatherIcon
|
||||||
|
:name="open ? 'chevron-up' : 'chevron-down'"
|
||||||
|
class="h-4"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
</Dropdown>
|
||||||
|
<FormControl
|
||||||
|
v-else
|
||||||
|
type="text"
|
||||||
|
:value="lead.data[field.name]"
|
||||||
|
@change.stop="
|
||||||
|
updateLead(field.name, $event.target.value)
|
||||||
|
"
|
||||||
|
class="form-control"
|
||||||
|
:debounce="500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</Toggler>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex items-center gap-1 text-sm px-6 p-3 leading-5 cursor-pointer"
|
||||||
|
>
|
||||||
|
<span class="text-gray-600">Created </span>
|
||||||
|
<Tooltip :text="dateFormat(lead.data.creation, dateTooltipFormat)">
|
||||||
|
{{ timeAgo(lead.data.creation) }}
|
||||||
|
</Tooltip>
|
||||||
|
<span> · </span>
|
||||||
|
<span class="text-gray-600">Updated </span>
|
||||||
|
<Tooltip :text="dateFormat(lead.data.modified, dateTooltipFormat)">
|
||||||
|
{{ timeAgo(lead.data.modified) }}
|
||||||
|
</Tooltip>
|
||||||
|
</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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user