From fdceb51fdc634255853f7642c368b78c399318b0 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 7 Apr 2025 15:34:46 +0530
Subject: [PATCH] fix: added multi action button to make and create call

---
 .../src/components/Activities/Activities.vue  | 27 +++++++++++---
 .../components/Activities/ActivityHeader.vue  | 37 +++++++++++++++----
 .../src/components/Activities/AllModals.vue   | 23 ++++++++++++
 3 files changed, 73 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/Activities/Activities.vue b/frontend/src/components/Activities/Activities.vue
index 8e49b8db..847667a7 100644
--- a/frontend/src/components/Activities/Activities.vue
+++ b/frontend/src/components/Activities/Activities.vue
@@ -373,11 +373,7 @@
     >
       <component :is="emptyTextIcon" class="h-10 w-10" />
       <span>{{ __(emptyText) }}</span>
-      <Button
-        v-if="title == 'Calls'"
-        :label="__('Make a Call')"
-        @click="makeCall(doc.data.mobile_no)"
-      />
+      <MultiActionButton v-if="title == 'Calls'" :options="callActions" />
       <Button
         v-else-if="title == 'Notes'"
         :label="__('Create Note')"
@@ -470,6 +466,7 @@ import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
 import WhatsAppArea from '@/components/Activities/WhatsAppArea.vue'
 import WhatsAppBox from '@/components/Activities/WhatsAppBox.vue'
 import LoadingIndicator from '@/components/Icons/LoadingIndicator.vue'
+import MultiActionButton from '@/components/MultiActionButton.vue'
 import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import DotIcon from '@/components/Icons/DotIcon.vue'
@@ -487,7 +484,7 @@ import FilesUploader from '@/components/FilesUploader/FilesUploader.vue'
 import { timeAgo, formatDate, startCase } from '@/utils'
 import { globalStore } from '@/stores/global'
 import { usersStore } from '@/stores/users'
-import { whatsappEnabled } from '@/composables/settings'
+import { whatsappEnabled, callEnabled } from '@/composables/settings'
 import { capture } from '@/telemetry'
 import { Button, Tooltip, createResource } from 'frappe-ui'
 import { useElementVisibility } from '@vueuse/core'
@@ -785,5 +782,23 @@ function scroll(hash) {
   }, 500)
 }
 
+const callActions = computed(() => {
+  let actions = [
+    {
+      label: __('Create Call Log'),
+      onClick: () => modalRef.value.createCallLog(),
+    },
+    {
+      label: __('Make a Call'),
+      onClick: () => makeCall(doc.data.mobile_no),
+      condition: () => callEnabled.value,
+    },
+  ]
+
+  return actions.filter((action) =>
+    action.condition ? action.condition() : true,
+  )
+})
+
 defineExpose({ emailBox, all_activities })
 </script>
diff --git a/frontend/src/components/Activities/ActivityHeader.vue b/frontend/src/components/Activities/ActivityHeader.vue
index 78ad93a7..882d0d2e 100644
--- a/frontend/src/components/Activities/ActivityHeader.vue
+++ b/frontend/src/components/Activities/ActivityHeader.vue
@@ -26,16 +26,11 @@
       </template>
       <span>{{ __('New Comment') }}</span>
     </Button>
-    <Button
+    <MultiActionButton
       v-else-if="title == 'Calls'"
       variant="solid"
-      @click="makeCall(doc.data.mobile_no)"
-    >
-      <template #prefix>
-        <PhoneIcon class="h-4 w-4" />
-      </template>
-      <span>{{ __('Make a Call') }}</span>
-    </Button>
+      :options="callActions"
+    />
     <Button
       v-else-if="title == 'Notes'"
       variant="solid"
@@ -97,6 +92,7 @@
   </div>
 </template>
 <script setup>
+import MultiActionButton from '@/components/MultiActionButton.vue'
 import Email2Icon from '@/components/Icons/Email2Icon.vue'
 import CommentIcon from '@/components/Icons/CommentIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
@@ -136,6 +132,11 @@ const defaultActions = computed(() => {
       label: __('New Comment'),
       onClick: () => (props.emailBox.showComment = true),
     },
+    {
+      icon: h(PhoneIcon, { class: 'h-4 w-4' }),
+      label: __('Create Call Log'),
+      onClick: () => props.modalRef.createCallLog(),
+    },
     {
       icon: h(PhoneIcon, { class: 'h-4 w-4' }),
       label: __('Make a Call'),
@@ -172,4 +173,24 @@ const defaultActions = computed(() => {
 function getTabIndex(name) {
   return props.tabs.findIndex((tab) => tab.name === name)
 }
+
+const callActions = computed(() => {
+  let actions = [
+    {
+      label: __('Create Call Log'),
+      icon: 'plus',
+      onClick: () => props.modalRef.createCallLog(),
+    },
+    {
+      label: __('Make a Call'),
+      icon: h(PhoneIcon, { class: 'h-4 w-4' }),
+      onClick: () => makeCall(doc.data.mobile_no),
+      condition: () => callEnabled.value,
+    },
+  ]
+
+  return actions.filter((action) =>
+    action.condition ? action.condition() : true,
+  )
+})
 </script>
diff --git a/frontend/src/components/Activities/AllModals.vue b/frontend/src/components/Activities/AllModals.vue
index 1217b039..9b312398 100644
--- a/frontend/src/components/Activities/AllModals.vue
+++ b/frontend/src/components/Activities/AllModals.vue
@@ -15,10 +15,16 @@
     :doc="doc.data?.name"
     @after="redirect('notes')"
   />
+  <CallLogModal
+    v-model="showCallLogModal"
+    v-model:callLog="callLog"
+    :options="{ afterInsert: () => activities.reload() }"
+  />
 </template>
 <script setup>
 import TaskModal from '@/components/Modals/TaskModal.vue'
 import NoteModal from '@/components/Modals/NoteModal.vue'
+import CallLogModal from '@/components/Modals/CallLogModal.vue'
 import { call } from 'frappe-ui'
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -77,6 +83,22 @@ function showNote(n) {
   showNoteModal.value = true
 }
 
+// Call Logs
+const showCallLogModal = ref(false)
+const callLog = ref({})
+
+function createCallLog() {
+  let doctype = props.doctype
+  let docname = props.doc.data?.name
+  callLog.value = {
+    data: {
+      reference_doctype: doctype,
+      reference_docname: docname,
+    },
+  }
+  showCallLogModal.value = true
+}
+
 // common
 const route = useRoute()
 const router = useRouter()
@@ -95,5 +117,6 @@ defineExpose({
   deleteTask,
   updateTaskStatus,
   showNote,
+  createCallLog,
 })
 </script>