Merge pull request #725 from frappe/mergify/bp/main/pr-716

fix: Create & Make call (backport #716)

Author: shariquerik

Diff for: frontend/components.d.ts

@@ -150,6 +150,7 @@ declare module 'vue' {
     MobileLayout: typeof import('./src/components/Layouts/MobileLayout.vue')['default']
     MobileSidebar: typeof import('./src/components/Mobile/MobileSidebar.vue')['default']
     MoneyIcon: typeof import('./src/components/Icons/MoneyIcon.vue')['default']
+    MultiActionButton: typeof import('./src/components/MultiActionButton.vue')['default']
     MultipleAvatar: typeof import('./src/components/MultipleAvatar.vue')['default']
     MultiSelectEmailInput: typeof import('./src/components/Controls/MultiSelectEmailInput.vue')['default']
     MuteIcon: typeof import('./src/components/Icons/MuteIcon.vue')['default']

Diff for: 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 for: 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 for: 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>

Diff for: frontend/src/components/MultiActionButton.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="flex items-center">
+    <Button
+      :variant="$attrs.variant"
+      class="border-0"
+      :label="activeButton.label"
+      :size="$attrs.size"
+      :class="[
+        $attrs.class,
+        showDropdown ? 'rounded-br-none rounded-tr-none' : '',
+      ]"
+      @click="() => activeButton.onClick()"
+    >
+      <template #prefix>
+        <FeatherIcon
+          v-if="activeButton.icon && typeof activeButton.icon === 'string'"
+          :name="activeButton.icon"
+          class="h-4 w-4"
+        />
+        <component
+          v-else-if="activeButton.icon"
+          :is="activeButton.icon"
+          class="h-4 w-4"
+        />
+      </template>
+    </Button>
+    <Dropdown
+      v-show="showDropdown"
+      :options="parsedOptions"
+      size="sm"
+      class="flex-1 [&>div>div>div]:w-full"
+      placement="right"
+    >
+      <template v-slot="{ togglePopover }">
+        <Button
+          :variant="$attrs.variant"
+          @click="togglePopover"
+          icon="chevron-down"
+          class="!w-6 justify-start rounded-bl-none rounded-tl-none border-0 pr-0 text-xs"
+        />
+      </template>
+    </Dropdown>
+  </div>
+</template>
+<script setup>
+import { Dropdown } from 'frappe-ui'
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+  options: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const showDropdown = ref(props.options?.length > 1)
+const activeButton = ref(props.options?.[0] || {})
+
+const parsedOptions = computed(() => {
+  return (
+    props.options?.map((option) => {
+      return {
+        label: option.label,
+        onClick: () => {
+          activeButton.value = option
+        },
+      }
+    }) || []
+  )
+})
+</script>

Diff for: frontend/src/pages/Deal.vue

@@ -545,7 +545,6 @@ const tabs = computed(() => {
       name: 'Calls',
       label: __('Calls'),
       icon: PhoneIcon,
-      condition: () => callEnabled.value,
     },
     {
       name: 'Tasks',

Diff for: frontend/src/pages/Lead.vue

@@ -532,7 +532,6 @@ const tabs = computed(() => {
       name: 'Calls',
       label: __('Calls'),
       icon: PhoneIcon,
-      condition: () => callEnabled.value,
     },
     {
       name: 'Tasks',