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.
This commit is contained in:
parent
e4a0a9ab0f
commit
c3a29fa47c
4 changed files with 56 additions and 51 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue