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-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
|
||||
as="template"
|
||||
@ -33,6 +87,128 @@ import {
|
||||
Dialog,
|
||||
DialogOverlay,
|
||||
} 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'
|
||||
|
||||
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>
|
||||
|
||||
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' },
|
||||
name: 'Home',
|
||||
},
|
||||
{
|
||||
path: '/notifications',
|
||||
name: 'Notifications',
|
||||
component: () => import('@/pages/MobileNotification.vue'),
|
||||
},
|
||||
{
|
||||
path: '/leads',
|
||||
name: 'Leads',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user