refactor: moved all activity logic from lead/deal to activites component
This commit is contained in:
Shariq Ansari
parent
ed6ba2c716
commit
463ead3671
@ -21,15 +21,15 @@ def get_lead(name):
|
||||
frappe.throw(_("Lead not found"), frappe.DoesNotExistError)
|
||||
lead = lead.pop()
|
||||
|
||||
return lead
|
||||
|
||||
@frappe.whitelist()
|
||||
def get_activities(name):
|
||||
get_docinfo('', "CRM Lead", name)
|
||||
docinfo = frappe.response["docinfo"]
|
||||
activities = get_activities(lead, docinfo)
|
||||
|
||||
return { **lead, 'activities': activities }
|
||||
|
||||
def get_activities(doc, docinfo):
|
||||
lead_fields_meta = frappe.get_meta("CRM Lead").fields
|
||||
|
||||
doc = frappe.get_doc("CRM Lead", name, fields=["creation", "owner"])
|
||||
activities = [{
|
||||
"activity_type": "creation",
|
||||
"creation": doc.creation,
|
||||
@ -75,15 +75,6 @@ def get_activities(doc, docinfo):
|
||||
}
|
||||
activities.append(activity)
|
||||
|
||||
for comment in docinfo.comments:
|
||||
activity = {
|
||||
"activity_type": "comment",
|
||||
"creation": comment.creation,
|
||||
"owner": comment.owner,
|
||||
"data": comment.content,
|
||||
}
|
||||
activities.append(activity)
|
||||
|
||||
for communication in docinfo.communications:
|
||||
activity = {
|
||||
"activity_type": "communication",
|
||||
|
||||
@ -3,23 +3,23 @@
|
||||
<div class="flex h-7 items-center text-xl font-semibold text-gray-800">
|
||||
{{ title }}
|
||||
</div>
|
||||
<Button v-if="title == 'Calls'" variant="solid" @click="makeCall(lead.data.mobile_no)">
|
||||
<Button
|
||||
v-if="title == 'Calls'"
|
||||
variant="solid"
|
||||
@click="makeCall(lead.data.mobile_no)"
|
||||
>
|
||||
<PhoneIcon class="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
v-else-if="title == 'Notes'"
|
||||
variant="solid"
|
||||
@click="emit('makeNote')"
|
||||
>
|
||||
<Button v-else-if="title == 'Notes'" variant="solid" @click="showNote">
|
||||
<FeatherIcon name="plus" class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div v-if="activities.length" class="flex-1 overflow-y-auto">
|
||||
<div v-if="activities?.length" class="flex-1 overflow-y-auto">
|
||||
<div v-if="title == 'Notes'" class="grid grid-cols-3 gap-4 px-10 py-5 pt-0">
|
||||
<div
|
||||
v-for="note in activities"
|
||||
class="group flex h-48 cursor-pointer flex-col justify-between gap-2 rounded-md bg-gray-50 px-4 py-3 hover:bg-gray-100"
|
||||
@click="emit('makeNote', note)"
|
||||
@click="showNote(note)"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="truncate text-lg font-medium">
|
||||
@ -30,7 +30,7 @@
|
||||
{
|
||||
icon: 'trash-2',
|
||||
label: 'Delete',
|
||||
onClick: () => emit('deleteNote', note.name),
|
||||
onClick: () => deleteNote(note.name),
|
||||
},
|
||||
]"
|
||||
@click.stop
|
||||
@ -346,11 +346,6 @@
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="activity.activity_type == 'comment'"
|
||||
class="max-w-[80%] cursor-pointer rounded-xl border px-4 py-3 text-base leading-6 shadow-sm transition-all duration-300 ease-in-out"
|
||||
v-html="activity.data"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -371,7 +366,7 @@
|
||||
v-else-if="title == 'Notes'"
|
||||
variant="solid"
|
||||
label="Create note"
|
||||
@click="emit('makeNote')"
|
||||
@click="showNote"
|
||||
/>
|
||||
<Button
|
||||
v-else-if="title == 'Emails'"
|
||||
@ -385,6 +380,7 @@
|
||||
v-if="['Emails', 'Activity'].includes(title) && lead"
|
||||
v-model="lead"
|
||||
/>
|
||||
<NoteModal v-model="showNoteModal" :note="note" @updateNote="updateNote" />
|
||||
</template>
|
||||
<script setup>
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
@ -399,8 +395,15 @@ import EmailAtIcon from '@/components/Icons/EmailAtIcon.vue'
|
||||
import InboundCallIcon from '@/components/Icons/InboundCallIcon.vue'
|
||||
import OutboundCallIcon from '@/components/Icons/OutboundCallIcon.vue'
|
||||
import CommunicationArea from '@/components/CommunicationArea.vue'
|
||||
import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
|
||||
import NoteModal from '@/components/NoteModal.vue'
|
||||
import {
|
||||
timeAgo,
|
||||
dateFormat,
|
||||
dateTooltipFormat,
|
||||
secondsToDuration,
|
||||
} from '@/utils'
|
||||
import { usersStore } from '@/stores/users'
|
||||
import { contactsStore } from '@/stores/contacts'
|
||||
import {
|
||||
Button,
|
||||
FeatherIcon,
|
||||
@ -408,10 +411,14 @@ import {
|
||||
Dropdown,
|
||||
TextEditor,
|
||||
Avatar,
|
||||
createResource,
|
||||
createListResource,
|
||||
call,
|
||||
} from 'frappe-ui'
|
||||
import { computed, h, defineModel, markRaw } from 'vue'
|
||||
import { ref, computed, h, defineModel, markRaw } from 'vue'
|
||||
|
||||
const { getUser } = usersStore()
|
||||
const { getContact } = contactsStore()
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
@ -426,20 +433,105 @@ const props = defineProps({
|
||||
|
||||
const lead = defineModel()
|
||||
|
||||
const emit = defineEmits(['makeNote', 'deleteNote'])
|
||||
const versions = createResource({
|
||||
url: 'crm.fcrm.doctype.crm_lead.api.get_activities',
|
||||
params: { name: lead.value.data.name },
|
||||
cache: ['activity', lead.value.data.name],
|
||||
auto: true,
|
||||
})
|
||||
|
||||
const calls = createListResource({
|
||||
type: 'list',
|
||||
doctype: 'CRM Call Log',
|
||||
cache: ['Call Logs', lead.value.data.name],
|
||||
fields: [
|
||||
'name',
|
||||
'caller',
|
||||
'receiver',
|
||||
'from',
|
||||
'to',
|
||||
'duration',
|
||||
'start_time',
|
||||
'end_time',
|
||||
'status',
|
||||
'type',
|
||||
'recording_url',
|
||||
'creation',
|
||||
'note',
|
||||
],
|
||||
filters: { lead: lead.value.data.name },
|
||||
orderBy: 'creation desc',
|
||||
pageLength: 999,
|
||||
auto: true,
|
||||
transform: (docs) => {
|
||||
docs.forEach((doc) => {
|
||||
doc.show_recording = false
|
||||
doc.activity_type =
|
||||
doc.type === 'Incoming' ? 'incoming_call' : 'outgoing_call'
|
||||
doc.duration = secondsToDuration(doc.duration)
|
||||
if (doc.type === 'Incoming') {
|
||||
doc.caller = {
|
||||
label: getContact(doc.from)?.full_name || 'Unknown',
|
||||
image: getContact(doc.from)?.image,
|
||||
}
|
||||
doc.receiver = {
|
||||
label: getUser(doc.receiver).full_name,
|
||||
image: getUser(doc.receiver).user_image,
|
||||
}
|
||||
} else {
|
||||
doc.caller = {
|
||||
label: getUser(doc.caller).full_name,
|
||||
image: getUser(doc.caller).user_image,
|
||||
}
|
||||
doc.receiver = {
|
||||
label: getContact(doc.to)?.full_name || 'Unknown',
|
||||
image: getContact(doc.to)?.image,
|
||||
}
|
||||
}
|
||||
})
|
||||
return docs
|
||||
},
|
||||
})
|
||||
|
||||
const notes = createListResource({
|
||||
type: 'list',
|
||||
doctype: 'CRM Note',
|
||||
cache: ['Notes', lead.value.data.name],
|
||||
fields: ['name', 'title', 'content', 'owner', 'modified'],
|
||||
filters: { lead: lead.value.data.name },
|
||||
orderBy: 'modified desc',
|
||||
pageLength: 999,
|
||||
auto: true,
|
||||
})
|
||||
|
||||
function all_activities() {
|
||||
if (!versions.data) return []
|
||||
if (!calls.data) return versions.data
|
||||
return [...versions.data, ...calls.data].sort(
|
||||
(a, b) => new Date(b.creation) - new Date(a.creation)
|
||||
)
|
||||
}
|
||||
|
||||
const activities = computed(() => {
|
||||
if (props.title == 'Calls') {
|
||||
props.activities.forEach((activity) => {
|
||||
activity.show_recording = false
|
||||
})
|
||||
return props.activities
|
||||
let activities = []
|
||||
if (props.title == 'Activity') {
|
||||
activities = all_activities()
|
||||
} else if (props.title == 'Emails') {
|
||||
activities = versions.data.filter(
|
||||
(activity) => activity.activity_type === 'communication'
|
||||
)
|
||||
} else if (props.title == 'Calls') {
|
||||
return calls.data
|
||||
} else if (props.title == 'Notes') {
|
||||
return notes.data
|
||||
}
|
||||
props.activities.forEach((activity) => {
|
||||
activities.forEach((activity) => {
|
||||
activity.icon = timelineIcon(activity.activity_type)
|
||||
|
||||
if (
|
||||
activity.activity_type == 'incoming_call' ||
|
||||
activity.activity_type == 'outgoing_call'
|
||||
activity.activity_type == 'outgoing_call' ||
|
||||
activity.activity_type == 'communication'
|
||||
)
|
||||
return
|
||||
|
||||
@ -450,8 +542,6 @@ const activities = computed(() => {
|
||||
|
||||
if (activity.activity_type == 'creation') {
|
||||
activity.type = activity.data
|
||||
} else if (activity.activity_type == 'comment') {
|
||||
activity.type = 'added a comment'
|
||||
} else if (activity.activity_type == 'added') {
|
||||
activity.type = 'added'
|
||||
activity.value = 'value as'
|
||||
@ -464,7 +554,7 @@ const activities = computed(() => {
|
||||
activity.to = 'to'
|
||||
}
|
||||
})
|
||||
return props.activities
|
||||
return activities
|
||||
})
|
||||
|
||||
const emptyText = computed(() => {
|
||||
@ -508,6 +598,53 @@ function timelineIcon(activity_type) {
|
||||
|
||||
return markRaw(icon)
|
||||
}
|
||||
|
||||
const showNoteModal = ref(false)
|
||||
const note = ref({
|
||||
title: '',
|
||||
content: '',
|
||||
})
|
||||
|
||||
function showNote(n) {
|
||||
note.value = n || {
|
||||
title: '',
|
||||
content: '',
|
||||
}
|
||||
showNoteModal.value = true
|
||||
}
|
||||
|
||||
async function deleteNote(name) {
|
||||
await call('frappe.client.delete', {
|
||||
doctype: 'CRM Note',
|
||||
name,
|
||||
})
|
||||
notes.reload()
|
||||
}
|
||||
|
||||
async function updateNote(note) {
|
||||
if (note.name) {
|
||||
let d = await call('frappe.client.set_value', {
|
||||
doctype: 'CRM Note',
|
||||
name: note.name,
|
||||
fieldname: note,
|
||||
})
|
||||
if (d.name) {
|
||||
notes.reload()
|
||||
}
|
||||
} else {
|
||||
let d = await call('frappe.client.insert', {
|
||||
doc: {
|
||||
doctype: 'CRM Note',
|
||||
title: note.title,
|
||||
content: note.content,
|
||||
lead: props.leadId,
|
||||
},
|
||||
})
|
||||
if (d.name) {
|
||||
notes.reload()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -36,8 +36,8 @@
|
||||
</template>
|
||||
</LayoutHeader>
|
||||
<div v-if="deal.data" class="flex h-full overflow-hidden">
|
||||
<TabGroup as="div" class="flex flex-col flex-1" @change="onTabChange">
|
||||
<TabList class="flex items-center gap-6 border-b pl-5 relative">
|
||||
<TabGroup as="div" class="flex flex-1 flex-col" @change="onTabChange">
|
||||
<TabList class="relative flex items-center gap-6 border-b pl-5">
|
||||
<Tab
|
||||
ref="tabRef"
|
||||
as="template"
|
||||
@ -46,7 +46,7 @@
|
||||
v-slot="{ selected }"
|
||||
>
|
||||
<button
|
||||
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"
|
||||
class="-mb-[1px] flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 transition-all duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
|
||||
:class="{ 'text-gray-900': selected }"
|
||||
>
|
||||
<component v-if="tab.icon" :is="tab.icon" class="h-5" />
|
||||
@ -55,39 +55,33 @@
|
||||
</Tab>
|
||||
<div
|
||||
ref="indicator"
|
||||
class="h-[1px] bg-gray-900 w-[82px] absolute -bottom-[1px]"
|
||||
class="absolute -bottom-[1px] h-[1px] w-[82px] bg-gray-900"
|
||||
:style="{ left: `${indicatorLeftValue}px` }"
|
||||
/>
|
||||
</TabList>
|
||||
<TabPanels class="flex flex-1 overflow-hidden">
|
||||
<TabPanel
|
||||
class="flex-1 flex flex-col overflow-y-auto"
|
||||
class="flex flex-1 flex-col overflow-y-auto"
|
||||
v-for="tab in tabs"
|
||||
:key="tab.label"
|
||||
>
|
||||
<Activities
|
||||
:title="tab.activityTitle"
|
||||
:activities="tab.content"
|
||||
v-model="deal"
|
||||
@makeNote="(e) => showNote(e)"
|
||||
@deleteNote="(e) => deleteNote(e)"
|
||||
/>
|
||||
<Activities :title="tab.label" v-model="deal" />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</TabGroup>
|
||||
<div class="flex flex-col justify-between border-l w-[352px]">
|
||||
<div class="flex w-[352px] flex-col justify-between border-l">
|
||||
<div
|
||||
class="flex items-center border-b px-5 py-2.5 h-[41px] font-semibold text-lg"
|
||||
class="flex h-[41px] items-center border-b px-5 py-2.5 text-lg font-semibold"
|
||||
>
|
||||
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">
|
||||
<div class="flex items-center justify-start gap-5 border-b p-5">
|
||||
<div class="group relative h-[88px] w-[88px]">
|
||||
<Avatar
|
||||
size="3xl"
|
||||
class="w-[88px] h-[88px]"
|
||||
class="h-[88px] w-[88px]"
|
||||
:label="deal.data.organization_name"
|
||||
:image="deal.data.organization_logo"
|
||||
/>
|
||||
@ -112,19 +106,19 @@
|
||||
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"
|
||||
class="z-1 absolute bottom-0 left-0 right-0 flex h-11 cursor-pointer items-center justify-center rounded-b-full bg-black bg-opacity-40 pt-3 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
|
||||
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" />
|
||||
<CameraIcon class="h-6 w-6 cursor-pointer text-white" />
|
||||
</div>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2.5 truncate">
|
||||
<Tooltip :text="deal.data.organization_name">
|
||||
<div class="font-medium text-2xl truncate">
|
||||
<div class="truncate text-2xl font-medium">
|
||||
{{ deal.data.organization_name }}
|
||||
</div>
|
||||
</Tooltip>
|
||||
@ -154,7 +148,7 @@
|
||||
</div>
|
||||
</template>
|
||||
</FileUploader>
|
||||
<div class="flex-1 flex flex-col justify-between overflow-hidden">
|
||||
<div class="flex flex-1 flex-col justify-between overflow-hidden">
|
||||
<div class="flex flex-col overflow-y-auto">
|
||||
<div
|
||||
v-for="(section, i) in detailSections"
|
||||
@ -164,7 +158,7 @@
|
||||
>
|
||||
<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"
|
||||
class="flex max-w-fit cursor-pointer items-center gap-2 pl-2 pr-3 text-base font-semibold leading-5"
|
||||
@click="toggle()"
|
||||
>
|
||||
<FeatherIcon
|
||||
@ -186,9 +180,9 @@
|
||||
<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"
|
||||
class="flex items-center gap-2 px-3 text-base leading-5 first:mt-3"
|
||||
>
|
||||
<div class="text-gray-600 w-[106px]">
|
||||
<div class="w-[106px] text-gray-600">
|
||||
{{ field.label }}
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
@ -240,7 +234,7 @@
|
||||
variant="ghost"
|
||||
@click="togglePopover()"
|
||||
:label="getUser(deal.data[field.name]).full_name"
|
||||
class="!justify-start w-full"
|
||||
class="w-full !justify-start"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserAvatar
|
||||
@ -268,7 +262,7 @@
|
||||
<template #default="{ open }">
|
||||
<Button
|
||||
:label="deal.data[field.name]"
|
||||
class="justify-between w-full"
|
||||
class="w-full justify-between"
|
||||
>
|
||||
<template #prefix>
|
||||
<IndicatorIcon
|
||||
@ -339,13 +333,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NoteModal v-model="showNoteModal" :note="note" @updateNote="updateNote" />
|
||||
</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 CameraIcon from '@/components/Icons/CameraIcon.vue'
|
||||
@ -355,21 +347,18 @@ import Toggler from '@/components/Toggler.vue'
|
||||
import Activities from '@/components/Activities.vue'
|
||||
import Breadcrumbs from '@/components/Breadcrumbs.vue'
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import NoteModal from '@/components/NoteModal.vue'
|
||||
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
|
||||
import { TransitionPresets, useTransition } from '@vueuse/core'
|
||||
import {
|
||||
dealStatuses,
|
||||
statusDropdownOptions,
|
||||
openWebsite,
|
||||
secondsToDuration,
|
||||
createToast,
|
||||
} from '@/utils'
|
||||
import { usersStore } from '@/stores/users'
|
||||
import { contactsStore } from '@/stores/contacts'
|
||||
import {
|
||||
createResource,
|
||||
createListResource,
|
||||
FeatherIcon,
|
||||
FileUploader,
|
||||
ErrorMessage,
|
||||
@ -378,12 +367,11 @@ import {
|
||||
Dropdown,
|
||||
Tooltip,
|
||||
Avatar,
|
||||
call,
|
||||
} from 'frappe-ui'
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const { getUser, users } = usersStore()
|
||||
const { getContact, contacts } = contactsStore()
|
||||
const { contacts } = contactsStore()
|
||||
|
||||
const props = defineProps({
|
||||
dealId: {
|
||||
@ -438,49 +426,24 @@ const breadcrumbs = computed(() => {
|
||||
return items
|
||||
})
|
||||
|
||||
const tabs = computed(() => {
|
||||
return [
|
||||
{
|
||||
label: 'Activity',
|
||||
icon: ActivityIcon,
|
||||
content: all_activities(),
|
||||
activityTitle: 'Activity',
|
||||
},
|
||||
{
|
||||
label: 'Emails',
|
||||
icon: EmailIcon,
|
||||
content: deal.data.activities.filter(
|
||||
(activity) => activity.activity_type === 'communication'
|
||||
),
|
||||
activityTitle: 'Emails',
|
||||
},
|
||||
{
|
||||
label: 'Calls',
|
||||
icon: PhoneIcon,
|
||||
content: calls.data,
|
||||
activityTitle: 'Calls',
|
||||
},
|
||||
// {
|
||||
// label: 'Tasks',
|
||||
// icon: TaskIcon,
|
||||
// activityTitle: 'Tasks',
|
||||
// },
|
||||
{
|
||||
label: 'Notes',
|
||||
icon: NoteIcon,
|
||||
activityTitle: 'Notes',
|
||||
content: notes.data,
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
function all_activities() {
|
||||
if (!deal.data) return []
|
||||
if (!calls.data) return deal.data.activities
|
||||
return [...deal.data.activities, ...calls.data].sort(
|
||||
(a, b) => new Date(b.creation) - new Date(a.creation)
|
||||
)
|
||||
}
|
||||
const tabs = [
|
||||
{
|
||||
label: 'Activity',
|
||||
icon: ActivityIcon,
|
||||
},
|
||||
{
|
||||
label: 'Emails',
|
||||
icon: EmailIcon,
|
||||
},
|
||||
{
|
||||
label: 'Calls',
|
||||
icon: PhoneIcon,
|
||||
},
|
||||
{
|
||||
label: 'Notes',
|
||||
icon: NoteIcon,
|
||||
},
|
||||
]
|
||||
|
||||
function changeDealImage(file) {
|
||||
deal.data.organization_logo = file.file_url
|
||||
@ -611,116 +574,6 @@ const activeAgents = computed(() => {
|
||||
})
|
||||
})
|
||||
|
||||
const showNoteModal = ref(false)
|
||||
const note = ref({
|
||||
title: '',
|
||||
content: '',
|
||||
})
|
||||
|
||||
const notes = createListResource({
|
||||
type: 'list',
|
||||
doctype: 'CRM Note',
|
||||
cache: ['Notes', props.dealId],
|
||||
fields: ['name', 'title', 'content', 'owner', 'modified'],
|
||||
filters: { lead: props.dealId },
|
||||
orderBy: 'modified desc',
|
||||
pageLength: 999,
|
||||
auto: true,
|
||||
})
|
||||
|
||||
function showNote(n) {
|
||||
note.value = n || {
|
||||
title: '',
|
||||
content: '',
|
||||
}
|
||||
showNoteModal.value = true
|
||||
}
|
||||
|
||||
async function deleteNote(name) {
|
||||
await call('frappe.client.delete', {
|
||||
doctype: 'CRM Note',
|
||||
name,
|
||||
})
|
||||
notes.reload()
|
||||
}
|
||||
|
||||
async function updateNote(note) {
|
||||
if (note.name) {
|
||||
let d = await call('frappe.client.set_value', {
|
||||
doctype: 'CRM Note',
|
||||
name: note.name,
|
||||
fieldname: note,
|
||||
})
|
||||
if (d.name) {
|
||||
notes.reload()
|
||||
}
|
||||
} else {
|
||||
let d = await call('frappe.client.insert', {
|
||||
doc: {
|
||||
doctype: 'CRM Note',
|
||||
title: note.title,
|
||||
content: note.content,
|
||||
lead: props.dealId,
|
||||
},
|
||||
})
|
||||
if (d.name) {
|
||||
notes.reload()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const calls = createListResource({
|
||||
type: 'list',
|
||||
doctype: 'CRM Call Log',
|
||||
cache: ['Call Logs', props.dealId],
|
||||
fields: [
|
||||
'name',
|
||||
'caller',
|
||||
'receiver',
|
||||
'from',
|
||||
'to',
|
||||
'duration',
|
||||
'start_time',
|
||||
'end_time',
|
||||
'status',
|
||||
'type',
|
||||
'recording_url',
|
||||
'creation',
|
||||
'note',
|
||||
],
|
||||
filters: { lead: props.dealId },
|
||||
orderBy: 'creation desc',
|
||||
pageLength: 999,
|
||||
auto: true,
|
||||
transform: (docs) => {
|
||||
docs.forEach((doc) => {
|
||||
doc.activity_type =
|
||||
doc.type === 'Incoming' ? 'incoming_call' : 'outgoing_call'
|
||||
doc.duration = secondsToDuration(doc.duration)
|
||||
if (doc.type === 'Incoming') {
|
||||
doc.caller = {
|
||||
label: getContact(doc.from)?.full_name || 'Unknown',
|
||||
image: getContact(doc.from)?.image,
|
||||
}
|
||||
doc.receiver = {
|
||||
label: getUser(doc.receiver).full_name,
|
||||
image: getUser(doc.receiver).user_image,
|
||||
}
|
||||
} else {
|
||||
doc.caller = {
|
||||
label: getUser(doc.caller).full_name,
|
||||
image: getUser(doc.caller).user_image,
|
||||
}
|
||||
doc.receiver = {
|
||||
label: getContact(doc.to)?.full_name || 'Unknown',
|
||||
image: getContact(doc.to)?.image,
|
||||
}
|
||||
}
|
||||
})
|
||||
return docs
|
||||
},
|
||||
})
|
||||
|
||||
function updateAssignedAgent(email) {
|
||||
deal.data.lead_owner = email
|
||||
updateDeal('lead_owner', email)
|
||||
|
||||
@ -38,9 +38,9 @@
|
||||
/>
|
||||
</template>
|
||||
</LayoutHeader>
|
||||
<div v-if="lead.data" class="flex h-full overflow-hidden">
|
||||
<TabGroup as="div" class="flex flex-col flex-1" @change="onTabChange">
|
||||
<TabList class="flex items-center gap-6 border-b pl-5 relative">
|
||||
<div v-if="lead?.data" class="flex h-full overflow-hidden">
|
||||
<TabGroup as="div" class="flex flex-1 flex-col" @change="onTabChange">
|
||||
<TabList class="relative flex items-center gap-6 border-b pl-5">
|
||||
<Tab
|
||||
ref="tabRef"
|
||||
as="template"
|
||||
@ -49,7 +49,7 @@
|
||||
v-slot="{ selected }"
|
||||
>
|
||||
<button
|
||||
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"
|
||||
class="-mb-[1px] flex items-center gap-2 border-b border-transparent py-2.5 text-base text-gray-600 transition-all duration-300 ease-in-out hover:border-gray-400 hover:text-gray-900"
|
||||
:class="{ 'text-gray-900': selected }"
|
||||
>
|
||||
<component v-if="tab.icon" :is="tab.icon" class="h-5" />
|
||||
@ -58,39 +58,33 @@
|
||||
</Tab>
|
||||
<div
|
||||
ref="indicator"
|
||||
class="h-[1px] bg-gray-900 w-[82px] absolute -bottom-[1px]"
|
||||
class="absolute -bottom-[1px] h-[1px] w-[82px] bg-gray-900"
|
||||
:style="{ left: `${indicatorLeftValue}px` }"
|
||||
/>
|
||||
</TabList>
|
||||
<TabPanels class="flex flex-1 overflow-hidden">
|
||||
<TabPanel
|
||||
class="flex-1 flex flex-col overflow-y-auto"
|
||||
class="flex flex-1 flex-col overflow-y-auto"
|
||||
v-for="tab in tabs"
|
||||
:key="tab.label"
|
||||
>
|
||||
<Activities
|
||||
:title="tab.activityTitle"
|
||||
:activities="tab.content"
|
||||
v-model="lead"
|
||||
@makeNote="(e) => showNote(e)"
|
||||
@deleteNote="(e) => deleteNote(e)"
|
||||
/>
|
||||
<Activities :title="tab.label" v-model="lead" />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</TabGroup>
|
||||
<div class="flex flex-col justify-between border-l w-[352px]">
|
||||
<div class="flex w-[352px] flex-col justify-between border-l">
|
||||
<div
|
||||
class="flex items-center border-b px-5 py-2.5 h-[41px] font-semibold text-lg"
|
||||
class="flex h-[41px] items-center border-b px-5 py-2.5 text-lg font-semibold"
|
||||
>
|
||||
About this lead
|
||||
</div>
|
||||
<FileUploader @success="changeLeadImage" :validateFile="validateFile">
|
||||
<template #default="{ openFileSelector, error }">
|
||||
<div class="flex gap-5 items-center justify-start p-5">
|
||||
<div class="relative w-[88px] h-[88px] group">
|
||||
<div class="flex items-center justify-start gap-5 p-5">
|
||||
<div class="group relative h-[88px] w-[88px]">
|
||||
<Avatar
|
||||
size="3xl"
|
||||
class="w-[88px] h-[88px]"
|
||||
class="h-[88px] w-[88px]"
|
||||
:label="lead.data.first_name"
|
||||
:image="lead.data.image"
|
||||
/>
|
||||
@ -113,19 +107,19 @@
|
||||
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"
|
||||
class="z-1 absolute bottom-0 left-0 right-0 flex h-11 cursor-pointer items-center justify-center rounded-b-full bg-black bg-opacity-40 pt-3 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
|
||||
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" />
|
||||
<CameraIcon class="h-6 w-6 cursor-pointer text-white" />
|
||||
</div>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2.5 truncate">
|
||||
<Tooltip :text="lead.data.lead_name">
|
||||
<div class="font-medium text-2xl truncate">
|
||||
<div class="truncate text-2xl font-medium">
|
||||
{{ lead.data.lead_name }}
|
||||
</div>
|
||||
</Tooltip>
|
||||
@ -155,7 +149,7 @@
|
||||
</div>
|
||||
</template>
|
||||
</FileUploader>
|
||||
<div class="flex-1 flex flex-col justify-between overflow-hidden">
|
||||
<div class="flex flex-1 flex-col justify-between overflow-hidden">
|
||||
<div class="flex flex-col overflow-y-auto">
|
||||
<div
|
||||
v-for="(section, i) in detailSections"
|
||||
@ -163,9 +157,9 @@
|
||||
class="flex flex-col"
|
||||
>
|
||||
<Toggler :is-opened="section.opened" v-slot="{ opened, toggle }">
|
||||
<div class="sticky bg-white top-0 p-3 border-t z-10">
|
||||
<div class="sticky top-0 z-10 border-t bg-white p-3">
|
||||
<div
|
||||
class="flex items-center gap-2 text-base font-semibold leading-5 px-2 cursor-pointer max-w-fit"
|
||||
class="flex max-w-fit cursor-pointer items-center gap-2 px-2 text-base font-semibold leading-5"
|
||||
@click="toggle()"
|
||||
>
|
||||
<FeatherIcon
|
||||
@ -188,9 +182,9 @@
|
||||
<div
|
||||
v-for="field in section.fields"
|
||||
:key="field.name"
|
||||
class="flex items-center px-3 gap-2 text-base leading-5 last:mb-3"
|
||||
class="flex items-center gap-2 px-3 text-base leading-5 last:mb-3"
|
||||
>
|
||||
<div class="text-gray-600 w-[106px]">
|
||||
<div class="w-[106px] text-gray-600">
|
||||
{{ field.label }}
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
@ -242,7 +236,7 @@
|
||||
variant="ghost"
|
||||
@click="togglePopover()"
|
||||
:label="getUser(lead.data[field.name]).full_name"
|
||||
class="!justify-start w-full"
|
||||
class="w-full !justify-start"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserAvatar
|
||||
@ -270,7 +264,7 @@
|
||||
<template #default="{ open }">
|
||||
<Button
|
||||
:label="lead.data[field.name]"
|
||||
class="justify-between w-full"
|
||||
class="w-full justify-between"
|
||||
>
|
||||
<template #prefix>
|
||||
<IndicatorIcon
|
||||
@ -311,7 +305,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NoteModal v-model="showNoteModal" :note="note" @updateNote="updateNote" />
|
||||
</template>
|
||||
<script setup>
|
||||
import ActivityIcon from '@/components/Icons/ActivityIcon.vue'
|
||||
@ -325,21 +318,18 @@ import Toggler from '@/components/Toggler.vue'
|
||||
import Activities from '@/components/Activities.vue'
|
||||
import Breadcrumbs from '@/components/Breadcrumbs.vue'
|
||||
import UserAvatar from '@/components/UserAvatar.vue'
|
||||
import NoteModal from '@/components/NoteModal.vue'
|
||||
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
|
||||
import { TransitionPresets, useTransition } from '@vueuse/core'
|
||||
import {
|
||||
leadStatuses,
|
||||
statusDropdownOptions,
|
||||
openWebsite,
|
||||
secondsToDuration,
|
||||
createToast,
|
||||
} from '@/utils'
|
||||
import { usersStore } from '@/stores/users'
|
||||
import { contactsStore } from '@/stores/contacts'
|
||||
import {
|
||||
createResource,
|
||||
createListResource,
|
||||
FileUploader,
|
||||
ErrorMessage,
|
||||
FeatherIcon,
|
||||
@ -348,14 +338,13 @@ import {
|
||||
Dropdown,
|
||||
Tooltip,
|
||||
Avatar,
|
||||
call,
|
||||
} from 'frappe-ui'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import CameraIcon from '../components/Icons/CameraIcon.vue'
|
||||
|
||||
const { getUser, users } = usersStore()
|
||||
const { getContact, contacts } = contactsStore()
|
||||
const { contacts } = contactsStore()
|
||||
const router = useRouter()
|
||||
|
||||
const props = defineProps({
|
||||
@ -411,49 +400,24 @@ const breadcrumbs = computed(() => {
|
||||
return items
|
||||
})
|
||||
|
||||
const tabs = computed(() => {
|
||||
return [
|
||||
{
|
||||
label: 'Activity',
|
||||
icon: ActivityIcon,
|
||||
content: all_activities(),
|
||||
activityTitle: 'Activity',
|
||||
},
|
||||
{
|
||||
label: 'Emails',
|
||||
icon: EmailIcon,
|
||||
content: lead.data.activities.filter(
|
||||
(activity) => activity.activity_type === 'communication'
|
||||
),
|
||||
activityTitle: 'Emails',
|
||||
},
|
||||
{
|
||||
label: 'Calls',
|
||||
icon: PhoneIcon,
|
||||
content: calls.data,
|
||||
activityTitle: 'Calls',
|
||||
},
|
||||
// {
|
||||
// label: 'Tasks',
|
||||
// icon: TaskIcon,
|
||||
// activityTitle: 'Tasks',
|
||||
// },
|
||||
{
|
||||
label: 'Notes',
|
||||
icon: NoteIcon,
|
||||
activityTitle: 'Notes',
|
||||
content: notes.data,
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
function all_activities() {
|
||||
if (!lead.data) return []
|
||||
if (!calls.data) return lead.data.activities
|
||||
return [...lead.data.activities, ...calls.data].sort(
|
||||
(a, b) => new Date(b.creation) - new Date(a.creation)
|
||||
)
|
||||
}
|
||||
const tabs = [
|
||||
{
|
||||
label: 'Activity',
|
||||
icon: ActivityIcon,
|
||||
},
|
||||
{
|
||||
label: 'Emails',
|
||||
icon: EmailIcon,
|
||||
},
|
||||
{
|
||||
label: 'Calls',
|
||||
icon: PhoneIcon,
|
||||
},
|
||||
{
|
||||
label: 'Notes',
|
||||
icon: NoteIcon,
|
||||
},
|
||||
]
|
||||
|
||||
function changeLeadImage(file) {
|
||||
lead.data.image = file.file_url
|
||||
@ -607,116 +571,6 @@ function convertToDeal() {
|
||||
router.push({ name: 'Deal', params: { dealId: lead.data.name } })
|
||||
}
|
||||
|
||||
const showNoteModal = ref(false)
|
||||
const note = ref({
|
||||
title: '',
|
||||
content: '',
|
||||
})
|
||||
|
||||
const notes = createListResource({
|
||||
type: 'list',
|
||||
doctype: 'CRM Note',
|
||||
cache: ['Notes', props.leadId],
|
||||
fields: ['name', 'title', 'content', 'owner', 'modified'],
|
||||
filters: { lead: props.leadId },
|
||||
orderBy: 'modified desc',
|
||||
pageLength: 999,
|
||||
auto: true,
|
||||
})
|
||||
|
||||
function showNote(n) {
|
||||
note.value = n || {
|
||||
title: '',
|
||||
content: '',
|
||||
}
|
||||
showNoteModal.value = true
|
||||
}
|
||||
|
||||
async function deleteNote(name) {
|
||||
await call('frappe.client.delete', {
|
||||
doctype: 'CRM Note',
|
||||
name,
|
||||
})
|
||||
notes.reload()
|
||||
}
|
||||
|
||||
async function updateNote(note) {
|
||||
if (note.name) {
|
||||
let d = await call('frappe.client.set_value', {
|
||||
doctype: 'CRM Note',
|
||||
name: note.name,
|
||||
fieldname: note,
|
||||
})
|
||||
if (d.name) {
|
||||
notes.reload()
|
||||
}
|
||||
} else {
|
||||
let d = await call('frappe.client.insert', {
|
||||
doc: {
|
||||
doctype: 'CRM Note',
|
||||
title: note.title,
|
||||
content: note.content,
|
||||
lead: props.leadId,
|
||||
},
|
||||
})
|
||||
if (d.name) {
|
||||
notes.reload()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const calls = createListResource({
|
||||
type: 'list',
|
||||
doctype: 'CRM Call Log',
|
||||
cache: ['Call Logs', props.leadId],
|
||||
fields: [
|
||||
'name',
|
||||
'caller',
|
||||
'receiver',
|
||||
'from',
|
||||
'to',
|
||||
'duration',
|
||||
'start_time',
|
||||
'end_time',
|
||||
'status',
|
||||
'type',
|
||||
'recording_url',
|
||||
'creation',
|
||||
'note',
|
||||
],
|
||||
filters: { lead: props.leadId },
|
||||
orderBy: 'creation desc',
|
||||
pageLength: 999,
|
||||
auto: true,
|
||||
transform: (docs) => {
|
||||
docs.forEach((doc) => {
|
||||
doc.activity_type =
|
||||
doc.type === 'Incoming' ? 'incoming_call' : 'outgoing_call'
|
||||
doc.duration = secondsToDuration(doc.duration)
|
||||
if (doc.type === 'Incoming') {
|
||||
doc.caller = {
|
||||
label: getContact(doc.from)?.full_name || 'Unknown',
|
||||
image: getContact(doc.from)?.image,
|
||||
}
|
||||
doc.receiver = {
|
||||
label: getUser(doc.receiver).full_name,
|
||||
image: getUser(doc.receiver).user_image,
|
||||
}
|
||||
} else {
|
||||
doc.caller = {
|
||||
label: getUser(doc.caller).full_name,
|
||||
image: getUser(doc.caller).user_image,
|
||||
}
|
||||
doc.receiver = {
|
||||
label: getContact(doc.to)?.full_name || 'Unknown',
|
||||
image: getContact(doc.to)?.image,
|
||||
}
|
||||
}
|
||||
})
|
||||
return docs
|
||||
},
|
||||
})
|
||||
|
||||
function updateAssignedAgent(email) {
|
||||
lead.data.lead_owner = email
|
||||
updateLead('lead_owner', email)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user