feat(#2): Get notifications working again

legalconsenthub/app.vue

@@ -18,8 +18,8 @@ const color = computed(() => (colorMode.value === 'dark' ? '#111827' : 'white'))
 useHead({
   meta: [
     { charset: 'utf-8' },
-    { userName: 'viewport', content: 'width=device-width, initial-scale=1' },
-    { key: 'theme-color', userName: 'theme-color', content: color }
+    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    { key: 'theme-color', name: 'theme-color', content: color }
   ],
   link: [{ rel: 'icon', href: '/favicon.ico' }],
   htmlAttrs: {
@@ -39,8 +39,4 @@ useSeoMeta({
   twitterImage: 'https://dashboard-template.nuxt.dev/social-card.png',
   twitterCard: 'summary_large_image'
 })
-
-// onBeforeMount(() => {
-//   $fetch('/api/auth/refresh')
-// })
 </script>

legalconsenthub/components/NotificationsSlideover.vue

@@ -53,9 +53,6 @@
             >
               {{ notification.type }}
             </UBadge>
-            <UBadge color="neutral" variant="subtle" size="xs">
-              {{ notification.role }}
-            </UBadge>
           </div>
         </div>
       </NuxtLink>
@@ -80,13 +77,13 @@ const isOpen = computed({
   set: (value) => emit('update:modelValue', value)
 })
 
-// const { notifications, fetchNotifications, handleNotificationClick } = useNotification()
-//
-// watch(isOpen, async (newValue) => {
-//   if (newValue) {
-//     await fetchNotifications()
-//   }
-// })
+const { notifications, fetchNotifications, handleNotificationClick } = useNotification()
+
+watch(isOpen, async (newValue) => {
+  if (newValue) {
+    await fetchNotifications()
+  }
+})
 
 function onNotificationClick(notification: NotificationDto) {
   handleNotificationClick(notification)

legalconsenthub/composables/notification/useNotification.ts

@@ -9,15 +9,24 @@ export const useNotification = () => {
     markNotificationAsRead
   } = useNotificationApi()
 
+  const userStore = useUserStore()
+  const organizationId = computed(() => userStore.selectedOrganization?.id)
+  const { user } = useUserSession()
+  const userId = computed(() => user.value?.keycloakId)
+
   const notifications = ref<NotificationDto[]>([])
   const unreadNotifications = ref<NotificationDto[]>([])
   const unreadCount = ref<number>(0)
   const isLoading = ref(false)
 
   const fetchNotifications = async (page: number = 0, size: number = 20) => {
+    if (!organizationId.value) {
+      console.warn('No organization selected')
+      return
+    }
     isLoading.value = true
     try {
-      const response = await getNotifications(page, size)
+      const response = await getNotifications(organizationId.value, page, size)
       notifications.value = response.content || []
       return response
     } catch (error) {
@@ -29,8 +38,12 @@ export const useNotification = () => {
   }
 
   const fetchUnreadNotifications = async () => {
+    if (!organizationId.value) {
+      console.warn('No organization selected')
+      return
+    }
     try {
-      const response = await getUnreadNotifications()
+      const response = await getUnreadNotifications(organizationId.value)
       unreadNotifications.value = response || []
       return response
     } catch (error) {
@@ -40,8 +53,12 @@ export const useNotification = () => {
   }
 
   const fetchUnreadCount = async () => {
+    if (!userId.value || !organizationId.value) {
+      console.warn('No user or organization selected')
+      return
+    }
     try {
-      const count = await getUnreadNotificationCount()
+      const count = await getUnreadNotificationCount(userId.value, organizationId.value)
       unreadCount.value = count || 0
       return count
     } catch (error) {
@@ -51,8 +68,12 @@ export const useNotification = () => {
   }
 
   const markAllAsRead = async () => {
+    if (!organizationId.value) {
+      console.warn('No organization selected')
+      return
+    }
     try {
-      await markAllNotificationsAsRead()
+      await markAllNotificationsAsRead(organizationId.value)
       unreadCount.value = 0
       unreadNotifications.value = []
       notifications.value = notifications.value.map((n) => ({ ...n, isRead: true }))
@@ -63,8 +84,12 @@ export const useNotification = () => {
   }
 
   const markAsRead = async (notificationId: string) => {
+    if (!organizationId.value) {
+      console.warn('No organization selected')
+      return
+    }
     try {
-      await markNotificationAsRead(notificationId)
+      await markNotificationAsRead(notificationId, organizationId.value)
       const index = notifications.value.findIndex((n) => n.id === notificationId)
       if (index !== -1) {
         notifications.value[index].isRead = true

legalconsenthub/composables/notification/useNotificationApi.ts

@@ -28,24 +28,28 @@ export function useNotificationApi() {
     return notificationApiClient.createNotification({ createNotificationDto })
   }
 
-  async function getNotifications(page?: number, size?: number): Promise<PagedNotificationDto> {
-    return notificationApiClient.getNotifications({ page, size })
+  async function getNotifications(organizationId: string, page?: number, size?: number): Promise<PagedNotificationDto> {
+    return notificationApiClient.getNotifications({ organizationId, page, size })
   }
 
-  async function getUnreadNotifications(): Promise<NotificationDto[]> {
-    return notificationApiClient.getUnreadNotifications()
+  async function getUnreadNotifications(organizationId: string): Promise<NotificationDto[]> {
+    return notificationApiClient.getUnreadNotifications({ organizationId })
   }
 
-  async function getUnreadNotificationCount(): Promise<number> {
-    return notificationApiClient.getUnreadNotificationCount()
+  async function getUnreadNotificationCount(userId: string, organizationId: string): Promise<number> {
+    return notificationApiClient.getUnreadNotificationCount({ userId, organizationId })
   }
 
-  async function markAllNotificationsAsRead(): Promise<void> {
-    return notificationApiClient.markAllNotificationsAsRead()
+  async function markAllNotificationsAsRead(organizationId: string): Promise<void> {
+    return notificationApiClient.markAllNotificationsAsRead({ organizationId })
   }
 
-  async function markNotificationAsRead(id: string): Promise<NotificationDto> {
-    return notificationApiClient.markNotificationAsRead({ id })
+  async function markNotificationAsRead(id: string, organizationId: string): Promise<NotificationDto> {
+    return notificationApiClient.markNotificationAsRead({ id, organizationId })
+  }
+
+  async function clearAllNotifications(organizationId: string): Promise<void> {
+    return notificationApiClient.clearAllNotifications({ organizationId })
   }
 
   return {
@@ -54,6 +58,7 @@ export function useNotificationApi() {
     getUnreadNotifications,
     getUnreadNotificationCount,
     markAllNotificationsAsRead,
-    markNotificationAsRead
+    markNotificationAsRead,
+    clearAllNotifications
   }
 }

legalconsenthub/layouts/default.vue

@@ -42,10 +42,10 @@ const open = ref(false)
 const isNotificationsSlideoverOpen = ref(false)
 const { unreadCount, fetchUnreadCount, startPeriodicRefresh } = useNotification()
 
-// onMounted(async () => {
-//   await fetchUnreadCount()
-//   startPeriodicRefresh()
-// })
+onMounted(async () => {
+  await fetchUnreadCount()
+  startPeriodicRefresh()
+})
 
 provide('notificationState', {
   isNotificationsSlideoverOpen,

legalconsenthub/server/api/[...].ts

@@ -12,9 +12,6 @@ export default defineEventHandler(async (event: H3Event) => {
   const session = await getUserSession(event)
   const accessToken = session?.jwt?.accessToken
 
-  console.log('🔍 PROXY: proxying request, found access token:', accessToken)
-  console.log('🔍 PROXY: Expiration:', new Date(jwtDecode(accessToken).exp! * 1000).toISOString())
-
   if (!accessToken) {
     throw createError({
       statusCode: 401,
@@ -22,7 +19,8 @@ export default defineEventHandler(async (event: H3Event) => {
     })
   }
 
-  console.log('🔀 proxying request to', target)
+  console.log('🔀 [PROXY] Expiration:', new Date(jwtDecode(accessToken).exp! * 1000).toISOString())
+  console.log('🔀 [PROXY] Proxying request to:', target)
 
   return proxyRequest(event, target, {
     headers: {