From d7bc5496c395e973049a34dcae83a844cf3c9183 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 27 May 2024 20:44:52 +0530
Subject: [PATCH] feat: created notification page for mobile view

---
 .../src/components/Mobile/MobileSidebar.vue   | 180 +++++++++++++++++-
 frontend/src/pages/MobileNotification.vue     | 115 +++++++++++
 frontend/src/router.js                        |   5 +
 3 files changed, 298 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/pages/MobileNotification.vue

diff --git a/frontend/src/components/Mobile/MobileSidebar.vue b/frontend/src/components/Mobile/MobileSidebar.vue
index aaa9d866..03df5a95 100644
--- a/frontend/src/components/Mobile/MobileSidebar.vue
+++ b/frontend/src/components/Mobile/MobileSidebar.vue
@@ -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>
diff --git a/frontend/src/pages/MobileNotification.vue b/frontend/src/pages/MobileNotification.vue
new file mode 100644
index 00000000..eed6b47e
--- /dev/null
+++ b/frontend/src/pages/MobileNotification.vue
@@ -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>
diff --git a/frontend/src/router.js b/frontend/src/router.js
index 56727d0f..ff5052c4 100644
--- a/frontend/src/router.js
+++ b/frontend/src/router.js
@@ -8,6 +8,11 @@ const routes = [
     redirect: { name: 'Leads' },
     name: 'Home',
   },
+  {
+    path: '/notifications',
+    name: 'Notifications',
+    component: () => import('@/pages/MobileNotification.vue'),
+  },
   {
     path: '/leads',
     name: 'Leads',