Merge pull request #8 from shariquerik/call-fix

frontend/src/App.vue

@@ -1,16 +1,13 @@
 <template>
   <router-view v-if="$route.name == 'Login'" />
-  <CallUI v-else-if="session().isLoggedIn">
-    <DesktopLayout>
+  <DesktopLayout v-else-if="session().isLoggedIn">
     <router-view />
   </DesktopLayout>
-  </CallUI>
   <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>

frontend/src/components/AppHeader.vue

@@ -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>

frontend/src/components/CallUI.vue

@@ -1,5 +1,4 @@
 <template>
-  <slot />
   <div
     v-show="showCallPopup"
     ref="callPopup"
@@ -106,7 +105,6 @@
       </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"
@@ -173,7 +171,6 @@
       </Button>
     </div>
   </div>
-  </Teleport>
   <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>

frontend/src/components/DesktopLayout.vue

@@ -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>

frontend/src/components/LayoutHeader.vue

@@ -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" />

frontend/src/pages/Deal.vue

@@ -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,

frontend/src/pages/Lead.vue

@@ -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,