Add sermon management functionality with delete capability to admin page

pages/admin.vue

@@ -18,7 +18,53 @@
     </header>
 
     <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <!-- Manage Existing Sermons Section -->
+      <div class="bg-white shadow-lg rounded-lg p-8 mb-8">
+        <h2 class="text-2xl font-bold text-gray-900 mb-6">Manage Existing Sermons</h2>
+        
+        <div v-if="allSermons && allSermons.length > 0" class="space-y-4">
+          <div class="flex gap-4 items-end">
+            <div class="flex-1">
+              <label for="sermon-select" class="block text-sm font-medium text-gray-700 mb-2">
+                Select Sermon to Delete
+              </label>
+              <select
+                id="sermon-select"
+                v-model="selectedSermonId"
+                class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+              >
+                <option value="">-- Choose a sermon --</option>
+                <option v-for="sermon in allSermons" :key="sermon.id" :value="sermon.id">
+                  {{ sermon.title }} ({{ formatDate(sermon.date) }})
+                </option>
+              </select>
+            </div>
+            <button
+              type="button"
+              @click="handleDelete"
+              :disabled="!selectedSermonId || deleting"
+              class="px-6 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+            >
+              {{ deleting ? 'Deleting...' : 'Delete Sermon' }}
+            </button>
+          </div>
+          
+          <div v-if="deleteError" class="text-red-600 text-sm">
+            {{ deleteError }}
+          </div>
+          <div v-if="deleteSuccess" class="text-green-600 text-sm">
+            {{ deleteSuccess }}
+          </div>
+        </div>
+        
+        <div v-else class="text-gray-500 text-sm">
+          No sermons available to manage.
+        </div>
+      </div>
+
+      <!-- Create New Sermon Form -->
       <form @submit.prevent="handleSubmit" class="bg-white shadow-lg rounded-lg p-8 space-y-8">
+        <h2 class="text-2xl font-bold text-gray-900">Create New Sermon</h2>
         <!-- Basic Info -->
         <div class="space-y-6">
           <div>
@@ -137,6 +183,16 @@ definePageMeta({
   middleware: 'auth'
 })
 
+// Fetch all sermons for management
+const { data: allSermons, refresh: refreshSermons } = await useFetch('/api/sermons')
+
+// Sermon management state
+const selectedSermonId = ref('')
+const deleteError = ref('')
+const deleteSuccess = ref('')
+const deleting = ref(false)
+
+// Create sermon form state
 const bibleReferences = ref([''])
 const formData = ref({
   date: '',
@@ -205,6 +261,39 @@ async function handleSubmit() {
   }
 }
 
+async function handleDelete() {
+  if (!selectedSermonId.value) return
+  
+  deleteError.value = ''
+  deleteSuccess.value = ''
+  deleting.value = true
+
+  try {
+    await $fetch(`/api/sermons/${selectedSermonId.value}`, {
+      method: 'DELETE'
+    })
+
+    deleteSuccess.value = 'Sermon deleted successfully!'
+    selectedSermonId.value = ''
+    
+    // Refresh the sermon list
+    await refreshSermons()
+  } catch (e: any) {
+    deleteError.value = e.data?.message || 'Failed to delete sermon'
+  } finally {
+    deleting.value = false
+  }
+}
+
+function formatDate(dateString: string) {
+  const date = new Date(dateString)
+  return date.toLocaleDateString('en-US', { 
+    year: 'numeric', 
+    month: 'long', 
+    day: 'numeric' 
+  })
+}
+
 async function handleLogout() {
   await $fetch('/api/auth/logout', { method: 'POST' })
   await navigateTo('/login')