110 lines
2.7 KiB
Vue
110 lines
2.7 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gray-100">
|
|
<!-- Header -->
|
|
<header class="bg-white shadow-sm border-b py-2 px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex items-center space-x-4">
|
|
<img src="/logos/logo.png" alt="New Life Christian Church" class="h-10" />
|
|
<UButton
|
|
@click="navigateTo('/')"
|
|
variant="ghost"
|
|
color="gray"
|
|
icon="i-heroicons-arrow-left"
|
|
>
|
|
Back to Sermons
|
|
</UButton>
|
|
<h1 class="text-2xl font-bold text-gray-900">Create New Sermon</h1>
|
|
</div>
|
|
<UButton
|
|
@click="handleLogout"
|
|
variant="outline"
|
|
color="gray"
|
|
>
|
|
Logout
|
|
</UButton>
|
|
</div>
|
|
</header>
|
|
|
|
<UContainer class="py-8">
|
|
<UCard>
|
|
<template #header>
|
|
<h2 class="text-xl font-semibold">Sermon Details</h2>
|
|
</template>
|
|
|
|
<!-- Form content will go here -->
|
|
|
|
</UCard>
|
|
|
|
<!-- Success Message -->
|
|
<div v-if="successMessage" class="mt-4 p-4 bg-green-50 border border-green-200 rounded-lg">
|
|
<p class="text-green-800">{{ successMessage }}</p>
|
|
</div>
|
|
</UContainer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { generateSlug } from '~/server/utils/auth'
|
|
|
|
const form = reactive({
|
|
title: '',
|
|
date: '',
|
|
bibleReferences: [''],
|
|
personalApplication: '',
|
|
pastorChallenge: ''
|
|
})
|
|
|
|
const loading = ref(false)
|
|
const successMessage = ref('')
|
|
|
|
const addBibleReference = () => {
|
|
form.bibleReferences.push('')
|
|
}
|
|
|
|
const removeBibleReference = (index: number) => {
|
|
if (form.bibleReferences.length > 1) {
|
|
form.bibleReferences.splice(index, 1)
|
|
}
|
|
}
|
|
|
|
const resetForm = () => {
|
|
form.title = ''
|
|
form.date = ''
|
|
form.bibleReferences = ['']
|
|
form.personalApplication = ''
|
|
form.pastorChallenge = ''
|
|
successMessage.value = ''
|
|
}
|
|
|
|
const handleSubmit = async () => {
|
|
loading.value = true
|
|
successMessage.value = ''
|
|
|
|
try {
|
|
await $fetch('/api/sermons', {
|
|
method: 'POST',
|
|
body: {
|
|
title: form.title,
|
|
date: form.date,
|
|
bibleReferences: form.bibleReferences.filter(ref => ref.trim() !== ''),
|
|
personalApplication: form.personalApplication,
|
|
pastorChallenge: form.pastorChallenge
|
|
}
|
|
})
|
|
|
|
successMessage.value = 'Sermon created successfully!'
|
|
resetForm()
|
|
} catch (error: any) {
|
|
console.error('Failed to create sermon:', error)
|
|
// Error handling is done by Nuxt automatically
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const handleLogout = async () => {
|
|
await $fetch('/api/auth/logout', { method: 'POST' })
|
|
await navigateTo('/')
|
|
}
|
|
</script>
|