61 lines
1.7 KiB
Vue
61 lines
1.7 KiB
Vue
<script setup>
|
|
import {formatTimeAgo} from '@vueuse/core'
|
|
|
|
const supabase = useSupabaseClient()
|
|
|
|
|
|
const { isNotificationsSlideoverOpen } = useDashboard()
|
|
|
|
watch(isNotificationsSlideoverOpen, async (newVal,oldVal) => {
|
|
if(newVal === true) {
|
|
await setup()
|
|
}
|
|
})
|
|
|
|
const notifications = ref([])
|
|
|
|
const setup = async () => {
|
|
notifications.value = (await supabase.from("notifications").select()).data
|
|
}
|
|
|
|
setup()
|
|
|
|
const setNotificationAsRead = async (notification) => {
|
|
console.log(notification)
|
|
|
|
const {data,error} = await supabase.from("notifications").update({read: true}).eq("id", notification.id)
|
|
|
|
console.log(error)
|
|
|
|
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" 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" class="text-gray-500 dark:text-gray-400 text-xs" v-text="formatTimeAgo(new Date(notification.created_at))" />
|
|
</p>
|
|
<p class="text-gray-500 dark:text-gray-400">
|
|
{{ notification.message }}
|
|
</p>
|
|
</div>
|
|
</NuxtLink>
|
|
</UDashboardSlideover>
|
|
</template>
|