wrbapp/frontend/pages/news/index.vue

<template>
    <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
        <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">
                Nieuw Bericht
            </NuxtLink>
            <div v-if="news[0]" v-for="(item, index) in news" :key="index">
                <div class="item container flex flex-col relative">
                    <h3 class="text-sm">{{ longEventDate(item.date.toDate()) }}</h3>
                    <h2 class="text-2xl font-bold">{{ item.title }}</h2>
                    <p>{{ item.description }}</p>
                    <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>
            <h2 v-else class="font-bold text-center text-xl mt-3">
                Er is geen nieuws
            </h2>
        </div>
        <div class="w-full flex flex-col justify-center items-center" v-else>
            <Icon size="2em" name="ion:load-c" class="animate-spin" />
            <h2 class="mt-2 font-bold">Loading...</h2>
        </div>
    </div>
</template>

<script setup>
import { getDocs, collection, deleteDoc, doc } from 'firebase/firestore'
import { useToast } from 'vue-toastification'

definePageMeta({
    title: 'Nieuws'
})

const { news, userData, db } = inject('firebase')

const toast = useToast()

const loadedNews = ref(false)

onMounted(() => {
    if (!news.value) getNews()
    else loadedNews.value = true
})

const longEventDate = (eventDate) => {
	const date = new Date(eventDate)

	return date.toLocaleString('nl-NL', {
        weekday: 'short',
        day: 'numeric',
        year: 'numeric',
        month: 'long',
        hour: 'numeric',
        minute: 'numeric'
    }
)}

const getNews = async () => {
    news.value = []
    try {
        const querySnapshot = await getDocs(collection(db, "news"));
        querySnapshot.forEach((doc) => {
            let data = doc.data()
            data.id = doc.id
            news.value.push(data)
        });

        news.value.sort((a, b) => b.date.seconds - a.date.seconds)

        loadedNews.value = true

    } catch (e) {
        console.log(e)
    }
}

const deleteItem = async (item, index) => {
    if (!item.id) return toast.error('Refresh eerst voordat je dit bericht kan verwijderen')

    try {
        news.value.splice(index, 1)

        await deleteDoc(doc(db, "news", item.id));
        toast.success('Bericht verwijderd')
    } catch (e) {
        console.log(e)

        toast.error('Error tijdens bericht verwijderen')
    }
    
}
</script>