fix: using name of contact/agent on call logs list

crm/crm/doctype/crm_call_log/crm_call_log.json

@@ -11,17 +11,18 @@
   "id",
   "from",
   "status",
-  "call_received_by",
+  "duration",
   "medium",
   "start_time",
-  "note",
-  "column_break_ufnp",
-  "type",
-  "to",
   "lead",
-  "duration",
+  "column_break_ufnp",
+  "to",
+  "type",
+  "receiver",
+  "caller",
   "recording_url",
-  "end_time"
+  "end_time",
+  "note"
  ],
  "fields": [
   {
@@ -43,13 +44,6 @@
    "options": "Ringing\nIn Progress\nCompleted\nFailed\nBusy\nNo Answer\nQueued\nCanceled",
    "read_only": 1
   },
-  {
-   "depends_on": "to",
-   "fieldname": "call_received_by",
-   "fieldtype": "Link",
-   "label": "Call Received By",
-   "options": "User"
-  },
   {
    "fieldname": "start_time",
    "fieldtype": "Datetime",
@@ -106,11 +100,25 @@
    "fieldtype": "Link",
    "label": "Note",
    "options": "CRM Note"
+  },
+  {
+   "depends_on": "eval:doc.type == 'Incoming'",
+   "fieldname": "receiver",
+   "fieldtype": "Link",
+   "label": "Call Received By",
+   "options": "User"
+  },
+  {
+   "depends_on": "eval:doc.type == 'Outgoing'",
+   "fieldname": "caller",
+   "fieldtype": "Link",
+   "label": "Caller",
+   "options": "User"
   }
  ],
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2023-08-28 11:42:33.487807",
+ "modified": "2023-08-30 15:39:46.613734",
  "modified_by": "Administrator",
  "module": "CRM",
  "name": "CRM Call Log",

crm/twilio/twilio_handler.py

@@ -220,10 +220,17 @@ class TwilioCallDetails:
 		return ' '.join(twilio_status.split('-')).title()
 
 	def to_dict(self):
+		"""Convert call details into dict.
+		"""
+		direction = self.get_direction()
+		caller = frappe.session.user if direction == 'Outgoing' else ''
+		receiver = frappe.session.user if direction == 'Incoming' else ''
 		return {
-			'type': self.get_direction(),
+			'type': direction,
 			'status': self.call_status,
 			'id': self.call_sid,
 			'from': self.get_from_number(),
-			'to': self.get_to_number()
+			'to': self.get_to_number(),
+			'reciever': receiver,
+			'caller': caller,
 		}

frontend/src/components/ListRowItem.vue

@@ -2,6 +2,7 @@
   <Tooltip
     :text="tooltipText"
     class="flex items-center space-x-2.5"
+    :class="align == 'text-right' ? 'justify-end' : ''"
   >
     <slot name="prefix"></slot>
     <slot>
@@ -21,6 +22,10 @@ const props = defineProps({
     type: String,
     default: 'text',
   },
+  align: {
+    type: String,
+    default: 'left',
+  },
   value: {
     type: [String, Number, Object],
     default: '',

frontend/src/components/ListView.vue

@@ -44,6 +44,7 @@
             <ListRowItem
               :value="getValue(row[column.key]).label"
               :type="column.type"
+              :align="column.align"
             >
               <template #prefix>
                 <div v-if="column.type === 'indicator'">

frontend/src/pages/CallLogs.vue

@@ -27,9 +27,14 @@ import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import SortIcon from '@/components/Icons/SortIcon.vue'
 import FilterIcon from '@/components/Icons/FilterIcon.vue'
 import { secondsToDuration } from '@/utils'
+import { usersStore } from '@/stores/users'
+import { contactsStore } from '@/stores/contacts'
 import { Button, createListResource } from 'frappe-ui'
 import { computed } from 'vue'
 
+const { getUser } = usersStore()
+const { getContact } = contactsStore()
+
 const list = {
   title: 'Call Logs',
   plural_label: 'Call Logs',
@@ -41,6 +46,8 @@ const callLogs = createListResource({
   doctype: 'CRM Call Log',
   fields: [
     'name',
+    'caller',
+    'receiver',
     'from',
     'to',
     'duration',
@@ -60,22 +67,16 @@ const callLogs = createListResource({
 const columns = [
   {
     label: 'From',
-    key: 'from',
-    type: 'data',
+    key: 'caller',
+    type: 'avatar',
     size: 'w-32',
   },
   {
     label: 'To',
-    key: 'to',
-    type: 'data',
+    key: 'receiver',
+    type: 'avatar',
     size: 'w-32',
   },
-  {
-    label: 'Duration',
-    key: 'duration',
-    type: 'icon',
-    size: 'w-20',
-  },
   {
     label: 'Type',
     key: 'type',
@@ -88,6 +89,25 @@ const columns = [
     type: 'badge',
     size: 'w-32',
   },
+  {
+    label: 'Duration',
+    key: 'duration',
+    type: 'icon',
+    size: 'w-20',
+    align: 'text-right'
+  },
+  {
+    label: 'From (number)',
+    key: 'from',
+    type: 'data',
+    size: 'w-32',
+  },
+  {
+    label: 'To (number)',
+    key: 'to',
+    type: 'data',
+    size: 'w-32',
+  },
   {
     label: 'Created on',
     key: 'creation',
@@ -98,8 +118,33 @@ const columns = [
 
 const rows = computed(() => {
   return callLogs.data?.map((callLog) => {
+    let caller = callLog.caller
+    let receiver = callLog.receiver
+
+    if (callLog.type === 'Incoming') {
+      caller = {
+        label: getContact(callLog.from)?.full_name || 'Unknown',
+        image: getContact(callLog.from)?.image,
+      }
+      receiver = {
+        label: getUser(receiver).full_name,
+        image: getUser(receiver).user_image,
+      }
+    } else {
+      caller = {
+        label: getUser(caller).full_name,
+        image: getUser(caller).user_image,
+      }
+      receiver = {
+        label: getContact(callLog.to)?.full_name || 'Unknown',
+        image: getContact(callLog.from)?.image,
+      }
+    }
+
     return {
       name: callLog.name,
+      caller: caller,
+      receiver: receiver,
       from: callLog.from,
       to: callLog.to,
       duration: {