From e0bdecada4e87c103b783d717f73e2159fb60268 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Thu, 31 Aug 2023 13:12:37 +0530
Subject: [PATCH] fix: show calls in activities tab

---
 frontend/src/components/Activities.vue | 91 +++++++++++++++++++++++++-
 frontend/src/pages/CallLog.vue         |  4 +-
 frontend/src/pages/Deal.vue            | 18 ++++-
 frontend/src/pages/Lead.vue            | 18 ++++-
 4 files changed, 121 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
index db2119787..35ae48146 100644
--- 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
index 1610ca655..2ab208264 100644
--- 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
index a7744412a..ab22818a7 100644
--- 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
index f3ac3d655..d17b27640 100644
--- 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 = {