feat(frontend): Close notification slider over on click, fix types, delete dead code

legalconsenthub/components/NotificationsSlideover.vue

@@ -11,7 +11,7 @@
         :key="notification.id"
         :to="notification.clickTarget"
         class="px-3 py-2.5 rounded-md hover:bg-elevated/50 flex items-center gap-3 relative -mx-3 first:-mt-3 last:-mb-3"
-        @click="handleNotificationClick(notification)"
+        @click="onNotificationClick(notification)"
       >
         <UChip
           :color="notification.type === 'ERROR' ? 'error' : notification.type === 'WARNING' ? 'warning' : 'primary'"
@@ -54,7 +54,7 @@
               {{ notification.type }}
             </UBadge>
             <UBadge color="neutral" variant="subtle" size="xs">
-              {{ notification.targetGroup }}
+              {{ notification.role }}
             </UBadge>
           </div>
         </div>
@@ -65,6 +65,7 @@
 
 <script setup lang="ts">
 import { formatTimeAgo } from '@vueuse/core'
+import type { NotificationDto } from '~/.api-client'
 
 const emit = defineEmits<{
   'update:modelValue': [value: boolean]
@@ -86,4 +87,9 @@ watch(isOpen, async (newValue) => {
     await fetchNotifications()
   }
 })
+
+function onNotificationClick(notification: NotificationDto) {
+  handleNotificationClick(notification)
+  emit('update:modelValue', false)
+}
 </script>

legalconsenthub/composables/notification/useNotification.ts

@@ -92,7 +92,7 @@ export const useNotification = () => {
 
   const startPeriodicRefresh = (intervalMs: number = 30000) => {
     const interval = setInterval(() => {
-      fetchUnreadCount()
+      void fetchUnreadCount()
     }, intervalMs)
 
     onUnmounted(() => {
@@ -103,10 +103,10 @@ export const useNotification = () => {
   }
 
   return {
-    notifications: readonly(notifications),
+    notifications,
-    unreadNotifications: readonly(unreadNotifications),
+    unreadNotifications,
-    unreadCount: readonly(unreadCount),
+    unreadCount,
-    isLoading: readonly(isLoading),
+    isLoading,
     fetchNotifications,
     fetchUnreadNotifications,
     fetchUnreadCount,

legalconsenthub/pages/application-forms/[id]/[sectionIndex].vue

@@ -40,7 +40,6 @@
             v-model="currentFormElementSection.formElements"
             :application-form-id="applicationForm.id"
             :disabled="isReadOnly"
-            @click:comments="openComments"
           />
           <div class="flex gap-2 justify-between mt-4">
             <UButton
@@ -160,8 +159,4 @@ async function onSubmit() {
     toast.add({ title: 'Success', description: 'Application form submitted', color: 'success' })
   }
 }
-
-function openComments(formElementId: string) {
-  console.log('open comments for', formElementId)
-}
 </script>

legalconsenthub/pages/create.vue

@@ -80,7 +80,7 @@
 <script setup lang="ts">
 import { ComplianceStatus, type FormElementSectionDto, type PagedApplicationFormDto } from '~/.api-client'
 import { useApplicationFormValidator } from '~/composables/useApplicationFormValidator'
-import type { FormElementId } from '~/types/FormElement'
+import type { FormElementId } from '~/types/formElement'
 import type { StepperItem } from '@nuxt/ui'
 
 const { getAllApplicationFormTemplates } = useApplicationFormTemplate()