129 lines
4.2 KiB
Vue
129 lines
4.2 KiB
Vue
<template>
|
|
<div @click="showCallLogDetailModal = true" class="cursor-pointer">
|
|
<div class="mb-1 flex items-center justify-stretch gap-2 py-1 text-base">
|
|
<div class="inline-flex items-center flex-wrap gap-1 text-ink-gray-5">
|
|
<Avatar
|
|
:image="activity._caller.image"
|
|
:label="activity._caller.label"
|
|
size="md"
|
|
/>
|
|
<span class="font-medium text-ink-gray-8 ml-1">
|
|
{{ activity._caller.label }}
|
|
</span>
|
|
<span>{{
|
|
activity.type == 'Incoming'
|
|
? __('has reached out')
|
|
: __('has made a call')
|
|
}}</span>
|
|
</div>
|
|
<div class="ml-auto whitespace-nowrap">
|
|
<Tooltip :text="formatDate(activity.creation)">
|
|
<div class="text-sm text-ink-gray-5">
|
|
{{ __(timeAgo(activity.creation)) }}
|
|
</div>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex flex-col gap-2 border border-outline-gray-modals rounded-md bg-surface-cards px-3 py-2.5 text-ink-gray-9"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<div class="inline-flex gap-2 items-center text-base font-medium">
|
|
<div>
|
|
{{
|
|
activity.type == 'Incoming'
|
|
? __('Inbound Call')
|
|
: __('Outbound Call')
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<MultipleAvatar
|
|
:avatars="[
|
|
{
|
|
image: activity._caller.image,
|
|
label: activity._caller.label,
|
|
name: activity._caller.label,
|
|
},
|
|
{
|
|
image: activity._receiver.image,
|
|
label: activity._receiver.label,
|
|
name: activity._receiver.label,
|
|
},
|
|
]"
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center flex-wrap gap-2">
|
|
<Badge :label="formatDate(activity.creation, 'MMM D, dddd')">
|
|
<template #prefix>
|
|
<CalendarIcon class="size-3" />
|
|
</template>
|
|
</Badge>
|
|
<Badge
|
|
v-if="activity.status == 'Completed'"
|
|
:label="activity._duration"
|
|
>
|
|
<template #prefix>
|
|
<DurationIcon class="size-3" />
|
|
</template>
|
|
</Badge>
|
|
<Badge
|
|
v-if="activity.recording_url"
|
|
:label="activity.show_recording ? __('Hide Recording') : __('Listen')"
|
|
class="cursor-pointer"
|
|
@click.stop="activity.show_recording = !activity.show_recording"
|
|
>
|
|
<template #prefix>
|
|
<PlayIcon class="size-3" />
|
|
</template>
|
|
</Badge>
|
|
<Badge
|
|
:label="statusLabelMap[activity.status]"
|
|
:theme="statusColorMap[activity.status]"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="activity.show_recording && activity.recording_url"
|
|
class="flex flex-col items-center justify-between"
|
|
@click.stop
|
|
>
|
|
<AudioPlayer :src="activity.recording_url" />
|
|
</div>
|
|
</div>
|
|
<CallLogDetailModal
|
|
v-model="showCallLogDetailModal"
|
|
v-model:callLogModal="showCallLogModal"
|
|
v-model:callLog="callLog"
|
|
/>
|
|
<CallLogModal v-model="showCallLogModal" v-model:callLog="callLog.data" />
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import PlayIcon from '@/components/Icons/PlayIcon.vue'
|
|
import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
|
|
import DurationIcon from '@/components/Icons/DurationIcon.vue'
|
|
import MultipleAvatar from '@/components/MultipleAvatar.vue'
|
|
import AudioPlayer from '@/components/Activities/AudioPlayer.vue'
|
|
import CallLogDetailModal from '@/components/Modals/CallLogDetailModal.vue'
|
|
import CallLogModal from '@/components/Modals/CallLogModal.vue'
|
|
import { statusLabelMap, statusColorMap } from '@/utils/callLog.js'
|
|
import { formatDate, timeAgo } from '@/utils'
|
|
import { Avatar, Badge, Tooltip, createResource } from 'frappe-ui'
|
|
import { ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
activity: Object,
|
|
})
|
|
|
|
const callLog = createResource({
|
|
url: 'crm.fcrm.doctype.crm_call_log.crm_call_log.get_call_log',
|
|
params: { name: props.activity.name },
|
|
cache: ['call_log', props.activity.name],
|
|
auto: true,
|
|
})
|
|
const showCallLogDetailModal = ref(false)
|
|
const showCallLogModal = ref(false)
|
|
</script>
|