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()" type="button" class="hover:underline font-bold w-full sm:w-max sm:ml-auto">Annuleer</button>
      </div>
    </form>
  </div>
</template>

<script setup>
definePageMeta({
  title: 'Nieuw Bericht',
  key: 'back'
})

const router = useRouter()
const toast = useToast()
const newsStore = useNewsStore()

const disableButtons = ref(false)

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

    await newsStore.send(form.value)

    disableButtons.value = false
  } catch (e) {
    console.log(e)
    disableButtons.value = false

    toast.error('Error tijdens versturen bericht')
  }
}

const form = ref({
  title: '',
  description: '',
  topic: ''
})
</script>