feat: created notification page for mobile view
This commit is contained in:
Shariq Ansari
parent
615ff0a2dc
commit
d7bc5496c3
@ -10,7 +10,61 @@
|
|||||||
leave-from="translate-x-0"
|
leave-from="translate-x-0"
|
||||||
leave-to="-translate-x-full"
|
leave-to="-translate-x-full"
|
||||||
>
|
>
|
||||||
<AppSidebar class="z-10 !w-[260px] border-r bg-gray-50" />
|
<div
|
||||||
|
class="relative z-10 flex h-full w-[260px] flex-col justify-between border-r bg-gray-50 transition-all duration-300 ease-in-out"
|
||||||
|
>
|
||||||
|
<div><UserDropdown class="p-2" /></div>
|
||||||
|
<div class="flex-1 overflow-y-auto">
|
||||||
|
<div class="mb-3 flex flex-col">
|
||||||
|
<SidebarLink
|
||||||
|
id="notifications-btn"
|
||||||
|
:label="__('Notifications')"
|
||||||
|
:icon="NotificationsIcon"
|
||||||
|
:to="{ name: 'Notifications' }"
|
||||||
|
class="relative mx-2 my-0.5"
|
||||||
|
>
|
||||||
|
<template #right>
|
||||||
|
<Badge
|
||||||
|
v-if="notificationsStore().unreadNotificationsCount"
|
||||||
|
:label="notificationsStore().unreadNotificationsCount"
|
||||||
|
variant="subtle"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</SidebarLink>
|
||||||
|
</div>
|
||||||
|
<div v-for="view in allViews" :key="view.label">
|
||||||
|
<Section
|
||||||
|
:label="view.name"
|
||||||
|
:hideLabel="view.hideLabel"
|
||||||
|
:isOpened="view.opened"
|
||||||
|
>
|
||||||
|
<template #header="{ opened, hide, toggle }">
|
||||||
|
<div
|
||||||
|
v-if="!hide"
|
||||||
|
class="ml-2 mt-4 flex h-7 w-auto cursor-pointer gap-1.5 px-1 text-base font-medium text-gray-600 opacity-100 transition-all duration-300 ease-in-out"
|
||||||
|
@click="toggle()"
|
||||||
|
>
|
||||||
|
<FeatherIcon
|
||||||
|
name="chevron-right"
|
||||||
|
class="h-4 text-gray-900 transition-all duration-300 ease-in-out"
|
||||||
|
:class="{ 'rotate-90': opened }"
|
||||||
|
/>
|
||||||
|
<span>{{ __(view.name) }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<nav class="flex flex-col">
|
||||||
|
<SidebarLink
|
||||||
|
v-for="link in view.views"
|
||||||
|
:icon="link.icon"
|
||||||
|
:label="__(link.label)"
|
||||||
|
:to="link.to"
|
||||||
|
class="mx-2 my-0.5"
|
||||||
|
/>
|
||||||
|
</nav>
|
||||||
|
</Section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</TransitionChild>
|
</TransitionChild>
|
||||||
<TransitionChild
|
<TransitionChild
|
||||||
as="template"
|
as="template"
|
||||||
@ -33,6 +87,128 @@ import {
|
|||||||
Dialog,
|
Dialog,
|
||||||
DialogOverlay,
|
DialogOverlay,
|
||||||
} from '@headlessui/vue'
|
} from '@headlessui/vue'
|
||||||
import AppSidebar from '@/components/Layouts/AppSidebar.vue'
|
import Section from '@/components/Section.vue'
|
||||||
|
import EmailIcon from '@/components/Icons/EmailIcon.vue'
|
||||||
|
import PinIcon from '@/components/Icons/PinIcon.vue'
|
||||||
|
import UserDropdown from '@/components/UserDropdown.vue'
|
||||||
|
import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
|
||||||
|
import DealsIcon from '@/components/Icons/DealsIcon.vue'
|
||||||
|
import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
|
||||||
|
import OrganizationsIcon from '@/components/Icons/OrganizationsIcon.vue'
|
||||||
|
import NoteIcon from '@/components/Icons/NoteIcon.vue'
|
||||||
|
import TaskIcon from '@/components/Icons/TaskIcon.vue'
|
||||||
|
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
|
||||||
|
import NotificationsIcon from '@/components/Icons/NotificationsIcon.vue'
|
||||||
|
import SidebarLink from '@/components/SidebarLink.vue'
|
||||||
|
import { viewsStore } from '@/stores/views'
|
||||||
|
import { notificationsStore } from '@/stores/notifications'
|
||||||
|
import { FeatherIcon } from 'frappe-ui'
|
||||||
|
import { computed, h } from 'vue'
|
||||||
import { mobileSidebarOpened as sidebarOpened } from '@/stores/settings'
|
import { mobileSidebarOpened as sidebarOpened } from '@/stores/settings'
|
||||||
|
|
||||||
|
const { getPinnedViews, getPublicViews } = viewsStore()
|
||||||
|
|
||||||
|
const links = [
|
||||||
|
{
|
||||||
|
label: 'Leads',
|
||||||
|
icon: LeadsIcon,
|
||||||
|
to: 'Leads',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Deals',
|
||||||
|
icon: DealsIcon,
|
||||||
|
to: 'Deals',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Contacts',
|
||||||
|
icon: ContactsIcon,
|
||||||
|
to: 'Contacts',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Organizations',
|
||||||
|
icon: OrganizationsIcon,
|
||||||
|
to: 'Organizations',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Notes',
|
||||||
|
icon: NoteIcon,
|
||||||
|
to: 'Notes',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Tasks',
|
||||||
|
icon: TaskIcon,
|
||||||
|
to: 'Tasks',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Call Logs',
|
||||||
|
icon: PhoneIcon,
|
||||||
|
to: 'Call Logs',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Email Templates',
|
||||||
|
icon: EmailIcon,
|
||||||
|
to: 'Email Templates',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const allViews = computed(() => {
|
||||||
|
let _views = [
|
||||||
|
{
|
||||||
|
name: 'All Views',
|
||||||
|
hideLabel: true,
|
||||||
|
opened: true,
|
||||||
|
views: links,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
if (getPublicViews().length) {
|
||||||
|
_views.push({
|
||||||
|
name: 'Public views',
|
||||||
|
opened: true,
|
||||||
|
views: parseView(getPublicViews()),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (getPinnedViews().length) {
|
||||||
|
_views.push({
|
||||||
|
name: 'Pinned views',
|
||||||
|
opened: true,
|
||||||
|
views: parseView(getPinnedViews()),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return _views
|
||||||
|
})
|
||||||
|
|
||||||
|
function parseView(views) {
|
||||||
|
return views.map((view) => {
|
||||||
|
return {
|
||||||
|
label: view.label,
|
||||||
|
icon: getIcon(view.route_name, view.icon),
|
||||||
|
to: {
|
||||||
|
name: view.route_name,
|
||||||
|
query: { view: view.name },
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function getIcon(routeName, icon) {
|
||||||
|
if (icon) return h('div', { class: 'size-auto' }, icon)
|
||||||
|
|
||||||
|
switch (routeName) {
|
||||||
|
case 'Leads':
|
||||||
|
return LeadsIcon
|
||||||
|
case 'Deals':
|
||||||
|
return DealsIcon
|
||||||
|
case 'Contacts':
|
||||||
|
return ContactsIcon
|
||||||
|
case 'Organizations':
|
||||||
|
return OrganizationsIcon
|
||||||
|
case 'Notes':
|
||||||
|
return NoteIcon
|
||||||
|
case 'Call Logs':
|
||||||
|
return PhoneIcon
|
||||||
|
default:
|
||||||
|
return PinIcon
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
115
frontend/src/pages/MobileNotification.vue
Normal file
115
frontend/src/pages/MobileNotification.vue
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
<template>
|
||||||
|
<LayoutHeader>
|
||||||
|
<template #left-header>
|
||||||
|
<Breadcrumbs
|
||||||
|
:items="[
|
||||||
|
{ label: __('Notifications'), route: { name: 'Notifications' } },
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template #right-header>
|
||||||
|
<Tooltip :text="__('Mark all as read')">
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
:label="__('Mark all as read')"
|
||||||
|
@click="() => notificationsStore().mark_as_read.reload()"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<MarkAsDoneIcon class="h-4 w-4" />
|
||||||
|
</template>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
</template>
|
||||||
|
</LayoutHeader>
|
||||||
|
<div class="flex h-screen flex-col">
|
||||||
|
<div
|
||||||
|
v-if="notificationsStore().allNotifications?.length"
|
||||||
|
class="divide-y overflow-y-auto text-base"
|
||||||
|
>
|
||||||
|
<RouterLink
|
||||||
|
v-for="n in notificationsStore().allNotifications"
|
||||||
|
:key="n.comment"
|
||||||
|
:to="getRoute(n)"
|
||||||
|
class="flex cursor-pointer items-start gap-3 px-2.5 py-3 hover:bg-gray-100"
|
||||||
|
@click="mark_as_read(n.comment || n.notification_type_doc)"
|
||||||
|
>
|
||||||
|
<div class="mt-1 flex items-center gap-2.5">
|
||||||
|
<div
|
||||||
|
class="size-[5px] rounded-full"
|
||||||
|
:class="[n.read ? 'bg-transparent' : 'bg-gray-900']"
|
||||||
|
/>
|
||||||
|
<WhatsAppIcon v-if="n.type == 'WhatsApp'" class="size-7" />
|
||||||
|
<UserAvatar v-else :user="n.from_user.name" size="lg" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div v-if="n.notification_text" v-html="n.notification_text" />
|
||||||
|
<div v-else class="mb-2 space-x-1 leading-5 text-gray-600">
|
||||||
|
<span class="font-medium text-gray-900">
|
||||||
|
{{ n.from_user.full_name }}
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
{{ __('mentioned you in {0}', [n.reference_doctype]) }}
|
||||||
|
</span>
|
||||||
|
<span class="font-medium text-gray-900">
|
||||||
|
{{ n.reference_name }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-600">
|
||||||
|
{{ __(timeAgo(n.creation)) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</RouterLink>
|
||||||
|
</div>
|
||||||
|
<div v-else class="flex flex-1 flex-col items-center justify-center gap-2">
|
||||||
|
<NotificationsIcon class="h-20 w-20 text-gray-300" />
|
||||||
|
<div class="text-lg font-medium text-gray-500">
|
||||||
|
{{ __('No new notifications') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import LayoutHeader from '@/components/LayoutHeader.vue'
|
||||||
|
import WhatsAppIcon from '@/components/Icons/WhatsAppIcon.vue'
|
||||||
|
import MarkAsDoneIcon from '@/components/Icons/MarkAsDoneIcon.vue'
|
||||||
|
import NotificationsIcon from '@/components/Icons/NotificationsIcon.vue'
|
||||||
|
import UserAvatar from '@/components/UserAvatar.vue'
|
||||||
|
import { notificationsStore } from '@/stores/notifications'
|
||||||
|
import { globalStore } from '@/stores/global'
|
||||||
|
import { timeAgo } from '@/utils'
|
||||||
|
import { Breadcrumbs, Tooltip } from 'frappe-ui'
|
||||||
|
import { onMounted, onBeforeUnmount } from 'vue'
|
||||||
|
|
||||||
|
const { $socket } = globalStore()
|
||||||
|
|
||||||
|
function mark_as_read(doc) {
|
||||||
|
notificationsStore().mark_doc_as_read(doc)
|
||||||
|
}
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
$socket.off('crm_notification')
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
$socket.on('crm_notification', () => {
|
||||||
|
notificationsStore().notifications.reload()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
function getRoute(notification) {
|
||||||
|
let params = {
|
||||||
|
leadId: notification.reference_name,
|
||||||
|
}
|
||||||
|
if (notification.route_name === 'Deal') {
|
||||||
|
params = {
|
||||||
|
dealId: notification.reference_name,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
name: notification.route_name,
|
||||||
|
params: params,
|
||||||
|
hash: '#' + notification.comment || notification.notification_type_doc,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -8,6 +8,11 @@ const routes = [
|
|||||||
redirect: { name: 'Leads' },
|
redirect: { name: 'Leads' },
|
||||||
name: 'Home',
|
name: 'Home',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/notifications',
|
||||||
|
name: 'Notifications',
|
||||||
|
component: () => import('@/pages/MobileNotification.vue'),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/leads',
|
path: '/leads',
|
||||||
name: 'Leads',
|
name: 'Leads',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user