From 6dfc2be68eba014643a9d71c78a85434586c8e2a Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 20 Sep 2023 14:10:29 +0530
Subject: [PATCH 1/2] fix: created global makeCall method instead of using
 provide/inject

---
 frontend/src/components/CallUI.vue | 14 +++-----------
 frontend/src/pages/Deal.vue        |  2 --
 frontend/src/pages/Lead.vue        |  2 --
 3 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/CallUI.vue b/frontend/src/components/CallUI.vue
index 7f27e4d9..e30af3b7 100644
--- a/frontend/src/components/CallUI.vue
+++ b/frontend/src/components/CallUI.vue
@@ -187,7 +187,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 +292,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 +483,8 @@ watch(
   { immediate: true }
 )
 
-provide('makeOutgoingCall', makeOutgoingCall)
+const app = getCurrentInstance()
+app.appContext.config.globalProperties.makeCall = makeOutgoingCall
 </script>
 
 <style scoped>
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index c054eb7a..bf964f0b 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -394,8 +394,6 @@ import { ref, computed, inject } from 'vue'
 const { getUser, users } = usersStore()
 const { getContact, contacts } = contactsStore()
 
-const makeCall = inject('makeOutgoingCall')
-
 const props = defineProps({
   dealId: {
     type: String,
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index dbb6831a..745c1f11 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -364,8 +364,6 @@ const { getUser, users } = usersStore()
 const { getContact, contacts } = contactsStore()
 const router = useRouter()
 
-const makeCall = inject('makeOutgoingCall')
-
 const props = defineProps({
   leadId: {
     type: String,

From 63c8675ef63e9549e4334a9041356c1cfc775760 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 20 Sep 2023 14:22:30 +0530
Subject: [PATCH 2/2] refactor: changed CallUI code and made Appvue cleaner

---
 frontend/src/App.vue                      |   9 +-
 frontend/src/components/AppHeader.vue     |  12 ++
 frontend/src/components/CallUI.vue        | 131 +++++++++++-----------
 frontend/src/components/DesktopLayout.vue |   6 +-
 frontend/src/components/LayoutHeader.vue  |   2 +-
 frontend/src/pages/Deal.vue               |   2 +-
 frontend/src/pages/Lead.vue               |   2 +-
 7 files changed, 84 insertions(+), 80 deletions(-)
 create mode 100644 frontend/src/components/AppHeader.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7ade8d11..8f11505f 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -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>
diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
new file mode 100644
index 00000000..67d69046
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/CallUI.vue b/frontend/src/components/CallUI.vue
index e30af3b7..7d69c0cf 100644
--- a/frontend/src/components/CallUI.vue
+++ b/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
-      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>
 
diff --git a/frontend/src/components/DesktopLayout.vue b/frontend/src/components/DesktopLayout.vue
index 46ee7c6d..2d81c21e 100644
--- a/frontend/src/components/DesktopLayout.vue
+++ b/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>
diff --git a/frontend/src/components/LayoutHeader.vue b/frontend/src/components/LayoutHeader.vue
index 7d0ee4a6..d916dbe8 100644
--- a/frontend/src/components/LayoutHeader.vue
+++ b/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" />
diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index bf964f0b..e610b581 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -389,7 +389,7 @@ 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()
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 745c1f11..1d4d4005 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -357,7 +357,7 @@ 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()