118 lines
2.8 KiB
Vue
118 lines
2.8 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>
|
|
|
|
<div class="py-8 w-96 mx-auto px-4 sm:px-6 lg:px-8">
|
|
<p>Test content with fixed width</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
middleware: ['auth']
|
|
})
|
|
|
|
const form = reactive({
|
|
title: '',
|
|
date: '',
|
|
bibleReferences: [''],
|
|
personalApplication: '',
|
|
pastorChallenge: ''
|
|
})
|
|
|
|
const loading = ref(false)
|
|
const successMessage = ref('')
|
|
|
|
const generateSlug = (title: string, date: string) => {
|
|
if (!title || !date) return ''
|
|
|
|
const formattedTitle = title
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9\s-]/g, '')
|
|
.replace(/\s+/g, '-')
|
|
.replace(/-+/g, '-')
|
|
.trim()
|
|
|
|
const dateObj = new Date(date)
|
|
const month = String(dateObj.getMonth() + 1).padStart(2, '0')
|
|
const day = String(dateObj.getDate()).padStart(2, '0')
|
|
const year = dateObj.getFullYear()
|
|
|
|
return `sermon-${month}${day}${year}`
|
|
}
|
|
|
|
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>
|