64 lines
1.9 KiB
Vue
64 lines
1.9 KiB
Vue
<script setup>
|
|
import {formatTimeAgo} from '@vueuse/core'
|
|
|
|
const { isNotificationsSlideoverOpen } = useDashboard()
|
|
|
|
watch(isNotificationsSlideoverOpen, async (newVal,oldVal) => {
|
|
if(newVal === true) {
|
|
await setup()
|
|
}
|
|
})
|
|
|
|
const notifications = ref([])
|
|
|
|
const setup = async () => {
|
|
try {
|
|
notifications.value = await useNuxtApp().$api("/api/resource/notifications_items")
|
|
} catch (e) {
|
|
notifications.value = []
|
|
}
|
|
}
|
|
|
|
setup()
|
|
|
|
const setNotificationAsRead = async (notification) => {
|
|
try {
|
|
await useNuxtApp().$api(`/api/resource/notifications_items/${notification.id}`, {
|
|
method: "PUT",
|
|
body: { readAt: new Date() }
|
|
})
|
|
} catch (e) {
|
|
// noop: endpoint optional in older/newer backend variants
|
|
}
|
|
setup()
|
|
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardSlideover v-model="isNotificationsSlideoverOpen" title="Benachrichtigungen">
|
|
<NuxtLink
|
|
v-for="notification in notifications"
|
|
:key="notification.id"
|
|
:to="notification.link"
|
|
class="p-3 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer flex items-center gap-3 relative"
|
|
@click="setNotificationAsRead(notification)"
|
|
>
|
|
<UChip color="primary" :show="!notification.read && !notification.readAt" inset>
|
|
<UAvatar alt="FEDEO" size="md" />
|
|
</UChip>
|
|
|
|
<div class="text-sm flex-1">
|
|
<p class="flex items-center justify-between">
|
|
<span class="text-gray-900 dark:text-white font-medium">{{notification.title}}</span>
|
|
|
|
<time :datetime="notification.date || notification.createdAt || notification.created_at" class="text-gray-500 dark:text-gray-400 text-xs" v-text="formatTimeAgo(new Date(notification.createdAt || notification.created_at))" />
|
|
</p>
|
|
<p class="text-gray-500 dark:text-gray-400">
|
|
{{ notification.message }}
|
|
</p>
|
|
</div>
|
|
</NuxtLink>
|
|
</UDashboardSlideover>
|
|
</template>
|