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 v-else-if="session().isLoggedIn">
-    <DesktopLayout>
+    <router-view />
-      <router-view />
+  </DesktopLayout>
-    </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,74 +105,72 @@
       </div>
     </div>
   </div>
-  <Teleport to="#call-area">
+  <div
-    <div
+    v-show="showSmallCallWindow"
-      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"
-      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"
-      @click="toggleCallWindow"
+  >
-    >
+    <div class="flex items-center gap-2">
-      <div class="flex items-center gap-2">
+      <Avatar
-        <Avatar
+        :image="contact.image"
-          :image="contact.image"
+        :label="contact.full_name"
-          :label="contact.full_name"
+        class="flex items-center justify-center !h-5 !w-5 relative"
-          class="flex items-center justify-center !h-5 !w-5 relative"
+      />
-        />
+      <div class="truncate max-w-[120px]">
-        <div class="truncate max-w-[120px]">
+        {{ contact.full_name }}
-          {{ 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>
     </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>

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">
+      <AppHeader />
-        <div id="header-area" class="flex-1"></div>
-        <div id="call-area" class="flex items-center justify-center"></div>
-      </div>
       <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,