From c3a29fa47c646e0f5b1581eeee5e41db8b15392c Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Wed, 27 Aug 2025 17:14:02 +0100
Subject: [PATCH] Refactor event creation and display: Remove debug logs from
 event creation page, enhance layout for better responsiveness, and implement
 image URL fallback logic in event detail and index pages. Improve error
 handling for image loading.

---
 app/pages/admin/events/create.vue | 34 +++----------------------------
 app/pages/admin/events/index.vue  | 17 ++--------------
 app/pages/events/[id].vue         | 30 +++++++++++++++++++++++----
 app/pages/events/index.vue        | 26 ++++++++++++++++++++++-
 4 files changed, 56 insertions(+), 51 deletions(-)

diff --git a/app/pages/admin/events/create.vue b/app/pages/admin/events/create.vue
index 4c4faf7..299517a 100644
--- a/app/pages/admin/events/create.vue
+++ b/app/pages/admin/events/create.vue
@@ -10,19 +10,13 @@
             <h1 class="text-2xl font-bold text-gray-900">
               {{ editingEvent ? 'Edit Event' : 'Create New Event' }} 
             </h1>
-            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
-              <strong>DEBUG:</strong> Create page loaded successfully!
-              <div class="text-sm mt-1">
-                Route query: {{ JSON.stringify($route.query) }}
-              </div>
-            </div>
           </div>
           <p class="text-gray-600">Fill out the form below to create or update an event</p>
         </div>
       </div>
     </div>
     
-    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <!-- Error Summary -->
       <div v-if="formErrors.length > 0" class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
         <div class="flex">
@@ -48,7 +42,7 @@
         </div>
       </div>
 
-      <form @submit.prevent="saveEvent" class="bg-white rounded-lg shadow p-6">
+      <form @submit.prevent="saveEvent">
         <!-- Basic Information -->
         <div class="mb-8">
           <h2 class="text-lg font-semibold text-gray-900 mb-4">Basic Information</h2>
@@ -348,20 +342,13 @@
 </template>
 
 <script setup>
-console.log('🚀 CREATE PAGE: SCRIPT STARTED!')
-
 definePageMeta({
   layout: 'admin'
 })
 
-console.log('🔍 CREATE PAGE: Script loading...')
-
 const route = useRoute()
 const router = useRouter()
 
-console.log('🔍 CREATE PAGE: Route object:', route)
-console.log('🔍 CREATE PAGE: Current route query:', route.query)
-
 const creating = ref(false)
 const editingEvent = ref(null)
 const showSuccessMessage = ref(false)
@@ -389,20 +376,11 @@ const eventForm = reactive({
 
 // Check if we're editing an event
 if (route.query.edit) {
-  console.log('🔍 Edit mode detected')
-  console.log('🔍 Edit ID from query:', route.query.edit)
-  console.log('🔍 Full route query:', route.query)
-  
   try {
-    console.log('🔍 Fetching event data from API...')
     const response = await $fetch(`/api/admin/events/${route.query.edit}`)
-    console.log('🔍 API response:', response)
-    
     const event = response.data
-    console.log('🔍 Event data:', event)
     
     if (event) {
-      console.log('🔍 Setting up edit form with event data')
       editingEvent.value = event
       Object.assign(eventForm, {
         title: event.title,
@@ -422,16 +400,10 @@ if (route.query.edit) {
         registrationRequired: event.registrationRequired,
         registrationDeadline: event.registrationDeadline ? new Date(event.registrationDeadline).toISOString().slice(0, 16) : ''
       })
-      console.log('🔍 Form populated with:', eventForm)
-    } else {
-      console.log('❌ No event data found in response')
     }
   } catch (error) {
-    console.error('❌ Failed to load event for editing:', error)
-    console.error('❌ Error details:', error.data)
+    console.error('Failed to load event for editing:', error)
   }
-} else {
-  console.log('🔍 Create mode - no edit ID in query')
 }
 
 // Check if we're duplicating an event
diff --git a/app/pages/admin/events/index.vue b/app/pages/admin/events/index.vue
index fd13818..de6cf39 100644
--- a/app/pages/admin/events/index.vue
+++ b/app/pages/admin/events/index.vue
@@ -317,20 +317,7 @@ const handleImageError = (event) => {
   }
 }
 
-const editEvent = async (event) => {
-  console.log('🔍 Edit button clicked for event:', event)
-  console.log('🔍 Event ID:', event._id)
-  console.log('🔍 Event ID as string:', String(event._id))
-  const editUrl = `/admin/events/create?edit=${String(event._id)}`
-  console.log('🔍 Generated URL:', editUrl)
-  
-  try {
-    console.log('🔍 Waiting 2 seconds before navigation...')
-    await new Promise(resolve => setTimeout(resolve, 2000))
-    console.log('🔍 Now navigating with window.location...')
-    window.location.href = editUrl
-  } catch (error) {
-    console.error('❌ Navigation failed:', error)
-  }
+const editEvent = (event) => {
+  navigateTo(`/admin/events/create?edit=${String(event._id)}`)
 }
 </script>
\ No newline at end of file
diff --git a/app/pages/events/[id].vue b/app/pages/events/[id].vue
index 6b90e6a..ee3d3b7 100644
--- a/app/pages/events/[id].vue
+++ b/app/pages/events/[id].vue
@@ -21,13 +21,12 @@
     <!-- Feature Image Header -->
     <div v-if="event.featureImage && (event.featureImage.publicId || event.featureImage.url)" class="relative h-96 overflow-hidden">
       <img 
-        :src="event.featureImage.publicId 
-          ? getOptimizedImageUrl(event.featureImage.publicId, 'w_1200,h_400,c_fill')
-          : event.featureImage.url"
+        :src="getImageUrl(event.featureImage)"
         :alt="event.featureImage.alt || event.title"
         class="w-full h-full object-cover"
+        @error="handleImageError"
       />
-      <div class="absolute inset-0 bg-black bg-opacity-40"></div>
+      <div class="absolute inset-0" style="background-color: rgba(0, 0, 0, 0.4);"></div>
       <div class="absolute inset-0 flex items-center">
         <UContainer>
           <div class="max-w-4xl">
@@ -366,6 +365,29 @@ const getOptimizedImageUrl = (publicId, transformations) => {
   return `https://res.cloudinary.com/${config.public.cloudinaryCloudName}/image/upload/${transformations}/f_auto,q_auto/${publicId}`
 }
 
+// Get image URL with fallback logic
+const getImageUrl = (featureImage) => {
+  if (!featureImage) return ''
+  
+  // If we have a direct URL, use it as primary (since seed data uses external URLs)
+  if (featureImage.url) {
+    return featureImage.url
+  }
+  
+  // Fallback to Cloudinary if we have a publicId
+  if (featureImage.publicId) {
+    return getOptimizedImageUrl(featureImage.publicId, 'w_1200,h_400,c_fill')
+  }
+  
+  return ''
+}
+
+// Handle image loading errors
+const handleImageError = (event) => {
+  console.warn('Image failed to load:', event.target.src)
+  // Optionally hide the image container or show a placeholder
+}
+
 // Handle registration submission
 const handleRegistration = async () => {
   isRegistering.value = true
diff --git a/app/pages/events/index.vue b/app/pages/events/index.vue
index dcbd7b1..5c23b52 100644
--- a/app/pages/events/index.vue
+++ b/app/pages/events/index.vue
@@ -85,9 +85,10 @@
             <!-- Feature Image -->
             <div v-if="event.featureImage?.url" class="aspect-video w-full overflow-hidden">
               <img 
-                :src="getOptimizedImageUrl(event.featureImage.publicId, 'w_400,h_200,c_fill')"
+                :src="getImageUrl(event.featureImage)"
                 :alt="event.featureImage.alt || event.title"
                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                @error="handleImageError"
               />
             </div>
             
@@ -325,6 +326,29 @@ const getOptimizedImageUrl = (publicId, transformations) => {
   return `https://res.cloudinary.com/${config.public.cloudinaryCloudName}/image/upload/${transformations}/f_auto,q_auto/${publicId}`
 }
 
+// Get image URL with fallback logic
+const getImageUrl = (featureImage) => {
+  if (!featureImage) return ''
+  
+  // If we have a direct URL, use it as primary (since seed data uses external URLs)
+  if (featureImage.url) {
+    return featureImage.url
+  }
+  
+  // Fallback to Cloudinary if we have a publicId
+  if (featureImage.publicId) {
+    return getOptimizedImageUrl(featureImage.publicId, 'w_400,h_200,c_fill')
+  }
+  
+  return ''
+}
+
+// Handle image loading errors
+const handleImageError = (event) => {
+  console.warn('Image failed to load:', event.target.src)
+  // Optionally hide the image container or show a placeholder
+}
+
 // Handle calendar event click
 const onEventClick = (event) => {
   if (event.id) {