wrbapp/frontend/pages/news/newmessage.vue
2023-01-22 15:12:15 +01:00

81 lines
2.2 KiB
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" />
<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: '',
})
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 }
})
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>