fix: show calls in activities tab

frappe · Aug 31, 2023 · e0bdeca · e0bdeca
1 parent 6ce980b
commit e0bdeca
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 10 deletions.
diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
@@ -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'
 }

diff --git a/frontend/src/pages/CallLog.vue b/frontend/src/pages/CallLog.vue
@@ -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>

diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
@@ -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 = {

diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
@@ -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 = {