From f4a2fb15f8e5722c650cb98e85bddd9fc3b89fc7 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 28 Aug 2023 15:29:56 +0530
Subject: [PATCH] fix: created call log in lead/deal calls tab

---
 frontend/src/components/Activities.vue        | 94 +++++++++++++++++++
 .../src/components/Icons/DurationIcon.vue     | 24 +++++
 .../src/components/Icons/MaximizeIcon.vue     | 19 ++++
 .../src/components/Icons/MinimizeIcon.vue     | 27 +++---
 frontend/src/components/Icons/PlayIcon.vue    | 18 ++++
 frontend/src/pages/CallLog.vue                |  4 +-
 frontend/src/pages/Deal.vue                   | 31 +++++-
 frontend/src/pages/Lead.vue                   | 31 +++++-
 8 files changed, 221 insertions(+), 27 deletions(-)
 create mode 100644 frontend/src/components/Icons/DurationIcon.vue
 create mode 100644 frontend/src/components/Icons/MaximizeIcon.vue
 create mode 100644 frontend/src/components/Icons/PlayIcon.vue

diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
index 4846d4cc..df23913f 100644
--- a/frontend/src/components/Activities.vue
+++ b/frontend/src/components/Activities.vue
@@ -63,6 +63,77 @@
         </div>
       </div>
     </div>
+    <div v-else-if="title == 'Calls'">
+      <div v-for="(call, i) in activities">
+        <div class="grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-5">
+          <div
+            class="relative flex justify-center after:absolute after:border-l after:border-gray-300 after:top-0 after:left-[50%] after:-z-10"
+            :class="i != activities.length - 1 ? 'after:h-full' : 'after:h-4'"
+          >
+            <div
+              class="flex items-center justify-center rounded-full outline outline-4 outline-white w-6 h-6 bg-gray-200 mt-[15px] z-10"
+            >
+              <FeatherIcon
+                :name="
+                  call.type == 'Incoming' ? 'phone-incoming' : 'phone-outgoing'
+                "
+                class="w-3.5 h-3.5 text-gray-600"
+              />
+            </div>
+          </div>
+          <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
+              </div>
+              <div>
+                <Tooltip
+                  class="text-gray-600 text-sm"
+                  :text="dateFormat(call.modified, dateTooltipFormat)"
+                >
+                  {{ timeAgo(call.modified) }}
+                </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">{{ call.duration }}s</div>
+              </div>
+              <div
+                class="flex items-center gap-1 cursor-pointer select-none"
+                @click="call.show_recording = !call.show_recording"
+              >
+                <PlayIcon class="w-4 h-4 text-gray-600" />
+                <div class="text-sm text-gray-600">
+                  {{
+                    call.show_recording ? 'Hide recording' : 'Listen to call'
+                  }}
+                </div>
+              </div>
+            </div>
+            <div
+              v-if="call.show_recording"
+              class="flex items-center justify-between border rounded"
+            >
+              <audio
+                class="audio-control"
+                controls
+                :src="call.recording_url"
+              ></audio>
+            </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>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <div v-else v-for="(activity, i) in activities">
       <div class="grid grid-cols-[30px_minmax(auto,_1fr)] gap-4 px-5">
         <div
@@ -180,6 +251,8 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import EmailIcon from '@/components/Icons/EmailIcon.vue'
 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 } from '@/utils'
 import { usersStore } from '@/stores/users'
 import { Button, FeatherIcon, Tooltip, Dropdown, TextEditor } from 'frappe-ui'
@@ -201,6 +274,12 @@ const props = defineProps({
 const emit = defineEmits(['makeCall', 'makeNote', 'deleteNote'])
 
 const activities = computed(() => {
+  if (props.title == 'Calls') {
+    props.activities.forEach((activity) => {
+      activity.show_recording = false
+    })
+    return props.activities
+  }
   props.activities.forEach((activity) => {
     activity.owner_name = getUser(activity.owner).full_name
     activity.icon = timelineIcon(activity.activity_type)
@@ -260,3 +339,18 @@ function timelineIcon(activity_type) {
   return 'edit'
 }
 </script>
+
+<style scoped>
+.audio-control {
+  width: 100%;
+  height: 40px;
+  outline: none;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+.audio-control::-webkit-media-controls-panel {
+  background-color: white;
+}
+</style>
diff --git a/frontend/src/components/Icons/DurationIcon.vue b/frontend/src/components/Icons/DurationIcon.vue
new file mode 100644
index 00000000..3a88cfc7
--- /dev/null
+++ b/frontend/src/components/Icons/DurationIcon.vue
@@ -0,0 +1,24 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z"
+      stroke="currentColor"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8.00024 4.97693V8.00018L10.1666 10.1667"
+      stroke="currentColor"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/Icons/MaximizeIcon.vue b/frontend/src/components/Icons/MaximizeIcon.vue
new file mode 100644
index 00000000..58cd72b8
--- /dev/null
+++ b/frontend/src/components/Icons/MaximizeIcon.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-maximize-2"
+  >
+    <polyline points="15 3 21 3 21 9" />
+    <polyline points="9 21 3 21 3 15" />
+    <line x1="21" y1="3" x2="14" y2="10" />
+    <line x1="3" y1="21" x2="10" y2="14" />
+  </svg>
+</template>
diff --git a/frontend/src/components/Icons/MinimizeIcon.vue b/frontend/src/components/Icons/MinimizeIcon.vue
index dbdba9f7..94156b9a 100644
--- a/frontend/src/components/Icons/MinimizeIcon.vue
+++ b/frontend/src/components/Icons/MinimizeIcon.vue
@@ -1,24 +1,19 @@
 <template>
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width="16"
     height="16"
-    viewBox="0 0 16 16"
+    viewBox="0 0 24 24"
     fill="none"
-    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-minimize-2"
   >
-    <path
-      d="M2.66667 9.33331H6.66667V13.3333"
-      stroke="currentColor"
-      stroke-width="1.33333"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M13.3333 6.66669H9.33333V2.66669"
-      stroke="currentColor"
-      stroke-width="1.33333"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
+    <polyline points="4 14 10 14 10 20" />
+    <polyline points="20 10 14 10 14 4" />
+    <line x1="14" y1="10" x2="21" y2="3" />
+    <line x1="3" y1="21" x2="10" y2="14" />
   </svg>
 </template>
diff --git a/frontend/src/components/Icons/PlayIcon.vue b/frontend/src/components/Icons/PlayIcon.vue
new file mode 100644
index 00000000..a2c1a03a
--- /dev/null
+++ b/frontend/src/components/Icons/PlayIcon.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19C14.9706 19 19 14.9706 19 10C19 7.61305 18.0518 5.32387 16.364 3.63604C14.6761 1.94821 12.3869 1 10 1Z"
+      fill="#DEEEFC"
+    />
+    <path
+      d="M13.2581 10.5593L9.02502 13.3556C8.7895 13.5169 8.48212 13.5452 8.21897 13.4297C7.95581 13.3143 7.77698 13.0728 7.75 12.7964V7.20365C7.77698 6.92722 7.95581 6.68568 8.21897 6.57025C8.48212 6.45482 8.7895 6.48309 9.02502 6.64438L13.2581 9.44073C13.4602 9.56041 13.5833 9.77207 13.5833 10C13.5833 10.2279 13.4602 10.4396 13.2581 10.5593Z"
+      fill="#2D95F0"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/pages/CallLog.vue b/frontend/src/pages/CallLog.vue
index 0b22b9b0..fd864628 100644
--- a/frontend/src/pages/CallLog.vue
+++ b/frontend/src/pages/CallLog.vue
@@ -23,7 +23,7 @@
       </div>
     </div>
     <div class="px-3 pb-1 text-base font-medium mt-3">Call note</div>
-    <div v-if="callNote.doc" class="flex flex-col p-3">
+    <div v-if="callNote?.doc" class="flex flex-col p-3">
       <TextInput
         type="text"
         class="text-base bg-white border-none !pl-0 hover:bg-white focus:!shadow-none focus-visible:!ring-0"
@@ -67,6 +67,7 @@ const props = defineProps({
 const callLog = createDocumentResource({
   doctype: 'CRM Call Log',
   name: props.callLogId,
+  setValue: {},
 })
 
 const breadcrumbs = computed(() => [
@@ -120,6 +121,7 @@ const callNote = computed(() => {
     doctype: 'CRM Note',
     name: callLog.doc?.note,
     auto: true,
+    setValue: {},
   })
 })
 
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 3a12fc27..6408a733 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -84,7 +84,7 @@
           v-model="deal"
         />
       </div>
-      <div class="flex flex-col justify-between border-l w-[360px]">
+      <div class="flex flex-col justify-between border-l w-[370px]">
         <div
           class="flex flex-col gap-3 pb-4 p-5 items-center justify-center border-b"
         >
@@ -388,9 +388,7 @@ const tabs = computed(() => {
     {
       label: 'Calls',
       icon: PhoneIcon,
-      content: deal.data.activities.filter(
-        (activity) => activity.activity_type === 'call'
-      ),
+      content: calls.data,
       activityTitle: 'Calls',
     },
     // {
@@ -516,7 +514,7 @@ const notes = createListResource({
   fields: ['name', 'title', 'content', 'owner', 'modified'],
   filters: { lead: props.dealId },
   orderBy: 'modified desc',
-  pageLength: 20,
+  pageLength: 999,
   auto: true,
 })
 
@@ -560,6 +558,29 @@ async function updateNote(note) {
     }
   }
 }
+
+const calls = createListResource({
+  type: 'list',
+  doctype: 'CRM Call Log',
+  cache: ['Call Logs', props.leadId],
+  fields: [
+    'name',
+    'from',
+    'to',
+    'duration',
+    'start_time',
+    'end_time',
+    'status',
+    'type',
+    'recording_url',
+    'modified',
+    'note',
+  ],
+  filters: { lead: props.leadId },
+  orderBy: 'modified desc',
+  pageLength: 999,
+  auto: true,
+})
 </script>
 
 <style scoped>
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index b6c3b1d9..f1491aad 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -87,7 +87,7 @@
           v-model="lead"
         />
       </div>
-      <div class="flex flex-col justify-between border-l w-[360px]">
+      <div class="flex flex-col justify-between border-l w-[370px]">
         <div
           class="flex flex-col gap-3 pb-4 p-5 items-center justify-center border-b"
         >
@@ -380,9 +380,7 @@ const tabs = computed(() => {
     {
       label: 'Calls',
       icon: PhoneIcon,
-      content: lead.data.activities.filter(
-        (activity) => activity.activity_type === 'call'
-      ),
+      content: calls.data,
       activityTitle: 'Calls',
     },
     // {
@@ -549,7 +547,7 @@ const notes = createListResource({
   fields: ['name', 'title', 'content', 'owner', 'modified'],
   filters: { lead: props.leadId },
   orderBy: 'modified desc',
-  pageLength: 20,
+  pageLength: 999,
   auto: true,
 })
 
@@ -593,6 +591,29 @@ async function updateNote(note) {
     }
   }
 }
+
+const calls = createListResource({
+  type: 'list',
+  doctype: 'CRM Call Log',
+  cache: ['Call Logs', props.leadId],
+  fields: [
+    'name',
+    'from',
+    'to',
+    'duration',
+    'start_time',
+    'end_time',
+    'status',
+    'type',
+    'recording_url',
+    'modified',
+    'note',
+  ],
+  filters: { lead: props.leadId },
+  orderBy: 'modified desc',
+  pageLength: 999,
+  auto: true,
+})
 </script>
 
 <style scoped>