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

refactor: changed CallUI code and made Appvue cleaner

Browse Source
This commit is contained in:
Shariq Ansari 2023-09-20 14:22:30 +05:30
parent 6dfc2be68e
commit 63c8675ef6
7 changed files with 84 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/App.vue
View File

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

131
frontend/src/components/CallUI.vue
View File

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

6
frontend/src/components/DesktopLayout.vue
View File

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

2
frontend/src/components/LayoutHeader.vue
View File

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

2
frontend/src/pages/Deal.vue
View File

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

2
frontend/src/pages/Lead.vue
View File

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