fix: show different call status
This commit is contained in:
Shariq Ansari
parent
a716bdf0da
commit
591e126911
@ -2,14 +2,14 @@
|
||||
<div>
|
||||
<div
|
||||
v-show="showSmallCallPopup"
|
||||
class="ml-2 flex cursor-pointer select-none items-center justify-between gap-2 rounded-full bg-surface-gray-7 px-1.5 py-[7px] text-base text-ink-gray-2"
|
||||
class="ml-2 flex cursor-pointer select-none items-center justify-between gap-2 rounded-full bg-surface-gray-7 px-2 py-[7px] text-base text-ink-gray-2"
|
||||
@click="toggleCallPopup"
|
||||
>
|
||||
<div
|
||||
class="flex justify-center items-center size-5 rounded-full bg-surface-gray-6"
|
||||
>
|
||||
<Avatar
|
||||
v-if="contact.image"
|
||||
v-if="contact?.image"
|
||||
:image="contact.image"
|
||||
:label="contact.full_name"
|
||||
class="size-3"
|
||||
@ -17,26 +17,36 @@
|
||||
<AvatarIcon v-else class="size-3" />
|
||||
</div>
|
||||
<div class="text-base font-medium">
|
||||
<span class="">{{ phoneNumber }}</span>
|
||||
<span class="font-normal text-ink-gray-4"> · </span>
|
||||
<span
|
||||
v-if="
|
||||
callStatus == 'Calling...' ||
|
||||
callStatus == 'Ringing...' ||
|
||||
callStatus == 'Incoming Call'
|
||||
"
|
||||
class="font-normal text-ink-gray-4 mr-1"
|
||||
>
|
||||
{{ callStatus }}
|
||||
</span>
|
||||
<span>{{ phoneNumber }}</span>
|
||||
<span
|
||||
v-if="callStatus == 'In Progress'"
|
||||
class="font-normal text-ink-gray-4"
|
||||
>
|
||||
00:38
|
||||
<span> · </span>00:38
|
||||
</span>
|
||||
<span
|
||||
v-else-if="callStatus == 'Call Ended' || callStatus == 'No Answer'"
|
||||
class="font-normal text-ink-gray-4"
|
||||
:class="{
|
||||
'text-red-700':
|
||||
callStatus == 'Call Ended' || callStatus == 'No Answer',
|
||||
}"
|
||||
>
|
||||
<span class="text-ink-gray-4"> · </span>
|
||||
<span>{{ callStatus }}</span>
|
||||
<span v-if="callStatus == 'Call Ended'"> <span> · </span>00:38 </span>
|
||||
</span>
|
||||
<span v-else class="font-normal text-ink-gray-4">{{ callStatus }}</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="solid"
|
||||
theme="red"
|
||||
class="text-white !size-5 rounded-full"
|
||||
@click="endCall"
|
||||
>
|
||||
<template #icon>
|
||||
<PhoneIcon class="w-3 h-3 rotate-[135deg]" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
<Dialog
|
||||
v-model="showCallModal"
|
||||
@ -68,25 +78,44 @@
|
||||
class="fixed z-20 w-[280px] min-h-44 flex gap-2 cursor-move select-none flex-col rounded-lg bg-surface-gray-7 p-4 pt-2.5 text-ink-gray-2 shadow-2xl"
|
||||
:style="style"
|
||||
>
|
||||
<!-- <pre>{{ callData }}</pre> -->
|
||||
<div class="header flex items-center justify-between gap-2 text-base">
|
||||
<div v-if="callStatus == 'In Progress'">00:38</div>
|
||||
<div v-else>{{ __(callStatus) }}</div>
|
||||
<Button
|
||||
@click="toggleCallPopup"
|
||||
class="bg-surface-gray-7 text-ink-white hover:bg-surface-gray-6"
|
||||
size="md"
|
||||
<div
|
||||
v-else-if="callStatus == 'Call Ended' || callStatus == 'No Answer'"
|
||||
:class="{
|
||||
'text-red-700':
|
||||
callStatus == 'Call Ended' || callStatus == 'No Answer',
|
||||
}"
|
||||
>
|
||||
<template #icon>
|
||||
<MinimizeIcon class="h-4 w-4 cursor-pointer" />
|
||||
</template>
|
||||
</Button>
|
||||
<span>{{ __(callStatus) }}</span>
|
||||
<span v-if="callStatus == 'Call Ended'"><span> · </span>00:38</span>
|
||||
</div>
|
||||
<div v-else>{{ __(callStatus) }}</div>
|
||||
<div class="flex">
|
||||
<Button
|
||||
@click="toggleCallPopup"
|
||||
class="bg-surface-gray-7 text-ink-white hover:bg-surface-gray-6"
|
||||
size="md"
|
||||
>
|
||||
<template #icon>
|
||||
<MinimizeIcon class="h-4 w-4 cursor-pointer" />
|
||||
</template>
|
||||
</Button>
|
||||
<Button
|
||||
v-if="callStatus == 'Call Ended' || callStatus == 'No Answer'"
|
||||
@click="closeCallPopup"
|
||||
class="bg-surface-gray-7 text-ink-white hover:bg-surface-gray-6"
|
||||
icon="x"
|
||||
size="md"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body flex-1">
|
||||
<div v-if="showNote" class="h-[294px] text-base">{{ note }}</div>
|
||||
<div v-else-if="showTask" class="h-[294px] text-base">{{ task }}</div>
|
||||
<div v-else class="flex items-center gap-3">
|
||||
<Avatar
|
||||
v-if="contact.image"
|
||||
v-if="contact?.image"
|
||||
:image="contact.image"
|
||||
:label="contact.full_name"
|
||||
class="!size-8"
|
||||
@ -97,7 +126,7 @@
|
||||
>
|
||||
<AvatarIcon class="size-4" />
|
||||
</div>
|
||||
<div v-if="contact.full_name" class="flex flex-col gap-1.5">
|
||||
<div v-if="contact?.full_name" class="flex flex-col gap-1.5">
|
||||
<div class="text-lg font-medium">{{ contact.full_name }}</div>
|
||||
<div class="text-base text-ink-gray-6">{{ phoneNumber }}</div>
|
||||
</div>
|
||||
@ -106,12 +135,6 @@
|
||||
</div>
|
||||
<div class="footer flex justify-between gap-2">
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
class="bg-surface-gray-6 text-ink-white hover:bg-surface-gray-5"
|
||||
:icon="mute ? 'mic-off' : 'mic'"
|
||||
size="md"
|
||||
@click="toggleMute"
|
||||
/>
|
||||
<Button
|
||||
class="bg-surface-gray-6 text-ink-white hover:bg-surface-gray-5"
|
||||
size="md"
|
||||
@ -122,22 +145,15 @@
|
||||
</template>
|
||||
</Button>
|
||||
<Button
|
||||
:icon="'more-horizontal'"
|
||||
class="bg-surface-gray-6 text-ink-white hover:bg-surface-gray-5"
|
||||
size="md"
|
||||
/>
|
||||
@click="showTaskWindow"
|
||||
>
|
||||
<template #icon>
|
||||
<TaskIcon class="w-4 h-4" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
<Button
|
||||
variant="solid"
|
||||
theme="red"
|
||||
class="text-white"
|
||||
size="md"
|
||||
@click="endCall"
|
||||
>
|
||||
<template #icon>
|
||||
<PhoneIcon class="w-4 h-4 rotate-[135deg]" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -146,12 +162,12 @@
|
||||
import AvatarIcon from '@/components/Icons/AvatarIcon.vue'
|
||||
import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
|
||||
import NoteIcon from '@/components/Icons/NoteIcon.vue'
|
||||
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
|
||||
import TaskIcon from '@/components/Icons/TaskIcon.vue'
|
||||
import { Button, Dialog, FormControl, call, Avatar } from 'frappe-ui'
|
||||
import { globalStore } from '@/stores/global'
|
||||
import { contactsStore } from '@/stores/contacts'
|
||||
import { useDraggable, useWindowSize } from '@vueuse/core'
|
||||
import { ref, onBeforeUnmount, onMounted } from 'vue'
|
||||
import { ref, computed, onBeforeUnmount, onMounted } from 'vue'
|
||||
|
||||
const { getContact, getLeadContact } = contactsStore()
|
||||
const { $socket, setMakeCall } = globalStore()
|
||||
@ -178,20 +194,23 @@ let { style } = useDraggable(callPopup, {
|
||||
|
||||
const showCallModal = ref(false)
|
||||
const callStatus = ref('')
|
||||
const phoneNumber = ref('09821259504')
|
||||
const phoneNumber = ref('')
|
||||
const callData = ref(null)
|
||||
|
||||
const contact = ref({
|
||||
full_name: '',
|
||||
mobile_no: '',
|
||||
const contact = computed(() => {
|
||||
if (!phoneNumber.value) {
|
||||
return {
|
||||
full_name: '',
|
||||
image: '',
|
||||
}
|
||||
}
|
||||
let _contact = getContact(phoneNumber.value)
|
||||
if (!_contact) {
|
||||
_contact = getLeadContact(phoneNumber.value)
|
||||
}
|
||||
return _contact
|
||||
})
|
||||
|
||||
const mute = ref(false)
|
||||
|
||||
function toggleMute() {
|
||||
mute.value = !mute.value
|
||||
}
|
||||
|
||||
const note = ref(
|
||||
'This is a note for the call. This is a note for the call. This is a note for the call. This is a note for the call.',
|
||||
)
|
||||
@ -200,11 +219,33 @@ const showNote = ref(false)
|
||||
|
||||
function showNoteWindow() {
|
||||
showNote.value = !showNote.value
|
||||
if (!showTask.value) {
|
||||
updateWindowHeight(showNote.value)
|
||||
}
|
||||
if (showNote.value) {
|
||||
showTask.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const task = ref('This is a task for the call. This is a task for the call.')
|
||||
|
||||
const showTask = ref(false)
|
||||
|
||||
function showTaskWindow() {
|
||||
showTask.value = !showTask.value
|
||||
if (!showNote.value) {
|
||||
updateWindowHeight(showTask.value)
|
||||
}
|
||||
if (showTask.value) {
|
||||
showNote.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function updateWindowHeight(condition) {
|
||||
let top = parseInt(callPopup.value.style.top)
|
||||
let updatedTop = 0
|
||||
|
||||
updatedTop = showNote.value ? top - 224 : top + 224
|
||||
updatedTop = condition ? top - 224 : top + 224
|
||||
|
||||
if (updatedTop < 0) {
|
||||
updatedTop = 10
|
||||
@ -219,29 +260,15 @@ function showMakeCallModal(number) {
|
||||
}
|
||||
|
||||
function makeCall() {
|
||||
contact.value = getContact(phoneNumber.value)
|
||||
if (!contact.value) {
|
||||
contact.value = getLeadContact(phoneNumber.value)
|
||||
}
|
||||
|
||||
showCallModal.value = false
|
||||
callStatus.value = 'Calling...'
|
||||
showCallPopup.value = true
|
||||
|
||||
call('crm.integrations.exotel.handler.make_a_call', {
|
||||
to_number: phoneNumber.value,
|
||||
from_number: '07666980887',
|
||||
caller_id: '08047091710',
|
||||
})
|
||||
}
|
||||
|
||||
function endCall() {
|
||||
callStatus.value = ''
|
||||
showCallPopup.value = false
|
||||
showSmallCallPopup.value = false
|
||||
note.value = ''
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
$socket.off('exotel_call')
|
||||
})
|
||||
@ -251,56 +278,61 @@ onMounted(() => {
|
||||
callData.value = data
|
||||
console.log(data)
|
||||
|
||||
if (
|
||||
data.EventType == 'answered' &&
|
||||
data.Direction == 'outbound-api' &&
|
||||
data.Status == 'in-progress' &&
|
||||
data['Legs[0][Status]'] == 'in-progress' &&
|
||||
data['Legs[1][Status]'] == ''
|
||||
) {
|
||||
callStatus.value = 'Ringing...'
|
||||
} else if (
|
||||
data.EventType == 'answered' &&
|
||||
data.Direction == 'outbound-api' &&
|
||||
data.Status == 'in-progress' &&
|
||||
data['Legs[1][Status]'] == 'in-progress'
|
||||
) {
|
||||
callStatus.value = 'In Progress'
|
||||
} else if (
|
||||
data.EventType == 'terminal' &&
|
||||
data.Direction == 'outbound-api' &&
|
||||
(data.Status == 'completed' || data.Status == 'no-answer')
|
||||
) {
|
||||
callStatus.value = 'Call Ended'
|
||||
}
|
||||
|
||||
if (
|
||||
data.EventType == 'Dial' &&
|
||||
data.Direction == 'incoming' &&
|
||||
data.Status == 'busy'
|
||||
) {
|
||||
callStatus.value = 'Incoming Call'
|
||||
} else if (
|
||||
data.EventType == 'Terminal' &&
|
||||
data.Direction == 'incoming' &&
|
||||
data.Status == 'free'
|
||||
) {
|
||||
callStatus.value = 'Call Ended'
|
||||
}
|
||||
callStatus.value = updateStatus(data)
|
||||
|
||||
if (!showCallPopup.value && !showSmallCallPopup.value) {
|
||||
showCallPopup.value = true
|
||||
}
|
||||
|
||||
if (callStatus.value == 'Call Ended') {
|
||||
setTimeout(() => {
|
||||
showCallPopup.value = false
|
||||
showSmallCallPopup.value = false
|
||||
note.value = ''
|
||||
}, 2000)
|
||||
}
|
||||
})
|
||||
|
||||
setMakeCall(showMakeCallModal)
|
||||
})
|
||||
|
||||
function closeCallPopup() {
|
||||
showCallPopup.value = false
|
||||
showSmallCallPopup.value = false
|
||||
note.value = ''
|
||||
task.value = ''
|
||||
}
|
||||
|
||||
function updateStatus(data) {
|
||||
// outgoing call
|
||||
if (
|
||||
data.EventType == 'answered' &&
|
||||
data.Direction == 'outbound-api' &&
|
||||
data.Status == 'in-progress' &&
|
||||
data['Legs[0][Status]'] == 'in-progress' &&
|
||||
data['Legs[1][Status]'] == ''
|
||||
) {
|
||||
return 'Ringing...'
|
||||
} else if (
|
||||
data.EventType == 'answered' &&
|
||||
data.Direction == 'outbound-api' &&
|
||||
data.Status == 'in-progress' &&
|
||||
data['Legs[1][Status]'] == 'in-progress'
|
||||
) {
|
||||
return 'In Progress'
|
||||
} else if (
|
||||
data.EventType == 'terminal' &&
|
||||
data.Direction == 'outbound-api' &&
|
||||
(data.Status == 'completed' || data.Status == 'no-answer')
|
||||
) {
|
||||
return data.Status == 'no-answer' ? 'No Answer' : 'Call Ended'
|
||||
}
|
||||
|
||||
// incoming call
|
||||
if (
|
||||
data.EventType == 'Dial' &&
|
||||
data.Direction == 'incoming' &&
|
||||
data.Status == 'busy'
|
||||
) {
|
||||
return 'Incoming Call'
|
||||
} else if (
|
||||
data.EventType == 'Terminal' &&
|
||||
data.Direction == 'incoming' &&
|
||||
data.Status == 'free'
|
||||
) {
|
||||
return 'Call Ended'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user