From aa8c2705713b57b74a07f5d59dd3582e1e95f80e Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 30 Aug 2023 20:20:44 +0530
Subject: [PATCH] fix: updated call log ui with name in calls tab

---
 frontend/src/components/Activities.vue  | 59 +++++++++++++++++++++----
 frontend/src/components/ListRowItem.vue |  2 +-
 frontend/src/pages/Deal.vue             | 30 ++++++++++++-
 frontend/src/pages/Lead.vue             | 30 ++++++++++++-
 4 files changed, 110 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
index 0e960811..db211978 100644
--- a/frontend/src/components/Activities.vue
+++ b/frontend/src/components/Activities.vue
@@ -81,7 +81,9 @@
               />
             </div>
           </div>
-          <div class="flex flex-col gap-3 border rounded-lg p-4 mb-3 shadow-sm max-w-[60%]">
+          <div
+            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>
                 {{ call.type == 'Incoming' ? 'Inbound' : 'Outbound' }} call
@@ -99,7 +101,9 @@
               <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">{{ secondsToDuration(call.duration) }}</div>
+                <div class="text-sm">
+                  {{ call.duration }}
+                </div>
               </div>
               <div
                 class="flex items-center gap-1 cursor-pointer select-none"
@@ -125,9 +129,36 @@
             </div>
             <div class="flex items-center justify-between">
               <div class="flex items-center gap-1">
-                <div class="text-sm">{{ call.from }}</div>
-                <FeatherIcon name="arrow-right" class="w-4 h-4 text-gray-600" />
-                <div class="text-sm">{{ call.to }}</div>
+                <Avatar
+                  :image="call.caller.image"
+                  :label="call.caller.label"
+                  size="xl"
+                />
+                <div class="flex flex-col gap-1 ml-1">
+                  <div class="text-base font-medium">
+                    {{ call.caller.label }}
+                  </div>
+                  <div class="text-xs text-gray-600">
+                    {{ call.from }}
+                  </div>
+                </div>
+                <FeatherIcon
+                  name="arrow-right"
+                  class="w-5 h-5 text-gray-600 mx-2"
+                />
+                <Avatar
+                  :image="call.receiver.image"
+                  :label="call.receiver.label"
+                  size="xl"
+                />
+                <div class="flex flex-col gap-1 ml-1">
+                  <div class="text-base font-medium">
+                    {{ call.receiver.label }}
+                  </div>
+                  <div class="text-xs text-gray-600">
+                    {{ call.to }}
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -259,9 +290,16 @@ import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import DurationIcon from '@/components/Icons/DurationIcon.vue'
 import PlayIcon from '@/components/Icons/PlayIcon.vue'
-import { timeAgo, dateFormat, dateTooltipFormat, secondsToDuration } from '@/utils'
+import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
 import { usersStore } from '@/stores/users'
-import { Button, FeatherIcon, Tooltip, Dropdown, TextEditor } from 'frappe-ui'
+import {
+  Button,
+  FeatherIcon,
+  Tooltip,
+  Dropdown,
+  TextEditor,
+  Avatar,
+} from 'frappe-ui'
 import { computed, h } from 'vue'
 
 const { getUser } = usersStore()
@@ -277,7 +315,12 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['makeCall', 'makeNote', 'deleteNote', 'setFocusOnEmail'])
+const emit = defineEmits([
+  'makeCall',
+  'makeNote',
+  'deleteNote',
+  'setFocusOnEmail',
+])
 
 const activities = computed(() => {
   if (props.title == 'Calls') {
diff --git a/frontend/src/components/ListRowItem.vue b/frontend/src/components/ListRowItem.vue
index 6010f8bc..f8bb3872 100644
--- a/frontend/src/components/ListRowItem.vue
+++ b/frontend/src/components/ListRowItem.vue
@@ -1,7 +1,7 @@
 <template>
   <Tooltip
     :text="tooltipText"
-    class="flex items-center space-x-2.5"
+    class="flex items-center space-x-2"
     :class="align == 'text-right' ? 'justify-end' : ''"
   >
     <slot name="prefix"></slot>
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 9d25aee3..a7744412 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -312,6 +312,7 @@ import {
   dealStatuses,
   statusDropdownOptions,
   openWebsite,
+  secondsToDuration,
 } from '@/utils'
 import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
@@ -330,7 +331,7 @@ import {
 import { ref, computed, inject } from 'vue'
 
 const { getUser, users } = usersStore()
-const { contacts } = contactsStore()
+const { getContact, contacts } = contactsStore()
 
 const makeCall = inject('makeOutgoingCall')
 
@@ -570,6 +571,8 @@ const calls = createListResource({
   cache: ['Call Logs', props.dealId],
   fields: [
     'name',
+    'caller',
+    'receiver',
     'from',
     'to',
     'duration',
@@ -585,6 +588,31 @@ const calls = createListResource({
   orderBy: 'modified desc',
   pageLength: 999,
   auto: true,
+  transform: (docs) => {
+    docs.forEach((doc) => {
+      doc.duration = secondsToDuration(doc.duration)
+      if (doc.type === 'Incoming') {
+        doc.caller = {
+          label: getContact(doc.from)?.full_name || 'Unknown',
+          image: getContact(doc.from)?.image,
+        }
+        doc.receiver = {
+          label: getUser(doc.receiver).full_name,
+          image: getUser(doc.receiver).user_image,
+        }
+      } else {
+        doc.caller = {
+          label: getUser(doc.caller).full_name,
+          image: getUser(doc.caller).user_image,
+        }
+        doc.receiver = {
+          label: getContact(doc.to)?.full_name || 'Unknown',
+          image: getContact(doc.to)?.image,
+        }
+      }
+    })
+    return docs
+  },
 })
 </script>
 
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index bdc5d89d..f3ac3d65 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -302,6 +302,7 @@ import {
   leadStatuses,
   statusDropdownOptions,
   openWebsite,
+  secondsToDuration,
 } from '@/utils'
 import { usersStore } from '@/stores/users'
 import { contactsStore } from '@/stores/contacts'
@@ -321,7 +322,7 @@ import { ref, computed, inject } from 'vue'
 import { useRouter } from 'vue-router'
 
 const { getUser, users } = usersStore()
-const { contacts } = contactsStore()
+const { getContact, contacts } = contactsStore()
 const router = useRouter()
 
 const makeCall = inject('makeOutgoingCall')
@@ -603,6 +604,8 @@ const calls = createListResource({
   cache: ['Call Logs', props.leadId],
   fields: [
     'name',
+    'caller',
+    'receiver',
     'from',
     'to',
     'duration',
@@ -618,6 +621,31 @@ const calls = createListResource({
   orderBy: 'modified desc',
   pageLength: 999,
   auto: true,
+  transform: (docs) => {
+    docs.forEach((doc) => {
+      doc.duration = secondsToDuration(doc.duration)
+      if (doc.type === 'Incoming') {
+        doc.caller = {
+          label: getContact(doc.from)?.full_name || 'Unknown',
+          image: getContact(doc.from)?.image,
+        }
+        doc.receiver = {
+          label: getUser(doc.receiver).full_name,
+          image: getUser(doc.receiver).user_image,
+        }
+      } else {
+        doc.caller = {
+          label: getUser(doc.caller).full_name,
+          image: getUser(doc.caller).user_image,
+        }
+        doc.receiver = {
+          label: getContact(doc.to)?.full_name || 'Unknown',
+          image: getContact(doc.to)?.image,
+        }
+      }
+    })
+    return docs
+  },
 })
 </script>