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="newsStore.loaded && newsStore.news" class="flex flex-col gap-3">
      <NuxtLink to="/news/newmessage" v-if="userStore.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="newsStore.news[0]" v-for="(item, index) in newsStore.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="userStore.userData.sendNews" @click="newsStore.deleteNews(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>
definePageMeta({
  title: 'Nieuws'
})

const userStore = useUserStore()
const newsStore = useNewsStore()

onMounted(() => {
  newsStore.getNews()
})

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'
  }
)}

</script>