feat(notifications): add option to mark all as read

src/components/notifications/notifications.vue

@@ -36,6 +36,14 @@
 						</span>
 					</div>
 				</div>
+				<x-button
+					v-if="notifications.length > 0 && unreadNotifications > 0"
+					@click="markAllRead"
+					variant="tertiary" 
+					class="mt-2 is-fullwidth"
+				>
+					{{ $t('notification.markAllRead') }}
+				</x-button>
 				<p class="nothing" v-if="notifications.length === 0">
 					{{ $t('notification.none') }}<br/>
 					<span class="explainer">
@@ -60,11 +68,15 @@ import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
 import {getDisplayName} from '@/models/user'
 import {useAuthStore} from '@/stores/auth'
+import XButton from '@/components/input/button.vue'
+import {success} from '@/message'
+import {useI18n} from 'vue-i18n'
 
 const LOAD_NOTIFICATIONS_INTERVAL = 10000
 
 const authStore = useAuthStore()
 const router = useRouter()
+const {t} = useI18n()
 
 const allNotifications = ref<INotification[]>([])
 const showNotifications = ref(false)
@@ -138,6 +150,12 @@ function to(n, index) {
 		allNotifications.value[index] = await notificationService.update(n)
 	}
 }
+
+async function markAllRead() {
+	const notificationService = new NotificationService()
+	await notificationService.markAllRead()
+	success({message: t('notification.markAllReadSuccess')})
+}
 </script>
 
 <style lang="scss" scoped>

src/i18n/lang/en.json

@@ -952,7 +952,9 @@
   "notification": {
     "title": "Notifications",
     "none": "You don't have any notifications. Have a nice day!",
-    "explainer": "Notifications will appear here when actions projects or tasks you subscribed to happen."
+    "explainer": "Notifications will appear here when actions projects or tasks you subscribed to happen.",
+    "markAllRead": "Mark all notifications as read",
+    "markAllReadSuccess": "Successfully marked all notifications as read."
   },
   "quickActions": {
     "commands": "Commands",

src/services/notification.ts

@@ -15,8 +15,16 @@ export default class NotificationService extends AbstractService<INotification>
 	}
 
 	beforeUpdate(model) {
+		if (!model) {
+			return model
+		}
+		
 		model.created = new Date(model.created).toISOString()
 		model.readAt = new Date(model.readAt).toISOString()
 		return model
 	}
+	
+	async markAllRead() {
+		return this.post('/notifications', false)
+	}
 }