wrbapp/frontend/pages/news/newmessage.vue

<template>
  <div class="flex flex-col gap-5 mx-auto p-2 w-full max-w-md">
    <form @submit.prevent="sendNews" class="flex flex-col">
      <label class="font-bold">Titel</label>
      <input v-model="form.title" required="true" class="input mb-5" type="text">

      <label class="font-bold">Beschrijving</label>
      <textarea v-model="form.description" required="true" class="input mb-5" />

      <label class="font-bold">Groep</label>
      <select v-model="form.topic" required="true" class="input mb-5">
        <option value="all">Iedereen</option>
        <option value="test">Test</option>
      </select>

      <div class="w-full flex flex-wrap justify-between">
        <input :disabled="disableButtons" type="submit" value="Stuur Bericht" class="btn w-full sm:w-40 mb-1">
        <button @click="router.back()" class="hover:underline font-bold w-full sm:w-max sm:ml-auto">Annuleer</button>
      </div>
    </form>
  </div>
</template>

<script setup>
import { addDoc, collection, serverTimestamp, Timestamp } from 'firebase/firestore'
import { useToast } from 'vue-toastification'

definePageMeta({
  title: 'Nieuw Bericht',
  key: 'back'
})

const { news, db, auth } = inject('firebase')
const router = useRouter()
const toast = useToast()

const disableButtons = ref(false)

const form = ref({
  title: '',
  description: '',
  topic: ''
})

const sendNews = async () => {
  disableButtons.value = true

  try {
    const idToken = await auth.value.currentUser.getIdToken(true)
    console.log(idToken)
      
    const { error } = await useFetch('/api/sendmessage', {
      method: 'post',
      body: { title: form.value.title, body: form.value.description, token: idToken, topic: form.value.topic  } 
    })

    if (error.value) {
      console.log(error.value)
      return toast.error('Error tijdens het versturen van het bericht')
    }

    await addDoc(collection(db, "news"), {
      title: form.value.title,
      description: form.value.description,
      date: serverTimestamp()
    });

    if (news.value) {
      news.value.unshift({
        title: form.value.title,
        description: form.value.description,
        date: Timestamp.now()
      })
    }
    toast.success('Bericht is verstuurd')

    navigateTo('/news')
  } catch (e) {
    console.log(e)

    toast.error('Error tijdens het berict sturen')
  }
  

  disableButtons.value = false
}
</script>