feat: add featured event with automatic fallback
- Add featured_event_id to site_settings (schema + migration) - Backend: featured event logic in /events/next/upcoming with auto-unset when event ends - Site settings: PUT supports featuredEventId, add PUT /featured-event for admin - Admin events: Set as featured checkbox in editor, star toggle in list, featured badge - Admin settings: Featured Event section with current event and remove/change links - API: siteSettingsApi.setFeaturedEvent(), Event.isFeatured, SiteSettings.featuredEventId - Homepage/linktree unchanged: still use getNextUpcoming (now returns featured or fallback)
This commit is contained in:
Michilis
@@ -1,8 +1,9 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useLanguage } from '@/context/LanguageContext';
|
||||
import { siteSettingsApi, SiteSettings, TimezoneOption } from '@/lib/api';
|
||||
import { siteSettingsApi, eventsApi, SiteSettings, TimezoneOption, Event } from '@/lib/api';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Input from '@/components/ui/Input';
|
||||
@@ -13,6 +14,7 @@ import {
|
||||
EnvelopeIcon,
|
||||
WrenchScrewdriverIcon,
|
||||
CheckCircleIcon,
|
||||
StarIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
@@ -21,6 +23,8 @@ export default function AdminSettingsPage() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [timezones, setTimezones] = useState<TimezoneOption[]>([]);
|
||||
const [featuredEvent, setFeaturedEvent] = useState<Event | null>(null);
|
||||
const [clearingFeatured, setClearingFeatured] = useState(false);
|
||||
|
||||
const [settings, setSettings] = useState<SiteSettings>({
|
||||
timezone: 'America/Asuncion',
|
||||
@@ -33,6 +37,7 @@ export default function AdminSettingsPage() {
|
||||
instagramUrl: null,
|
||||
twitterUrl: null,
|
||||
linkedinUrl: null,
|
||||
featuredEventId: null,
|
||||
maintenanceMode: false,
|
||||
maintenanceMessage: null,
|
||||
maintenanceMessageEs: null,
|
||||
@@ -50,6 +55,17 @@ export default function AdminSettingsPage() {
|
||||
]);
|
||||
setSettings(settingsRes.settings);
|
||||
setTimezones(timezonesRes.timezones);
|
||||
|
||||
// Load featured event details if one is set
|
||||
if (settingsRes.settings.featuredEventId) {
|
||||
try {
|
||||
const { event } = await eventsApi.getById(settingsRes.settings.featuredEventId);
|
||||
setFeaturedEvent(event);
|
||||
} catch {
|
||||
// Featured event may no longer exist
|
||||
setFeaturedEvent(null);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error('Failed to load settings');
|
||||
} finally {
|
||||
@@ -57,6 +73,20 @@ export default function AdminSettingsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearFeatured = async () => {
|
||||
setClearingFeatured(true);
|
||||
try {
|
||||
await siteSettingsApi.setFeaturedEvent(null);
|
||||
setSettings(prev => ({ ...prev, featuredEventId: null }));
|
||||
setFeaturedEvent(null);
|
||||
toast.success(locale === 'es' ? 'Evento destacado eliminado' : 'Featured event removed');
|
||||
} catch (error: any) {
|
||||
toast.error(error.message || 'Failed to clear featured event');
|
||||
} finally {
|
||||
setClearingFeatured(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
try {
|
||||
@@ -146,6 +176,93 @@ export default function AdminSettingsPage() {
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Featured Event */}
|
||||
<Card>
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center">
|
||||
<StarIcon className="w-5 h-5 text-amber-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg">
|
||||
{locale === 'es' ? 'Evento Destacado' : 'Featured Event'}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
{locale === 'es'
|
||||
? 'El evento destacado aparece en la página de inicio y linktree'
|
||||
: 'The featured event is displayed on the homepage and linktree'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{featuredEvent ? (
|
||||
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
{featuredEvent.bannerUrl && (
|
||||
<img
|
||||
src={featuredEvent.bannerUrl}
|
||||
alt={featuredEvent.title}
|
||||
className="w-16 h-16 rounded-lg object-cover"
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<p className="font-medium text-amber-900">{featuredEvent.title}</p>
|
||||
<p className="text-sm text-amber-700">
|
||||
{new Date(featuredEvent.startDatetime).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})}
|
||||
</p>
|
||||
<p className="text-xs text-amber-600 mt-1">
|
||||
{locale === 'es' ? 'Estado:' : 'Status:'} {featuredEvent.status}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Link
|
||||
href="/admin/events"
|
||||
className="text-sm text-amber-700 hover:text-amber-900 underline"
|
||||
>
|
||||
{locale === 'es' ? 'Cambiar' : 'Change'}
|
||||
</Link>
|
||||
<button
|
||||
onClick={handleClearFeatured}
|
||||
disabled={clearingFeatured}
|
||||
className="text-sm text-red-600 hover:text-red-800 underline disabled:opacity-50"
|
||||
>
|
||||
{clearingFeatured
|
||||
? (locale === 'es' ? 'Eliminando...' : 'Removing...')
|
||||
: (locale === 'es' ? 'Eliminar' : 'Remove')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
|
||||
<p className="text-gray-600 mb-3">
|
||||
{locale === 'es'
|
||||
? 'No hay evento destacado. El próximo evento publicado se mostrará automáticamente.'
|
||||
: 'No featured event set. The next upcoming published event will be shown automatically.'}
|
||||
</p>
|
||||
<Link
|
||||
href="/admin/events"
|
||||
className="text-sm text-primary-yellow hover:underline font-medium"
|
||||
>
|
||||
{locale === 'es' ? 'Ir a Eventos para destacar uno' : 'Go to Events to feature one'}
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-xs text-gray-400 mt-3">
|
||||
{locale === 'es'
|
||||
? 'Cuando el evento destacado termine o se despublique, el sistema mostrará automáticamente el próximo evento.'
|
||||
: 'When the featured event ends or is unpublished, the system will automatically show the next upcoming event.'}
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Site Information */}
|
||||
<Card>
|
||||
<div className="p-6">
|
||||
|
||||
Reference in New Issue
Block a user