test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show calls in activities tab

Browse Source
This commit is contained in:
Shariq Ansari 2023-08-31 13:12:37 +05:30
parent 6ce980beae
commit e0bdecada4
4 changed files with 121 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
frontend/src/components/Activities.vue
View File

@ -91,9 +91,9 @@
<div>
<Tooltip
class="text-gray-600 text-sm"
:text="dateFormat(call.modified, dateTooltipFormat)"
:text="dateFormat(call.creation, dateTooltipFormat)"
>
{{ timeAgo(call.modified) }}
{{ timeAgo(call.creation) }}
</Tooltip>
</div>
</div>
@ -208,6 +208,89 @@
<div class="px-1" v-html="activity.data.content" />
</div>
</div>
<div
v-else-if="
activity.activity_type == 'incoming_call' ||
activity.activity_type == 'outgoing_call'
"
class="flex flex-col gap-3 border rounded-lg p-4 mb-3 shadow-sm max-w-[60%]"
>
<div class="flex items-center justify-between">
<div>
{{ activity.type == 'Incoming' ? 'Inbound' : 'Outbound' }} call
</div>
<div>
<Tooltip
class="text-gray-600 text-sm"
:text="dateFormat(activity.creation, dateTooltipFormat)"
>
{{ timeAgo(activity.creation) }}
</Tooltip>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1">
<DurationIcon class="w-4 h-4 text-gray-600" />
<div class="text-sm text-gray-600">Duration</div>
<div class="text-sm">
{{ activity.duration }}
</div>
</div>
<div
class="flex items-center gap-1 cursor-pointer select-none"
@click="activity.show_recording = !activity.show_recording"
>
<PlayIcon class="w-4 h-4 text-gray-600" />
<div class="text-sm text-gray-600">
{{ activity.show_recording ? 'Hide recording' : 'Listen to call' }}
</div>
</div>
</div>
<div
v-if="activity.show_recording"
class="flex items-center justify-between border rounded"
>
<audio
class="audio-control"
controls
:src="activity.recording_url"
></audio>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-1">
<Avatar
:image="activity.caller.image"
:label="activity.caller.label"
size="xl"
/>
<div class="flex flex-col gap-1 ml-1">
<div class="text-base font-medium">
{{ activity.caller.label }}
</div>
<div class="text-xs text-gray-600">
{{ activity.from }}
</div>
</div>
<FeatherIcon
name="arrow-right"
class="w-5 h-5 text-gray-600 mx-2"
/>
<Avatar
:image="activity.receiver.image"
:label="activity.receiver.label"
size="xl"
/>
<div class="flex flex-col gap-1 ml-1">
<div class="text-base font-medium">
{{ activity.receiver.label }}
</div>
<div class="text-xs text-gray-600">
{{ activity.to }}
</div>
</div>
</div>
</div>
</div>
<div v-else class="flex flex-col gap-3 pb-6">
<div
class="flex items-start justify-stretch gap-2 text-base leading-6"
@ -384,6 +467,10 @@ function timelineIcon(activity_type) {
return 'at-sign'
} else if (activity_type == 'comment') {
return 'file-text'
} else if (activity_type == 'incoming_call') {
return 'phone-incoming'
} else if (activity_type == 'outgoing_call') {
return 'phone-outgoing'
}
return 'edit'
}

4
frontend/src/pages/CallLog.vue
View File

@ -81,9 +81,9 @@
<div>
<Tooltip
class="text-gray-600 text-sm"
:text="dateFormat(callLog.data.modified, dateTooltipFormat)"
:text="dateFormat(callLog.data.creation, dateTooltipFormat)"
>
{{ timeAgo(callLog.data.modified) }}
{{ timeAgo(callLog.data.creation) }}
</Tooltip>
</div>
</div>

18
frontend/src/pages/Deal.vue
View File

@ -380,7 +380,7 @@ const tabs = computed(() => {
{
label: 'Activity',
icon: ActivityIcon,
content: deal.data.activities,
content: all_activities(),
activityTitle: 'Activity log',
},
{
@ -411,6 +411,17 @@ const tabs = computed(() => {
]
})
function all_activities() {
if (!lead.data) return []
if (!calls.data) return lead.data.activities
console.log(lead.data.activities[0].creation)
console.log(calls.data[0].creation)
return [
...lead.data.activities,
...calls.data,
].sort((a, b) => new Date(b.creation) - new Date(a.creation))
}
const tabRef = ref([])
const indicator = ref(null)
@ -581,15 +592,16 @@ const calls = createListResource({
'status',
'type',
'recording_url',
'modified',
'creation',
'note',
],
filters: { lead: props.dealId },
orderBy: 'modified desc',
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 = {

18
frontend/src/pages/Lead.vue
View File

@ -372,7 +372,7 @@ const tabs = computed(() => {
{
label: 'Activity',
icon: ActivityIcon,
content: lead.data.activities,
content: all_activities(),
activityTitle: 'Activity log',
},
{
@ -403,6 +403,17 @@ const tabs = computed(() => {
]
})
function all_activities() {
if (!lead.data) return []
if (!calls.data) return lead.data.activities
console.log(lead.data.activities[0].creation)
console.log(calls.data[0].creation)
return [
...lead.data.activities,
...calls.data,
].sort((a, b) => new Date(b.creation) - new Date(a.creation))
}
const tabRef = ref([])
const indicator = ref(null)
@ -614,15 +625,16 @@ const calls = createListResource({
'status',
'type',
'recording_url',
'modified',
'creation',
'note',
],
filters: { lead: props.leadId },
orderBy: 'modified desc',
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 = {