From 8d562f3887eec09d8b0d651f4d8d7963b1f5fbd5 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 28 Aug 2023 03:01:40 +0530
Subject: [PATCH] fix: create call logs list page and added in sidebar

---
 frontend/src/components/AppSidebar.vue |   6 ++
 frontend/src/components/CallUI.vue     |  20 ++--
 frontend/src/pages/CallLogs.vue        | 124 +++++++++++++++++++++++++
 frontend/src/router.js                 |   5 +
 4 files changed, 145 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/pages/CallLogs.vue

diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index d1be69f7..5f1698fe 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -37,6 +37,7 @@ import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import DashboardIcon from '@/components/Icons/DashboardIcon.vue'
+import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import NavLinks from '@/components/NavLinks.vue'
 
 const navigations = [
@@ -60,6 +61,11 @@ const navigations = [
     icon: NoteIcon,
     route: { name: 'Notes' },
   },
+  {
+    name: 'Call Logs',
+    icon: PhoneIcon,
+    route: { name: 'Call Logs' },
+  },
   {
     name: 'Dashboard',
     icon: DashboardIcon,
diff --git a/frontend/src/components/CallUI.vue b/frontend/src/components/CallUI.vue
index 34d20ac9..53aeb564 100644
--- a/frontend/src/components/CallUI.vue
+++ b/frontend/src/components/CallUI.vue
@@ -250,18 +250,18 @@ function addDeviceListeners() {
 
   device.on('disconnect', (conn) => {
     log.value = 'Call ended disconnect.'
-    update_call_log(conn)
+    // update_call_log(conn)
   })
 }
 
-function update_call_log(conn, status = 'Completed') {
-  console.log('connection', conn)
-  if (!conn.parameters.CallSid) return
-  call('crm.twilio.api.update_call_log', {
-    call_sid: conn.parameters.CallSid,
-    status: status,
-  })
-}
+// function update_call_log(conn, status = 'Completed') {
+//   console.log('connection', conn)
+//   if (!conn.parameters.CallSid) return
+//   call('crm.twilio.api.update_call_log', {
+//     call_sid: conn.parameters.CallSid,
+//     status: status,
+//   })
+// }
 
 function toggleMute() {
   if (_call.value.isMuted()) {
@@ -370,7 +370,7 @@ async function makeOutgoingCall(number) {
         callStatus.value = ''
         muted.value = false
         counterUp.value.stop()
-        update_call_log(conn)
+        // update_call_log(conn)
       })
       _call.value.on('cancel', () => {
         log.value = `Call ended from makeOutgoing call cancel.`
diff --git a/frontend/src/pages/CallLogs.vue b/frontend/src/pages/CallLogs.vue
new file mode 100644
index 00000000..98af5c94
--- /dev/null
+++ b/frontend/src/pages/CallLogs.vue
@@ -0,0 +1,124 @@
+<template>
+  <LayoutHeader>
+    <template #left-header>
+      <Breadcrumbs :items="[{ label: list.title }]" />
+    </template>
+  </LayoutHeader>
+  <div class="flex justify-between items-center px-5 pb-2.5 border-b">
+    <div class="flex items-center gap-2">
+      <Button label="Sort">
+        <template #prefix><SortIcon class="h-4" /></template>
+      </Button>
+      <Button label="Filter">
+        <template #prefix><FilterIcon class="h-4" /></template>
+      </Button>
+    </div>
+    <div class="flex items-center gap-2">
+      <Button icon="more-horizontal" />
+    </div>
+  </div>
+  <ListView :list="list" :columns="columns" :rows="rows" row-key="name" />
+</template>
+
+<script setup>
+import ListView from '@/components/ListView.vue'
+import LayoutHeader from '@/components/LayoutHeader.vue'
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
+import SortIcon from '@/components/Icons/SortIcon.vue'
+import FilterIcon from '@/components/Icons/FilterIcon.vue'
+import { Button, createListResource } from 'frappe-ui'
+import { computed } from 'vue'
+
+const list = {
+  title: 'Call Logs',
+  plural_label: 'Call Logs',
+  singular_label: 'Call Log',
+}
+
+const callLogs = createListResource({
+  type: 'list',
+  doctype: 'CRM Call Log',
+  fields: [
+    'from',
+    'to',
+    'duration',
+    'start_time',
+    'end_time',
+    'status',
+    'type',
+    'recording_url',
+    'modified',
+  ],
+  orderBy: 'modified desc',
+  cache: 'Call Logs',
+  pageLength: 999,
+  auto: true,
+})
+
+const columns = [
+  {
+    label: 'From',
+    key: 'from',
+    type: 'data',
+    size: 'w-32',
+  },
+  {
+    label: 'To',
+    key: 'to',
+    type: 'data',
+    size: 'w-32',
+  },
+  {
+    label: 'Duration',
+    key: 'duration',
+    type: 'data',
+    size: 'w-20',
+  },
+  {
+    label: 'Type',
+    key: 'type',
+    type: 'data',
+    size: 'w-32',
+  },
+  {
+    label: 'Status',
+    key: 'status',
+    type: 'data',
+    size: 'w-32',
+  },
+  {
+    label: 'Start Time',
+    key: 'start_time',
+    type: 'data',
+    size: 'w-32',
+  },
+  {
+    label: 'End Time',
+    key: 'end_time',
+    type: 'data',
+    size: 'w-32',
+  },
+  {
+    label: 'Last modified',
+    key: 'modified',
+    type: 'pretty_date',
+    size: 'w-28',
+  },
+]
+
+const rows = computed(() => {
+  return callLogs.data?.map((callLog) => {
+    return {
+      name: callLog.name,
+      from: callLog.from,
+      to: callLog.to,
+      duration: callLog.duration,
+      type: callLog.type,
+      status: callLog.status,
+      start_time: callLog.start_time,
+      end_time: callLog.end_time,
+      modified: callLog.modified,
+    }
+  })
+})
+</script>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 50da7de9..55ac8790 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -39,6 +39,11 @@ const routes = [
     name: 'Contacts',
     component: () => import('@/pages/Contacts.vue'),
   },
+  {
+    path: '/call-logs',
+    name: 'Call Logs',
+    component: () => import('@/pages/CallLogs.vue'),
+  },
   {
     path: '/dashboard',
     name: 'Dashboard',