1<template>
2 <div class="w-full">
3 <div class="mb-1 flex items-center justify-stretch gap-2 py-1 text-base">
4 <div class="inline-flex items-center flex-wrap gap-1 text-ink-gray-5">
5 <Avatar
6 :image="activity?._caller?.image"
7 :label="activity?._caller?.label"
8 size="md"
9 />
10 <span class="font-medium text-ink-gray-8 ms-1">
11 {{ activity?._caller?.label }}
12 </span>
13 <span>{{
14 activity.call_type == "Incoming"
15 ? __("has reached out")
16 : __("has made a call")
17 }}</span>
18 </div>
19 <div class="ms-auto whitespace-nowrap">
20 <Tooltip :text="dateFormat(activity.creation, 'MMM D, dddd')">
21 <div class="text-sm text-ink-gray-5">
22 {{ __(timeAgo(activity.creation)) }}
23 </div>
24 </Tooltip>
25 </div>
26 </div>
27 <div
28 @click="showCallLogDetailModal = true"
29 class="flex flex-col gap-2 cursor-pointer border-transparent shadow rounded-5 bg-surface-elevation-1 px-3 py-2.5 text-ink-gray-9"
30 >
31 <div class="flex items-center justify-between">
32 <div class="inline-flex gap-2 items-center text-base-medium">
33 <div>
34 {{
35 activity.call_type == "Incoming"
36 ? __("Inbound Call")
37 : __("Outbound Call")
38 }}
39 </div>
40 </div>
41 <div>
42 <MultipleAvatar
43 :avatars="[
44 {
45 name: activity._caller.label,
46 label: activity._caller.label,
47 image: activity._caller.image,
48 },
49 {
50 name: activity._receiver.label,
51 label: activity._receiver.label,
52 image: activity._receiver.image,
53 },
54 ]"
55 size="sm"
56 />
57 </div>
58 </div>
59 <div class="flex items-center flex-wrap gap-2">
60 <Badge :label="dateFormat(activity.creation, 'MMM D, dddd')">
61 <template #prefix>
62 <CalendarIcon class="size-3" />
63 </template>
64 </Badge>
65 <Badge v-if="activity.status == 'Completed'" :label="activity.duration">
66 <template #prefix>
67 <DurationIcon class="size-3" />
68 </template>
69 </Badge>
70 <Badge
71 v-if="activity.recording_url"
72 :label="__('Listen')"
73 class="cursor-pointer"
74 >
75 <template #prefix>
76 <PlayIcon class="size-3" />
77 </template>
78 </Badge>
79 <Badge
80 :label="statusLabelMap[activity.status]"
81 :theme="statusColorMap[activity.status]"
82 />
83 </div>
84 </div>
85 <CallLogDetailModal
86 v-model="showCallLogDetailModal"
87 v-model:callLogModal="showCallLogModal"
88 :callLogId="props.activity.name"
89 :hideTicket="true"
90 />
91 <CallLogModal
92 v-model="showCallLogModal"
93 :callLogId="props.activity.name"
94 @afterInsert="refreshTicket()"
95 />
96 </div>
97</template>
98<script setup lang="ts">
99import { dateFormat, timeAgo } from "@/utils";
100import { Avatar, Badge, Tooltip } from "frappe-ui";
101import { inject, ref } from "vue";
102import MultipleAvatar from "./MultipleAvatar.vue";
103import CalendarIcon from "./icons/CalendarIcon.vue";
104import DurationIcon from "./icons/DurationIcon.vue";
105import PlayIcon from "./icons/PlayIcon.vue";
106import { statusColorMap, statusLabelMap } from "@/pages/call-logs/utils";
107import CallLogDetailModal from "@/pages/call-logs/CallLogDetailModal.vue";
108import CallLogModal from "@/pages/call-logs/CallLogModal.vue";
109
110const props = defineProps({
111 activity: Object,
112});
113
114const showCallLogDetailModal = ref(false);
115const showCallLogModal = ref(false);
116
117const refreshTicket = inject<() => void>("refreshTicket");
118</script>
119