Add unarchive functionality and show archived status in admin dropdown

2025-10-02 00:05:45 -04:00
parent f1e0ac0a93
commit 4daea87cd1
4 changed files with 151 additions and 58 deletions
--- a/pages/admin.vue
+++ b/pages/admin.vue
@@ -35,7 +35,7 @@
              >
                <option value="">-- Choose a sermon --</option>
                <option v-for="sermon in allSermons" :key="sermon.id" :value="sermon.id">
-                  {{ sermon.title }} ({{ formatDate(sermon.date) }})
+                  {{ sermon.title }} ({{ formatDate(sermon.date) }}){{ sermon.archived ? ' [ARCHIVED]' : '' }}
                </option>
              </select>
            </div>
@@ -50,6 +50,7 @@
                  Edit
                </button>
                <button
+                  v-if="!isSelectedSermonArchived"
                  type="button"
                  @click="handleArchive"
                  :disabled="!selectedSermonId || archiving"
@@ -57,6 +58,15 @@
                >
                  {{ archiving ? 'Archiving...' : 'Archive' }}
                </button>
+                <button
+                  v-else
+                  type="button"
+                  @click="handleUnarchive"
+                  :disabled="!selectedSermonId || archiving"
+                  class="flex-1 px-6 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+                >
+                  {{ archiving ? 'Unarchiving...' : 'Unarchive' }}
+                </button>
              </div>
              <button
                type="button"
@@ -280,6 +290,13 @@ const error = ref('')
 const success = ref('')
 const loading = ref(false)

+// Check if selected sermon is archived
+const isSelectedSermonArchived = computed(() => {
+  if (!selectedSermonId.value || !allSermons.value) return false
+  const sermon = allSermons.value.find((s: any) => s.id === parseInt(selectedSermonId.value))
+  return sermon?.archived === 1
+})
+
 function addReference() {
  bibleReferences.value.push({ version: 'ESV', reference: '', text: '' })
 }
@@ -402,7 +419,7 @@ function handleEdit() {
 async function handleArchive() {
  if (!selectedSermonId.value) return
  
-  if (!confirm('Are you sure you want to archive this sermon? It will be moved to the previous sermons list.')) {
+  if (!confirm('Are you sure you want to archive this sermon? It will be hidden from the main page.')) {
    return
  }
  
@@ -426,6 +443,33 @@ async function handleArchive() {
  }
 }

+async function handleUnarchive() {
+  if (!selectedSermonId.value) return
+  
+  if (!confirm('Are you sure you want to unarchive this sermon? It will be visible on the main page again.')) {
+    return
+  }
+  
+  archiveError.value = ''
+  archiveSuccess.value = ''
+  archiving.value = true
+
+  try {
+    await $fetch(`/api/sermons/unarchive/${selectedSermonId.value}`, {
+      method: 'POST'
+    })
+
+    archiveSuccess.value = 'Sermon unarchived successfully!'
+    selectedSermonId.value = ''
+    
+    await refreshSermons()
+  } catch (e: any) {
+    archiveError.value = e.data?.message || 'Failed to unarchive sermon'
+  } finally {
+    archiving.value = false
+  }
+}
+
 async function handleDelete() {
  if (!selectedSermonId.value) return
  
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -38,7 +38,7 @@
        </div>
        <div class="text-center mt-6">
          <h1 class="text-3xl font-bold text-gray-900">
-            Welcome to New Life! Please choose the sermon you'd like to see.
+            Welcome to New Life!
          </h1>
        </div>
      </div>
@@ -46,46 +46,31 @@

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-      <!-- Recent Sermons (Last 3 months) -->
-      <div v-if="recentSermons.length > 0">
-        <h2 class="text-2xl font-semibold text-gray-900 mb-6">Recent Sermons</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
-          <SermonCard 
-            v-for="sermon in recentSermons" 
-            :key="sermon.id" 
-            :sermon="sermon" 
-          />
+      <!-- Most Recent Sermon -->
+      <div v-if="mostRecentSermon">
+        <h2 class="text-2xl font-semibold text-gray-900 mb-6">{{ sermonHeading }}</h2>
+        <div class="max-w-md mx-auto">
+          <SermonCard :sermon="mostRecentSermon" />
        </div>
      </div>

-      <!-- Older Sermons Dropdown -->
-      <div v-if="olderSermons.length > 0" class="mt-8">
-        <button
-          @click="showOlder = !showOlder"
-          class="w-full bg-white border border-gray-300 rounded-lg px-6 py-4 text-left hover:bg-gray-50 transition-colors flex items-center justify-between"
+      <!-- Previous Sermons Dropdown -->
+      <div v-if="previousSermons.length > 0" class="mt-12 max-w-2xl mx-auto">
+        <p class="text-center text-gray-700 mb-4">Use the dropdown below to view a previous sermon</p>
+        <select
+          v-model="selectedSermonSlug"
+          @change="navigateToSermon"
+          class="block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base"
        >
-          <span class="text-lg font-medium text-gray-900">View Older Sermons</span>
-          <svg 
-            :class="['w-5 h-5 text-gray-500 transition-transform', showOlder ? 'rotate-180' : '']"
-            fill="none" 
-            stroke="currentColor" 
-            viewBox="0 0 24 24"
-          >
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-          </svg>
-        </button>
-        
-        <div v-if="showOlder" class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <SermonCard 
-            v-for="sermon in olderSermons" 
-            :key="sermon.id" 
-            :sermon="sermon" 
-          />
-        </div>
+          <option value="">-- Select a previous sermon --</option>
+          <option v-for="sermon in previousSermons" :key="sermon.id" :value="sermon.slug">
+            {{ sermon.title }} ({{ formatDate(sermon.date) }})
+          </option>
+        </select>
      </div>

      <!-- Empty State -->
-      <div v-if="recentSermons.length === 0 && olderSermons.length === 0" class="text-center py-12">
+      <div v-if="!mostRecentSermon" class="text-center py-12">
        <p class="text-gray-500 text-lg">No sermons available yet.</p>
      </div>
    </main>
@@ -93,39 +78,59 @@
 </template>

 <script setup lang="ts">
-const showOlder = ref(false)
-
 // Check authentication status
 const { data: authData } = await useFetch('/api/auth/verify')
 const isAuthenticated = computed(() => authData.value?.authenticated || false)

-// Fetch all sermons
-const { data: allSermons } = await useFetch('/api/sermons')
+// Fetch non-archived sermons only
+const { data: allSermons } = await useFetch('/api/sermons?includeArchived=false')

-// Calculate date 3 months ago
-const threeMonthsAgo = new Date()
-threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3)
+const selectedSermonSlug = ref('')

-// Split sermons into recent and older
-const recentSermons = computed(() => {
-  if (!allSermons.value) return []
-  return allSermons.value.filter((sermon: any) => {
-    const sermonDate = new Date(sermon.date)
-    return sermonDate >= threeMonthsAgo
-  })
+// Get most recent sermon
+const mostRecentSermon = computed(() => {
+  if (!allSermons.value || allSermons.value.length === 0) return null
+  return allSermons.value[0]
 })

-const olderSermons = computed(() => {
-  if (!allSermons.value) return []
-  return allSermons.value.filter((sermon: any) => {
-    const sermonDate = new Date(sermon.date)
-    return sermonDate < threeMonthsAgo
-  })
+// Get all previous sermons (excluding the most recent)
+const previousSermons = computed(() => {
+  if (!allSermons.value || allSermons.value.length <= 1) return []
+  return allSermons.value.slice(1)
 })

+// Check if most recent sermon is today
+const sermonHeading = computed(() => {
+  if (!mostRecentSermon.value) return 'Recent Sermon'
+  
+  const sermonDate = new Date(mostRecentSermon.value.date)
+  const today = new Date()
+  
+  // Compare dates (ignoring time)
+  const isToday = sermonDate.getFullYear() === today.getFullYear() &&
+                  sermonDate.getMonth() === today.getMonth() &&
+                  sermonDate.getDate() === today.getDate()
+  
+  return isToday ? "Today's Sermon" : 'Most Recent Sermon'
+})
+
+function formatDate(dateString: string) {
+  const date = new Date(dateString)
+  return date.toLocaleDateString('en-US', { 
+    year: 'numeric', 
+    month: '2-digit', 
+    day: '2-digit' 
+  })
+}
+
+function navigateToSermon() {
+  if (selectedSermonSlug.value) {
+    navigateTo(`/${selectedSermonSlug.value}`)
+  }
+}
+
 async function handleLogout() {
  await $fetch('/api/auth/logout', { method: 'POST' })
-  // Refresh the page to update authentication state
  window.location.reload()
 }
 </script>
--- a/server/api/sermons/index.get.ts
+++ b/server/api/sermons/index.get.ts
@@ -3,8 +3,9 @@ import { getAllSermons } from '~/server/utils/database'
 export default defineEventHandler(async (event) => {
  const query = getQuery(event)
  const limit = query.limit ? parseInt(query.limit as string) : undefined
+  const includeArchived = query.includeArchived === 'true'
  
-  const sermons = getAllSermons(limit)
+  const sermons = getAllSermons(limit, includeArchived)
  
  return sermons
 })
--- a/server/api/sermons/unarchive/[id].post.ts
+++ b/server/api/sermons/unarchive/[id].post.ts
@@ -0,0 +1,43 @@
+import { isAuthenticated } from '~/server/utils/auth'
+import { getDatabase } from '~/server/utils/database'
+
+export default defineEventHandler(async (event) => {
+  // Check authentication
+  if (!isAuthenticated(event)) {
+    throw createError({
+      statusCode: 401,
+      message: 'Unauthorized'
+    })
+  }
+
+  const id = getRouterParam(event, 'id')
+  
+  if (!id) {
+    throw createError({
+      statusCode: 400,
+      message: 'Sermon ID is required'
+    })
+  }
+
+  try {
+    const db = getDatabase()
+    const result = db.prepare('UPDATE sermons SET archived = 0 WHERE id = ?').run(parseInt(id))
+    
+    if (result.changes === 0) {
+      throw createError({
+        statusCode: 404,
+        message: 'Sermon not found'
+      })
+    }
+
+    return {
+      success: true,
+      message: 'Sermon unarchived successfully'
+    }
+  } catch (error: any) {
+    throw createError({
+      statusCode: 500,
+      message: error.message || 'Failed to unarchive sermon'
+    })
+  }
+})