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

fix: made common header so that minimized call window can be shown

Browse Source
This commit is contained in:
Shariq Ansari 2023-08-23 21:18:45 +05:30
parent 23093efc96
commit 7c3069817b
9 changed files with 55 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/AppSidebar.vue
View File

@ -27,7 +27,6 @@
</nav> </nav>
</div> </div>
</div> </div>
<div id="call-area"></div>
</div> </div>
</template> </template>

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

@ -119,16 +119,16 @@
<Teleport to="#call-area"> <Teleport to="#call-area">
<div <div
v-show="showSmallCallWindow" v-show="showSmallCallWindow"
class="flex items-center justify-between p-1.5 gap-2 bg-gray-900 rounded m-2 cursor-pointer select-none" class="flex items-center justify-between -ml-3 mr-2 p-1.5 gap-2 bg-gray-900 rounded cursor-pointer select-none"
@click="toggleCallWindow" @click="toggleCallWindow"
> >
<div class="inline-flex items-center gap-1.5 truncate"> <div class="inline-flex items-center gap-1.5">
<UserAvatar <UserAvatar
:user="getUser().name" :user="getUser().name"
class="flex items-center justify-center" class="flex items-center justify-center"
/> />
<div class="text-base font-medium text-white truncate"> <div class="text-base font-medium text-white truncate max-w-[120px]">
Shariq Ansari {{ getUser().full_name }}
</div> </div>
</div> </div>
<div v-if="onCall" class="flex items-center gap-1.5"> <div v-if="onCall" class="flex items-center gap-1.5">
@ -191,12 +191,12 @@ import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
import DialpadIcon from '@/components/Icons/DialpadIcon.vue' import DialpadIcon from '@/components/Icons/DialpadIcon.vue'
import PhoneIcon from '@/components/Icons/PhoneIcon.vue' import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
import UserAvatar from '@/components/UserAvatar.vue' import UserAvatar from '@/components/UserAvatar.vue'
import CountUpTimer from '@/components/CountUpTimer.vue'
import { Device } from '@twilio/voice-sdk' import { Device } from '@twilio/voice-sdk'
import { useDraggable, useWindowSize } from '@vueuse/core' import { useDraggable, useWindowSize } from '@vueuse/core'
import { usersStore } from '@/stores/users' import { usersStore } from '@/stores/users'
import { call } from 'frappe-ui' import { call } from 'frappe-ui'
import { onMounted, provide, ref, watch } from 'vue' import { onMounted, provide, ref, watch } from 'vue'
import CountUpTimer from './CountUpTimer.vue'
const { getUser } = usersStore() const { getUser } = usersStore()

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

@ -4,6 +4,10 @@
<AppSidebar /> <AppSidebar />
</div> </div>
<div class="flex-1 flex flex-col h-full overflow-auto"> <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>
<slot /> <slot />
</div> </div>
</div> </div>

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

@ -1,22 +1,13 @@
<template> <template>
<header class="flex justify-between items-center px-5 py-3"> <Teleport to="#header-area">
<div class="flex items-center gap-2"> <header class="flex justify-between items-center px-5 py-3">
<slot name="left-header" /> <div class="flex items-center gap-2">
</div> <slot name="left-header" />
<div class="flex items-center gap-2"> </div>
<slot name="right-header" class="flex items-center gap-2" /> <div class="flex items-center gap-2">
</div> <slot name="right-header" class="flex items-center gap-2" />
</header> <slot name="call-area"></slot>
<div </div>
v-if="$slots['left-subheader'] || $slots['right-subheader']" </header>
id="sub-header" </Teleport>
class="flex justify-between items-center px-5 pb-2.5 border-b"
>
<div class="flex items-center gap-2">
<slot name="left-subheader" />
</div>
<div class="flex items-center gap-2">
<slot name="right-subheader" />
</div>
</div>
</template> </template>

12
frontend/src/pages/Contacts.vue
View File

@ -8,7 +8,9 @@
<template #prefix><FeatherIcon name="plus" class="h-4" /></template> <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
</Button> </Button>
</template> </template>
<template #left-subheader> </LayoutHeader>
<div class="flex justify-between items-center px-5 pb-2.5 border-b">
<div class="flex items-center gap-2">
<Dropdown :options="viewsDropdownOptions"> <Dropdown :options="viewsDropdownOptions">
<template #default="{ open }"> <template #default="{ open }">
<Button :label="currentView.label"> <Button :label="currentView.label">
@ -23,8 +25,8 @@
</Button> </Button>
</template> </template>
</Dropdown> </Dropdown>
</template> </div>
<template #right-subheader> <div class="flex items-center gap-2">
<Button label="Sort"> <Button label="Sort">
<template #prefix><SortIcon class="h-4" /></template> <template #prefix><SortIcon class="h-4" /></template>
</Button> </Button>
@ -32,8 +34,8 @@
<template #prefix><FilterIcon class="h-4" /></template> <template #prefix><FilterIcon class="h-4" /></template>
</Button> </Button>
<Button icon="more-horizontal" /> <Button icon="more-horizontal" />
</template> </div>
</LayoutHeader> </div>
<ListView :list="list" :columns="columns" :rows="rows" row-key="name" /> <ListView :list="list" :columns="columns" :rows="rows" row-key="name" />
</template> </template>

10
frontend/src/pages/Dashboard.vue
View File

@ -1,9 +1,13 @@
<template> <template>
<div class="px-5 py-4 font-semibold text-xl"> <LayoutHeader>
<h1>{{ title }}</h1> <template #left-header>
</div> <Breadcrumbs :items="[{ label: title }]" />
</template>
</LayoutHeader>
</template> </template>
<script setup> <script setup>
import LayoutHeader from '@/components/LayoutHeader.vue'
import Breadcrumbs from '@/components/Breadcrumbs.vue'
let title = 'Dashboard' let title = 'Dashboard'
</script> </script>

12
frontend/src/pages/Deals.vue
View File

@ -8,7 +8,9 @@
<template #prefix><FeatherIcon name="plus" class="h-4" /></template> <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
</Button> </Button>
</template> </template>
<template #left-subheader> </LayoutHeader>
<div class="flex justify-between items-center px-5 pb-2.5 border-b">
<div class="flex items-center gap-2">
<Dropdown :options="viewsDropdownOptions"> <Dropdown :options="viewsDropdownOptions">
<template #default="{ open }"> <template #default="{ open }">
<Button :label="currentView.label"> <Button :label="currentView.label">
@ -23,8 +25,8 @@
</Button> </Button>
</template> </template>
</Dropdown> </Dropdown>
</template> </div>
<template #right-subheader> <div class="flex items-center gap-2">
<Button label="Sort"> <Button label="Sort">
<template #prefix><SortIcon class="h-4" /></template> <template #prefix><SortIcon class="h-4" /></template>
</Button> </Button>
@ -32,8 +34,8 @@
<template #prefix><FilterIcon class="h-4" /></template> <template #prefix><FilterIcon class="h-4" /></template>
</Button> </Button>
<Button icon="more-horizontal" /> <Button icon="more-horizontal" />
</template> </div>
</LayoutHeader> </div>
<ListView :list="list" row-key="name" /> <ListView :list="list" row-key="name" />
</template> </template>

12
frontend/src/pages/Inbox.vue
View File

@ -8,7 +8,9 @@
<template #prefix><FeatherIcon name="plus" class="h-4" /></template> <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
</Button> </Button>
</template> </template>
<template #left-subheader> </LayoutHeader>
<div class="flex justify-between items-center px-5 pb-2.5 border-b">
<div class="flex items-center gap-2">
<Dropdown :options="viewsDropdownOptions"> <Dropdown :options="viewsDropdownOptions">
<template #default="{ open }"> <template #default="{ open }">
<Button :label="currentView.label"> <Button :label="currentView.label">
@ -23,8 +25,8 @@
</Button> </Button>
</template> </template>
</Dropdown> </Dropdown>
</template> </div>
<template #right-subheader> <div class="flex items-center gap-2">
<Button label="Sort"> <Button label="Sort">
<template #prefix><SortIcon class="h-4" /></template> <template #prefix><SortIcon class="h-4" /></template>
</Button> </Button>
@ -32,8 +34,8 @@
<template #prefix><FilterIcon class="h-4" /></template> <template #prefix><FilterIcon class="h-4" /></template>
</Button> </Button>
<Button icon="more-horizontal" /> <Button icon="more-horizontal" />
</template> </div>
</LayoutHeader> </div>
<ListView :list="list" /> <ListView :list="list" />
</template> </template>

12
frontend/src/pages/Leads.vue
View File

@ -8,7 +8,9 @@
<template #prefix><FeatherIcon name="plus" class="h-4" /></template> <template #prefix><FeatherIcon name="plus" class="h-4" /></template>
</Button> </Button>
</template> </template>
<template #left-subheader> </LayoutHeader>
<div class="flex justify-between items-center px-5 pb-2.5 border-b">
<div class="flex items-center gap-2">
<Dropdown :options="viewsDropdownOptions"> <Dropdown :options="viewsDropdownOptions">
<template #default="{ open }"> <template #default="{ open }">
<Button :label="currentView.label"> <Button :label="currentView.label">
@ -23,13 +25,13 @@
</Button> </Button>
</template> </template>
</Dropdown> </Dropdown>
</template> </div>
<template #right-subheader> <div class="flex items-center gap-2">
<Filter doctype="CRM Lead" /> <Filter doctype="CRM Lead" />
<SortBy doctype="CRM Lead" /> <SortBy doctype="CRM Lead" />
<Button icon="more-horizontal" /> <Button icon="more-horizontal" />
</template> </div>
</LayoutHeader> </div>
<ListView :list="list" :columns="columns" :rows="rows" row-key="name" /> <ListView :list="list" :columns="columns" :rows="rows" row-key="name" />
<Dialog <Dialog
v-model="showNewDialog" v-model="showNewDialog"