added no news

This commit is contained in:
Xeovalyte 2022-11-14 14:46:59 +01:00
parent efe2a6ff48
commit 42a5d0c92e

View File

@ -1,10 +1,10 @@
<template> <template>
<div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md"> <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
<div v-if="news && news[0]" class="flex flex-col gap-3"> <div v-if="loadedNews && news" class="flex flex-col gap-3">
<NuxtLink to="/news/newmessage" v-if="userData.sendNews" class="item-hover border-dashed border-2 container text-center font-bold text-xl border-neutral-500 mb-3"> <NuxtLink to="/news/newmessage" v-if="userData.sendNews" class="item-hover border-dashed border-2 container text-center font-bold text-xl border-neutral-500 mb-3">
Nieuw Bericht Nieuw Bericht
</NuxtLink> </NuxtLink>
<div v-for="(item, index) in news" :key="index"> <div v-if="news[0]" v-for="(item, index) in news" :key="index">
<div class="item container flex flex-col relative"> <div class="item container flex flex-col relative">
<h3 class="text-sm">{{ longEventDate(item.date.toDate()) }}</h3> <h3 class="text-sm">{{ longEventDate(item.date.toDate()) }}</h3>
<h2 class="text-2xl font-bold">{{ item.title }}</h2> <h2 class="text-2xl font-bold">{{ item.title }}</h2>
@ -12,6 +12,9 @@
<Icon v-if="userData.sendNews" @click="deleteItem(item, index)" size="1.5em" name="ion:trash-sharp" class="absolute top-3 right-3 hover:cursor-pointer text-red-500" /> <Icon v-if="userData.sendNews" @click="deleteItem(item, index)" size="1.5em" name="ion:trash-sharp" class="absolute top-3 right-3 hover:cursor-pointer text-red-500" />
</div> </div>
</div> </div>
<h2 v-else class="font-bold text-center text-xl mt-3">
Er is geen nieuws
</h2>
</div> </div>
<div class="w-full flex flex-col justify-center items-center" v-else> <div class="w-full flex flex-col justify-center items-center" v-else>
<Icon size="2em" name="ion:load-c" class="animate-spin" /> <Icon size="2em" name="ion:load-c" class="animate-spin" />
@ -32,6 +35,8 @@ const { news, userData, db } = inject('firebase')
const toast = useToast() const toast = useToast()
const loadedNews = ref(false)
onMounted(() => { onMounted(() => {
if (!news.value) getNews() if (!news.value) getNews()
}) })
@ -61,6 +66,8 @@ const getNews = async () => {
news.value.sort((a, b) => b.date.seconds - a.date.seconds) news.value.sort((a, b) => b.date.seconds - a.date.seconds)
loadedNews.value = true
} catch (e) { } catch (e) {
console.log(e) console.log(e)
} }