test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show counter when call is in progress

Browse Source
This commit is contained in:
Shariq Ansari 2025-01-16 13:00:08 +05:30
parent dde6d3736f
commit 0362f5e270
1 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/Telephony/ExotelCallUI.vue
View File

@ -32,7 +32,8 @@
v-if="callStatus == 'In Progress'" v-if="callStatus == 'In Progress'"
class="font-normal text-ink-gray-4" class="font-normal text-ink-gray-4"
> >
<span> · </span>00:38 <span> · </span>
<span>{{ counterUp?.updatedTime }}</span>
</span> </span>
<span <span
v-else-if="callStatus == 'Call Ended' || callStatus == 'No Answer'" v-else-if="callStatus == 'Call Ended' || callStatus == 'No Answer'"
@ -44,7 +45,10 @@
> >
<span class="text-ink-gray-4"> · </span> <span class="text-ink-gray-4"> · </span>
<span>{{ __(callStatus) }}</span> <span>{{ __(callStatus) }}</span>
<span v-if="callStatus == 'Call Ended'"> <span> · </span>00:38 </span> <span v-if="callStatus == 'Call Ended'">
<span> · </span>
<span>{{ counterUp?.updatedTime }}</span>
</span>
</span> </span>
</div> </div>
</div> </div>
@ -55,7 +59,9 @@
:style="style" :style="style"
> >
<div class="header flex items-center justify-between gap-2 text-base"> <div class="header flex items-center justify-between gap-2 text-base">
<div v-if="callStatus == 'In Progress'">00:38</div> <div v-if="callStatus == 'In Progress'">
{{ counterUp?.updatedTime }}
</div>
<div <div
v-else-if="callStatus == 'Call Ended' || callStatus == 'No Answer'" v-else-if="callStatus == 'Call Ended' || callStatus == 'No Answer'"
:class="{ :class="{
@ -64,7 +70,10 @@
}" }"
> >
<span>{{ __(callStatus) }}</span> <span>{{ __(callStatus) }}</span>
<span v-if="callStatus == 'Call Ended'"><span> · </span>00:38</span> <span v-if="callStatus == 'Call Ended'">
<span> · </span>
<span>{{ counterUp?.updatedTime }}</span>
</span>
</div> </div>
<div v-else>{{ __(callStatus) }}</div> <div v-else>{{ __(callStatus) }}</div>
<div class="flex"> <div class="flex">
@ -132,6 +141,7 @@
</div> </div>
</div> </div>
</div> </div>
<CountUpTimer ref="counterUp" />
</div> </div>
</template> </template>
<script setup> <script setup>
@ -139,6 +149,7 @@ import AvatarIcon from '@/components/Icons/AvatarIcon.vue'
import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue' import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
import NoteIcon from '@/components/Icons/NoteIcon.vue' import NoteIcon from '@/components/Icons/NoteIcon.vue'
import TaskIcon from '@/components/Icons/TaskIcon.vue' import TaskIcon from '@/components/Icons/TaskIcon.vue'
import CountUpTimer from '@/components/CountUpTimer.vue'
import { Avatar, Button, call } from 'frappe-ui' import { Avatar, Button, call } from 'frappe-ui'
import { globalStore } from '@/stores/global' import { globalStore } from '@/stores/global'
import { contactsStore } from '@/stores/contacts' import { contactsStore } from '@/stores/contacts'
@ -171,6 +182,7 @@ let { style } = useDraggable(callPopup, {
const callStatus = ref('') const callStatus = ref('')
const phoneNumber = ref('') const phoneNumber = ref('')
const callData = ref(null) const callData = ref(null)
const counterUp = ref(null)
const contact = computed(() => { const contact = computed(() => {
if (!phoneNumber.value) { if (!phoneNumber.value) {
@ -278,19 +290,23 @@ function updateStatus(data) {
data.Status == 'in-progress' && data.Status == 'in-progress' &&
data['Legs[1][Status]'] == 'in-progress' data['Legs[1][Status]'] == 'in-progress'
) { ) {
counterUp.value.start()
return 'In Progress' return 'In Progress'
} else if ( } else if (
data.EventType == 'terminal' && data.EventType == 'terminal' &&
data.Direction == 'outbound-api' && data.Direction == 'outbound-api' &&
(data.Status == 'completed' || data.Status == 'no-answer') data.Status == 'no-answer' &&
data['Legs[1][Status]'] == 'no-answer'
) { ) {
return data.Status == 'no-answer' ? 'No Answer' : 'Call Ended' counterUp.value.stop()
return 'No Answer'
} else if ( } else if (
data.EventType == 'terminal' && data.EventType == 'terminal' &&
data.Direction == 'outbound-api' && data.Direction == 'outbound-api' &&
data.Status == 'busy' data.Status == 'completed'
) { ) {
return 'No Answer' counterUp.value.stop()
return 'Call Ended'
} }
// incoming call // incoming call