fix: separated tab and details section
This commit is contained in:
Shariq Ansari
parent
c81f6ae61e
commit
3d659bb88e
@ -41,278 +41,278 @@
|
||||
/>
|
||||
</template>
|
||||
</LayoutHeader>
|
||||
<TabGroup v-slot="{ selectedIndex }" v-if="lead.data" @change="onTabChange">
|
||||
<TabList class="flex items-center gap-6 border-b pl-5 relative">
|
||||
<Tab
|
||||
ref="tabRef"
|
||||
as="template"
|
||||
v-for="tab in tabs"
|
||||
:key="tab.label"
|
||||
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"
|
||||
<div class="flex h-full overflow-hidden">
|
||||
<TabGroup v-slot="{ selectedIndex }" v-if="lead.data" @change="onTabChange">
|
||||
<div class="flex flex-col flex-1">
|
||||
<TabList class="flex items-center gap-6 border-b pl-5 relative">
|
||||
<Tab
|
||||
ref="tabRef"
|
||||
as="template"
|
||||
v-for="tab in tabs"
|
||||
:key="tab.label"
|
||||
v-slot="{ selected }"
|
||||
>
|
||||
<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()"
|
||||
/>
|
||||
</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"
|
||||
<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 }"
|
||||
>
|
||||
<Avatar
|
||||
size="3xl"
|
||||
:label="lead.data.first_name"
|
||||
:image="lead.data.image"
|
||||
<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(lead.data.mobile_no)"
|
||||
@makeNote="(e) => showNote(e)"
|
||||
@deleteNote="(e) => deleteNote(e)"
|
||||
@setFocusOnEmail="() => $refs.sendEmailRef.el.click()"
|
||||
/>
|
||||
<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>
|
||||
</Tooltip>
|
||||
<Button class="rounded-full h-8 w-8">
|
||||
<EmailIcon class="h-4 w-4" />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
<CommunicationArea
|
||||
ref="sendEmailRef"
|
||||
v-if="[0, 1].includes(selectedIndex)"
|
||||
v-model="lead"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</TabGroup>
|
||||
<div class="flex flex-col justify-between border-l w-[352px]">
|
||||
<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
|
||||
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>
|
||||
<Tooltip text="Go to website...">
|
||||
<Button
|
||||
icon="link"
|
||||
@click="openWebsite(lead.data.website)"
|
||||
class="rounded-full h-8 w-8"
|
||||
/>
|
||||
</Tooltip>
|
||||
<Dropdown
|
||||
:options="[
|
||||
{
|
||||
icon: 'upload',
|
||||
label: lead.data.image ? 'Change photo' : 'Upload photo',
|
||||
onClick: openFileSelector,
|
||||
</Tooltip>
|
||||
<Button class="rounded-full h-8 w-8">
|
||||
<EmailIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
<Tooltip text="Go to website...">
|
||||
<Button
|
||||
icon="link"
|
||||
@click="openWebsite(lead.data.website)"
|
||||
class="rounded-full h-8 w-8"
|
||||
/>
|
||||
</Tooltip>
|
||||
<Dropdown
|
||||
: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: () => {
|
||||
lead.data.image = ''
|
||||
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>
|
||||
},
|
||||
]"
|
||||
>
|
||||
<Button icon="more-horizontal" class="rounded-full h-8 w-8" />
|
||||
</Dropdown>
|
||||
</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>
|
||||
</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
|
||||
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>
|
||||
</TabGroup>
|
||||
</div>
|
||||
<NoteModal v-model="showNoteModal" :note="note" @updateNote="updateNote" />
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user