feat: notification on mentions

frontend/src/pages/Courses.vue

@@ -57,6 +57,14 @@
 						v-if="tab.courses && tab.courses.value.length"
 						class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 my-5 mx-5"
 					>
+						<!-- <div v-for="course in tab.courses.value">
+							{{ course.membership }}
+							{{ course.current_lesson }}
+							<div v-if="course.current_lesson">
+								{{ course.current_lesson.split('-')[0] }}
+								{{ course.current_lesson.split('-')[1] }}
+							</div>
+						</div> -->
 						<router-link
 							v-for="course in tab.courses.value"
 							:to="
@@ -65,8 +73,8 @@
 											name: 'Lesson',
 											params: {
 												courseName: course.name,
-												chapterNumber: course.current_lesson.split('.')[0],
-												lessonNumber: course.current_lesson.split('.')[1],
+												chapterNumber: course.current_lesson.split('-')[0],
+												lessonNumber: course.current_lesson.split('-')[1],
 											},
 									  }
 									: course.membership

frontend/src/pages/Notifications.vue

@@ -3,48 +3,136 @@
 		class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
 	>
 		<Breadcrumbs :items="breadcrumbs" />
+		<div class="flex items-center space-x-2">
+			<Button
+				@click="markAllAsRead.submit"
+				:loading="markAllAsRead.loading"
+				v-if="activeTab === 'Unread' && unReadNotifications.data?.length > 0"
+			>
+				{{ __('Mark all as read') }}
+			</Button>
+			<TabButtons
+				class="inline-block"
+				:buttons="[{ label: 'Unread', active: true }, { label: 'Read' }]"
+				v-model="activeTab"
+			/>
+		</div>
 	</header>
-	<div class="w-3/4 mx-auto">
+	<div class="w-3/4 mx-auto px-5 pt-6 divide-y">
 		<div
-			v-for="log in notifications.data"
-			class="flex items-center border-b py-2 justify-between"
+			v-if="notifications?.length"
+			v-for="log in notifications"
+			class="flex items-center py-2 justify-between"
 		>
 			<div class="flex items-center">
 				<UserAvatar :user="allUsers.data[log.from_user]" class="mr-2" />
 				<div class="notification" v-html="log.subject"></div>
 			</div>
-			<Link
-				v-if="log.link"
-				:to="log.link"
-				class="text-gray-600 font-medium text-sm hover:text-gray-700"
-			>
-				{{ __('View') }}
-			</Link>
+			<div class="flex items-center space-x-2">
+				<Link
+					v-if="log.link"
+					:to="log.link"
+					@click="markAsRead.submit({ name: log.name })"
+					class="text-gray-600 font-medium text-sm hover:text-gray-700"
+				>
+					{{ __('View') }}
+				</Link>
+				<Tooltip :text="__('Mark as read')">
+					<Button
+						variant="ghost"
+						v-if="!log.read"
+						@click="markAsRead.submit({ name: log.name })"
+					>
+						<template #icon>
+							<X class="h-4 w-4 text-gray-700 stroke-1.5" />
+						</template>
+					</Button>
+				</Tooltip>
+			</div>
+		</div>
+		<div v-else class="text-gray-600">
+			{{ __('Nothing to see here.') }}
 		</div>
 	</div>
 </template>
 <script setup>
-import { createResource, Breadcrumbs, Link } from 'frappe-ui'
-import { computed, inject } from 'vue'
+import {
+	createListResource,
+	createResource,
+	Breadcrumbs,
+	Link,
+	TabButtons,
+	Button,
+	Tooltip,
+} from 'frappe-ui'
+import { computed, inject, ref, onMounted } from 'vue'
 import UserAvatar from '@/components/UserAvatar.vue'
+import { useRouter } from 'vue-router'
+import { X } from 'lucide-vue-next'
 
 const user = inject('$user')
+const socket = inject('$socket')
 const allUsers = inject('$allUsers')
+const activeTab = ref('Unread')
+const router = useRouter()
 
-const notifications = createResource({
-	url: 'frappe.client.get_list',
-	makeParams: (values) => {
+onMounted(() => {
+	if (!user.data) router.push({ name: 'Courses' })
+
+	socket.on('publish_lms_notifications', (data) => {
+		unReadNotifications.reload()
+	})
+})
+
+const notifications = computed(() => {
+	return activeTab.value === 'Unread'
+		? unReadNotifications.data
+		: readNotifications.data
+})
+
+const unReadNotifications = createListResource({
+	doctype: 'Notification Log',
+	fields: ['subject', 'from_user', 'link', 'read', 'name'],
+	filters: {
+		for_user: user.data?.name,
+		read: 0,
+	},
+	orderBy: 'creation desc',
+	auto: true,
+	cache: 'Unread Notifications',
+})
+
+const readNotifications = createListResource({
+	doctype: 'Notification Log',
+	fields: ['subject', 'from_user', 'link', 'read', 'name'],
+	filters: {
+		for_user: user.data?.name,
+		read: 1,
+	},
+	orderBy: 'creation desc',
+	auto: true,
+	cache: 'Read Notifications',
+})
+
+const markAsRead = createResource({
+	url: 'frappe.desk.doctype.notification_log.notification_log.mark_as_read',
+	makeParams(values) {
 		return {
-			doctype: 'Notification Log',
-			fields: ['subject', 'from_user', 'link'],
-			filters: {
-				for_user: user.data?.name,
-			},
-			order_by: 'creation desc',
+			docname: values.name,
 		}
 	},
-	auto: true,
-	cache: user.data?.name,
+	onSuccess(data) {
+		unReadNotifications.reload()
+		readNotifications.reload()
+	},
+})
+
+const markAllAsRead = createResource({
+	url: 'frappe.desk.doctype.notification_log.notification_log.mark_all_as_read',
+	onSuccess(data) {
+		unReadNotifications.reload()
+		readNotifications.reload()
+	},
 })
 
 const breadcrumbs = computed(() => {