fix: mark all as read and mark comment as read

crm/api/notifications.py

@@ -1,6 +1,7 @@
 import frappe
 from frappe.query_builder import Order
 
+
 @frappe.whitelist()
 def get_notifications():
     if frappe.session.user == "Guest":
@@ -17,22 +18,43 @@ def get_notifications():
 
     _notifications = []
     for notification in notifications:
-        reference_doc = frappe.get_value("Comment", notification.comment, ['reference_doctype', 'reference_name'])
-        _notifications.append({
-            "creation": notification.creation,
-            "from_user": {
-                "name": notification.from_user,
-                "full_name": frappe.get_value(
-                    "User", notification.from_user, "full_name"
-                ),
-            },
-            "type": notification.type,
-            "to_user": notification.to_user,
-            "read": notification.read,
-            "comment": notification.comment,
-            "reference_doctype": "deal" if reference_doc[0] == "CRM Deal" else "lead",
-            "reference_name": reference_doc[1],
-            "route_name": "Deal" if reference_doc[0] == "CRM Deal" else "Lead",
-        })
+        reference_doc = frappe.get_value(
+            "Comment", notification.comment, ["reference_doctype", "reference_name"]
+        )
+        _notifications.append(
+            {
+                "creation": notification.creation,
+                "from_user": {
+                    "name": notification.from_user,
+                    "full_name": frappe.get_value(
+                        "User", notification.from_user, "full_name"
+                    ),
+                },
+                "type": notification.type,
+                "to_user": notification.to_user,
+                "read": notification.read,
+                "comment": notification.comment,
+                "reference_doctype": "deal"
+                if reference_doc[0] == "CRM Deal"
+                else "lead",
+                "reference_name": reference_doc[1],
+                "route_name": "Deal" if reference_doc[0] == "CRM Deal" else "Lead",
+            }
+        )
 
     return _notifications
+
+
+@frappe.whitelist()
+def mark_as_read(user=None, comment=None):
+    if frappe.session.user == "Guest":
+        frappe.throw("Authentication failed", exc=frappe.AuthenticationError)
+
+    user = user or frappe.session.user
+    filters = {"to_user": user, "read": False}
+    if comment:
+        filters["comment"] = comment
+    for n in frappe.get_all("CRM Notification", filters=filters):
+        d = frappe.get_doc("CRM Notification", n.name)
+        d.read = True
+        d.save()

frontend/src/components/Notifications.vue

@@ -18,7 +18,7 @@
         <Button
           theme="blue"
           variant="ghost"
-          @click="() => notificationsStore().clear()"
+          @click="() => notificationsStore().mark_as_read.reload()"
         >
           <template #icon>
             <FeatherIcon name="trash-2" class="h-4 w-4" />
@@ -37,11 +37,11 @@
     </div>
     <div class="divide-y text-base">
       <RouterLink
-        v-for="n in allNotifications"
-        :key="n.name"
-        class="flex cursor-pointer items-start gap-3.5 px-5 py-2.5 hover:bg-gray-100"
+        v-for="n in notificationsStore().allNotifications"
+        :key="n.comment"
         :to="getRoute(n)"
-        @click="() => toggleNotificationPanel()"
+        class="flex cursor-pointer items-start gap-3.5 px-5 py-2.5 hover:bg-gray-100"
+        @click="mark_as_read(n.comment)"
       >
         <UserAvatar :user="n.from_user.name" size="md" />
         <span>
@@ -94,9 +94,9 @@ function toggleNotificationPanel() {
   notificationsStore().toggle()
 }
 
-const allNotifications = computed(() => {
-  return notificationsStore().getAllNotifications()
-})
+function mark_as_read(comment) {
+  notificationsStore().mark_comment_as_read(comment)
+}
 
 function getRoute(notification) {
   let params = {

frontend/src/stores/notifications.js

@@ -1,42 +1,39 @@
 import { defineStore } from 'pinia'
-import { sessionStore } from '@/stores/session'
 import { createResource } from 'frappe-ui'
-import { reactive, ref } from 'vue'
+import { computed, ref } from 'vue'
 
 export const notificationsStore = defineStore('crm-notifications', () => {
-  const { user } = sessionStore()
-
   let visible = ref(false)
-  let unreadNotifications = reactive([])
-  let allNotifications = reactive([])
 
   const notifications = createResource({
     url: 'crm.api.notifications.get_notifications',
     initialData: [],
     auto: true,
-    transform(data) {
-      allNotifications = data
-      unreadNotifications = data.filter((d) => !d.read)
-      return data
-    },
+  })
+
+  const mark_as_read = createResource({
+    url: 'crm.api.notifications.mark_as_read',
+    auto: false,
+    onSuccess: () => notifications.reload(),
   })
 
   function toggle() {
     visible.value = !visible.value
   }
 
-  function getUnreadNotifications() {
-    return unreadNotifications || []
-  }
+  const allNotifications = computed(() => notifications.data || [])
 
-  function getAllNotifications() {
-    return allNotifications || []
+  function mark_comment_as_read(comment) {
+    mark_as_read.params = { comment: comment }
+    mark_as_read.reload()
+    toggle()
   }
 
   return {
     visible,
+    allNotifications,
+    mark_as_read,
+    mark_comment_as_read,
     toggle,
-    getAllNotifications,
-    getUnreadNotifications,
   }
 })