311 lines
8.1 KiB
Vue
311 lines
8.1 KiB
Vue
<template>
|
|
<LayoutHeader v-if="lead.doc">
|
|
<template #left-header>
|
|
<Breadcrumbs :items="breadcrumbs" />
|
|
</template>
|
|
<template #right-header>
|
|
<div
|
|
v-if="lead.doc.lead_owner"
|
|
class="flex items-center space-x-2 bg-gray-100 hover:bg-gray-200 pl-1.5 py-1 pr-2 rounded ml-2 cursor-pointer"
|
|
>
|
|
<Avatar
|
|
:image="getUser(lead.doc.lead_owner).user_image"
|
|
:label="getUser(lead.doc.lead_owner).full_name"
|
|
size="sm"
|
|
/>
|
|
<div class="text-base text-gray-700">
|
|
{{ getUser(lead.doc.lead_owner).full_name }}
|
|
</div>
|
|
</div>
|
|
<Dropdown :options="statusDropdownOptions">
|
|
<template #default="{ open }">
|
|
<Button :label="lead.doc.status">
|
|
<template #prefix>
|
|
<IndicatorIcon :class="indicatorColor[lead.doc.status]" />
|
|
</template>
|
|
<template #suffix
|
|
><FeatherIcon
|
|
:name="open ? 'chevron-up' : 'chevron-down'"
|
|
class="h-4"
|
|
/></template>
|
|
</Button>
|
|
</template>
|
|
</Dropdown>
|
|
<Button icon="more-horizontal" />
|
|
</template>
|
|
</LayoutHeader>
|
|
<TabGroup v-if="lead.doc" @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>
|
|
<TabPanels class="flex h-full">
|
|
<TabPanel class="flex-1" v-for="tab in tabs" :key="tab.label">
|
|
<Activities :activities="tab.content" />
|
|
</TabPanel>
|
|
<div class="flex flex-col gap-6.5 border-l px-6 py-3 w-[390px]">
|
|
<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-1 text-base font-semibold leading-5 cursor-pointer"
|
|
@click="toggle()"
|
|
>
|
|
{{ section.label }}
|
|
<FeatherIcon
|
|
:name="opened ? 'chevron-up' : 'chevron-down'"
|
|
class="h-4 text-gray-600"
|
|
/>
|
|
</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-3">
|
|
<div
|
|
v-for="field in section.fields"
|
|
:key="field.label"
|
|
class="flex items-center gap-2 text-base leading-5 first:mt-4.5"
|
|
>
|
|
<div class="text-gray-600 w-[106px]">{{ field.label }}</div>
|
|
<div class="text-gray-900">{{ field.value }}</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</Toggler>
|
|
</div>
|
|
</div>
|
|
</TabPanels>
|
|
</TabGroup>
|
|
</template>
|
|
<script setup>
|
|
import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
|
|
import EmailIcon from '@/components/Icons/EmailIcon.vue'
|
|
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
|
|
import TaskIcon from '@/components/Icons/TaskIcon.vue'
|
|
import NoteIcon from '@/components/Icons/NoteIcon.vue'
|
|
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
|
|
import LayoutHeader from '@/components/LayoutHeader.vue'
|
|
import Toggler from '@/components/Toggler.vue'
|
|
import Activities from '@/components/Activities.vue'
|
|
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
|
|
import {
|
|
createDocumentResource,
|
|
Avatar,
|
|
FeatherIcon,
|
|
Dropdown,
|
|
} from 'frappe-ui'
|
|
import { TransitionPresets, useTransition } from '@vueuse/core'
|
|
import { usersStore } from '@/stores/users'
|
|
import { ref, computed } from 'vue'
|
|
import Breadcrumbs from '@/components/Breadcrumbs.vue'
|
|
|
|
const { getUser } = usersStore()
|
|
|
|
const props = defineProps({
|
|
leadId: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
})
|
|
const lead = createDocumentResource({
|
|
doctype: 'CRM Lead',
|
|
name: props.leadId,
|
|
auto: true,
|
|
})
|
|
|
|
const breadcrumbs = computed(() => {
|
|
let items = [{ label: 'Leads', route: { name: 'Leads' } }]
|
|
items.push({
|
|
label: lead.doc.lead_name,
|
|
route: { name: 'Lead', params: { leadId: lead.doc.name } },
|
|
})
|
|
return items
|
|
})
|
|
|
|
const activities = [
|
|
{
|
|
type: 'change',
|
|
datetime: '2021-08-20 12:00:00',
|
|
value: 'Status changed from New to Contact made',
|
|
},
|
|
{
|
|
type: 'change',
|
|
datetime: '2021-08-20 12:00:00',
|
|
value: 'Status changed from Proposal made to New',
|
|
},
|
|
{
|
|
type: 'email',
|
|
datetime: '2021-08-20 12:00:00',
|
|
value: 'Email sent to Sharon',
|
|
},
|
|
{
|
|
type: 'change',
|
|
datetime: '2021-08-20 12:00:00',
|
|
value: 'Status changed from Contact made to Proposal made',
|
|
},
|
|
{
|
|
type: 'call',
|
|
datetime: '2021-08-20 12:00:00',
|
|
value: 'Call made to Sharon',
|
|
},
|
|
]
|
|
|
|
const tabs = [
|
|
{
|
|
label: 'Activity',
|
|
icon: ActivityIcon,
|
|
content: activities,
|
|
},
|
|
{
|
|
label: 'Emails',
|
|
icon: EmailIcon,
|
|
content: activities.filter((activity) => activity.type === 'email'),
|
|
},
|
|
{
|
|
label: 'Calls',
|
|
icon: PhoneIcon,
|
|
content: activities.filter((activity) => activity.type === 'call'),
|
|
},
|
|
{
|
|
label: 'Tasks',
|
|
icon: TaskIcon,
|
|
},
|
|
{
|
|
label: 'Notes',
|
|
icon: NoteIcon,
|
|
},
|
|
]
|
|
|
|
const tabRef = ref([])
|
|
const indicator = ref(null)
|
|
|
|
let indicatorLeft = ref(20)
|
|
const indicatorLeftValue = useTransition(indicatorLeft, {
|
|
duration: 250,
|
|
ease: TransitionPresets.easeOutCubic,
|
|
})
|
|
|
|
function onTabChange(index) {
|
|
const selectedTab = tabRef.value[index].el
|
|
indicator.value.style.width = `${selectedTab.offsetWidth}px`
|
|
indicatorLeft.value = selectedTab.offsetLeft
|
|
}
|
|
|
|
const statusDropdownOptions = [
|
|
{
|
|
label: 'New',
|
|
icon: IndicatorIcon,
|
|
onClick: () => {
|
|
lead.doc.status = 'New'
|
|
},
|
|
},
|
|
{
|
|
label: 'Contact made',
|
|
icon: IndicatorIcon,
|
|
onClick: () => {
|
|
lead.doc.status = 'Contact made'
|
|
},
|
|
},
|
|
{
|
|
label: 'Proposal made',
|
|
icon: IndicatorIcon,
|
|
onClick: () => {
|
|
lead.doc.status = 'Proposal made'
|
|
},
|
|
},
|
|
{
|
|
label: 'Negotiation',
|
|
icon: IndicatorIcon,
|
|
onClick: () => {
|
|
lead.doc.status = 'Negotiation'
|
|
},
|
|
},
|
|
{
|
|
label: 'Converted',
|
|
icon: IndicatorIcon,
|
|
onClick: () => {
|
|
lead.doc.status = 'Converted'
|
|
},
|
|
},
|
|
]
|
|
|
|
const indicatorColor = {
|
|
New: 'text-gray-600',
|
|
'Contact made': 'text-orange-500',
|
|
'Proposal made': 'text-blue-600',
|
|
Negotiation: 'text-red-600',
|
|
Converted: 'text-green-600',
|
|
}
|
|
|
|
const detailSections = computed(() => {
|
|
return [
|
|
{
|
|
label: 'About this lead',
|
|
opened: true,
|
|
fields: [
|
|
{
|
|
label: 'Status',
|
|
value: lead.doc.status,
|
|
},
|
|
{
|
|
label: 'Lead Owner',
|
|
value: getUser(lead.doc.lead_owner).full_name,
|
|
},
|
|
{
|
|
label: 'Organization',
|
|
value: lead.doc.organization_name,
|
|
},
|
|
{
|
|
label: 'Website',
|
|
value: lead.doc.organization_website,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: 'Person',
|
|
opened: true,
|
|
fields: [
|
|
{
|
|
label: 'Name',
|
|
value: lead.doc.lead_name,
|
|
},
|
|
{
|
|
label: 'Email',
|
|
value: lead.doc.email,
|
|
},
|
|
{
|
|
label: 'Mobile No.',
|
|
value: lead.doc.mobile_no,
|
|
},
|
|
],
|
|
},
|
|
]
|
|
})
|
|
</script>
|