Merge pull request #8 from shariquerik/call-fix
This commit is contained in:
Shariq Ansari
GitHub
commit
9723f8a0db
@ -1,16 +1,13 @@
|
||||
<template>
|
||||
<router-view v-if="$route.name == 'Login'" />
|
||||
<CallUI v-else-if="session().isLoggedIn">
|
||||
<DesktopLayout>
|
||||
<router-view />
|
||||
</DesktopLayout>
|
||||
</CallUI>
|
||||
<DesktopLayout v-else-if="session().isLoggedIn">
|
||||
<router-view />
|
||||
</DesktopLayout>
|
||||
<Toasts />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DesktopLayout from '@/components/DesktopLayout.vue'
|
||||
import { sessionStore as session } from '@/stores/session'
|
||||
import CallUI from './components/CallUI.vue'
|
||||
import { Toasts } from 'frappe-ui'
|
||||
</script>
|
||||
|
||||
12
frontend/src/components/AppHeader.vue
Normal file
12
frontend/src/components/AppHeader.vue
Normal file
@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<div class="flex">
|
||||
<div id="app-header" class="flex-1"></div>
|
||||
<div class="flex items-center justify-center">
|
||||
<CallUI />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import CallUI from '@/components/CallUI.vue'
|
||||
</script>
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
<slot />
|
||||
<div
|
||||
v-show="showCallPopup"
|
||||
ref="callPopup"
|
||||
@ -106,74 +105,72 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Teleport to="#call-area">
|
||||
<div
|
||||
v-show="showSmallCallWindow"
|
||||
class="flex items-center justify-between gap-3 bg-gray-900 text-base text-gray-300 -ml-3 mr-2 px-2 py-[7px] rounded-lg cursor-pointer select-none"
|
||||
@click="toggleCallWindow"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<Avatar
|
||||
:image="contact.image"
|
||||
:label="contact.full_name"
|
||||
class="flex items-center justify-center !h-5 !w-5 relative"
|
||||
/>
|
||||
<div class="truncate max-w-[120px]">
|
||||
{{ contact.full_name }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="onCall" class="flex items-center gap-2">
|
||||
<div class="my-1 min-w-[40px] text-center">
|
||||
{{ counterUp?.updatedTime }}
|
||||
</div>
|
||||
<Button variant="solid" theme="red" class="rounded-full !h-6 !w-6">
|
||||
<template #icon>
|
||||
<PhoneIcon
|
||||
class="fill-white h-4 w-4 rotate-[135deg]"
|
||||
@click.stop="hangUpCall"
|
||||
/>
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
<div v-else-if="calling" class="flex items-center gap-3">
|
||||
<div class="my-1">
|
||||
{{ callStatus == 'ringing' ? 'Ringing...' : 'Calling...' }}
|
||||
</div>
|
||||
<Button
|
||||
variant="solid"
|
||||
theme="red"
|
||||
class="rounded-full !h-6 !w-6"
|
||||
@click.stop="cancelCall"
|
||||
>
|
||||
<template #icon>
|
||||
<PhoneIcon class="fill-white h-4 w-4 rotate-[135deg]" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
<div v-else class="flex items-center gap-2">
|
||||
<Button
|
||||
variant="solid"
|
||||
theme="green"
|
||||
class="rounded-full !h-6 !w-6 pulse relative"
|
||||
@click.stop="acceptIncomingCall"
|
||||
>
|
||||
<template #icon>
|
||||
<PhoneIcon class="fill-white h-4 w-4 animate-pulse" />
|
||||
</template>
|
||||
</Button>
|
||||
<Button
|
||||
variant="solid"
|
||||
theme="red"
|
||||
class="rounded-full !h-6 !w-6"
|
||||
@click.stop="rejectIncomingCall"
|
||||
>
|
||||
<template #icon>
|
||||
<PhoneIcon class="fill-white h-4 w-4 rotate-[135deg]" />
|
||||
</template>
|
||||
</Button>
|
||||
<div
|
||||
v-show="showSmallCallWindow"
|
||||
class="flex items-center justify-between gap-3 bg-gray-900 text-base text-gray-300 -ml-3 mr-2 px-2 py-[7px] rounded-lg cursor-pointer select-none"
|
||||
@click="toggleCallWindow"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<Avatar
|
||||
:image="contact.image"
|
||||
:label="contact.full_name"
|
||||
class="flex items-center justify-center !h-5 !w-5 relative"
|
||||
/>
|
||||
<div class="truncate max-w-[120px]">
|
||||
{{ contact.full_name }}
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
<div v-if="onCall" class="flex items-center gap-2">
|
||||
<div class="my-1 min-w-[40px] text-center">
|
||||
{{ counterUp?.updatedTime }}
|
||||
</div>
|
||||
<Button variant="solid" theme="red" class="rounded-full !h-6 !w-6">
|
||||
<template #icon>
|
||||
<PhoneIcon
|
||||
class="fill-white h-4 w-4 rotate-[135deg]"
|
||||
@click.stop="hangUpCall"
|
||||
/>
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
<div v-else-if="calling" class="flex items-center gap-3">
|
||||
<div class="my-1">
|
||||
{{ callStatus == 'ringing' ? 'Ringing...' : 'Calling...' }}
|
||||
</div>
|
||||
<Button
|
||||
variant="solid"
|
||||
theme="red"
|
||||
class="rounded-full !h-6 !w-6"
|
||||
@click.stop="cancelCall"
|
||||
>
|
||||
<template #icon>
|
||||
<PhoneIcon class="fill-white h-4 w-4 rotate-[135deg]" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
<div v-else class="flex items-center gap-2">
|
||||
<Button
|
||||
variant="solid"
|
||||
theme="green"
|
||||
class="rounded-full !h-6 !w-6 pulse relative"
|
||||
@click.stop="acceptIncomingCall"
|
||||
>
|
||||
<template #icon>
|
||||
<PhoneIcon class="fill-white h-4 w-4 animate-pulse" />
|
||||
</template>
|
||||
</Button>
|
||||
<Button
|
||||
variant="solid"
|
||||
theme="red"
|
||||
class="rounded-full !h-6 !w-6"
|
||||
@click.stop="rejectIncomingCall"
|
||||
>
|
||||
<template #icon>
|
||||
<PhoneIcon class="fill-white h-4 w-4 rotate-[135deg]" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<NoteModal v-model="showNoteModal" :note="note" @updateNote="updateNote" />
|
||||
</template>
|
||||
|
||||
@ -187,7 +184,7 @@ import { Device } from '@twilio/voice-sdk'
|
||||
import { useDraggable, useWindowSize } from '@vueuse/core'
|
||||
import { contactsStore } from '@/stores/contacts'
|
||||
import { Avatar, call } from 'frappe-ui'
|
||||
import { onMounted, provide, ref, watch } from 'vue'
|
||||
import { onMounted, ref, watch, getCurrentInstance } from 'vue'
|
||||
import NoteModal from './NoteModal.vue'
|
||||
|
||||
const { getContact } = contactsStore()
|
||||
@ -292,15 +289,6 @@ function addDeviceListeners() {
|
||||
})
|
||||
}
|
||||
|
||||
// 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()) {
|
||||
_call.value.mute(false)
|
||||
@ -492,7 +480,8 @@ watch(
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
provide('makeOutgoingCall', makeOutgoingCall)
|
||||
const app = getCurrentInstance()
|
||||
app.appContext.config.globalProperties.makeCall = makeOutgoingCall
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -4,14 +4,12 @@
|
||||
<AppSidebar />
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col h-full overflow-auto">
|
||||
<div id="app-header" class="flex">
|
||||
<div id="header-area" class="flex-1"></div>
|
||||
<div id="call-area" class="flex items-center justify-center"></div>
|
||||
</div>
|
||||
<AppHeader />
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import AppSidebar from '@/components/AppSidebar.vue'
|
||||
import AppHeader from '@/components/AppHeader.vue'
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Teleport to="#header-area" v-if="showHeader">
|
||||
<Teleport to="#app-header" v-if="showHeader">
|
||||
<header class="flex justify-between items-center px-5 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<slot name="left-header" />
|
||||
|
||||
@ -389,13 +389,11 @@ import {
|
||||
Avatar,
|
||||
call,
|
||||
} from 'frappe-ui'
|
||||
import { ref, computed, inject } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const { getUser, users } = usersStore()
|
||||
const { getContact, contacts } = contactsStore()
|
||||
|
||||
const makeCall = inject('makeOutgoingCall')
|
||||
|
||||
const props = defineProps({
|
||||
dealId: {
|
||||
type: String,
|
||||
|
||||
@ -357,15 +357,13 @@ import {
|
||||
Avatar,
|
||||
call,
|
||||
} from 'frappe-ui'
|
||||
import { ref, computed, inject } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const { getUser, users } = usersStore()
|
||||
const { getContact, contacts } = contactsStore()
|
||||
const router = useRouter()
|
||||
|
||||
const makeCall = inject('makeOutgoingCall')
|
||||
|
||||
const props = defineProps({
|
||||
leadId: {
|
||||
type: String,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user