mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-24 06:11:12 -05:00
Refactor code structure and remove redundant changes
This commit is contained in:
pacnpal
227
src-old/components/timeline/EntityTimelineManager.tsx
Normal file
227
src-old/components/timeline/EntityTimelineManager.tsx
Normal file
@@ -0,0 +1,227 @@
|
||||
import { useState } from 'react';
|
||||
import { Plus, Clock, CheckCircle } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { TimelineEventEditorDialog } from './TimelineEventEditorDialog';
|
||||
import { TimelineEventCard } from './TimelineEventCard';
|
||||
import { EntityHistoryTimeline } from '@/components/history/EntityHistoryTimeline';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { supabase } from '@/lib/supabaseClient';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { toast } from 'sonner';
|
||||
import { getErrorMessage, handleError } from '@/lib/errorHandler';
|
||||
import { logger } from '@/lib/logger';
|
||||
import { deleteTimelineEvent } from '@/lib/entitySubmissionHelpers';
|
||||
import type { EntityType, TimelineEvent } from '@/types/timeline';
|
||||
|
||||
interface EntityTimelineManagerProps {
|
||||
entityType: EntityType;
|
||||
entityId: string;
|
||||
entityName: string;
|
||||
}
|
||||
|
||||
export function EntityTimelineManager({
|
||||
entityType,
|
||||
entityId,
|
||||
entityName,
|
||||
}: EntityTimelineManagerProps) {
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
const [editingEvent, setEditingEvent] = useState<TimelineEvent | null>(null);
|
||||
const [showPending, setShowPending] = useState(true);
|
||||
const { user } = useAuth();
|
||||
|
||||
// Fetch approved timeline events
|
||||
const { data: approvedEvents, refetch: refetchApproved } = useQuery({
|
||||
queryKey: ['timeline-events', 'approved', entityType, entityId],
|
||||
queryFn: async () => {
|
||||
const { data, error } = await supabase
|
||||
.from('entity_timeline_events')
|
||||
.select('*')
|
||||
.eq('entity_type', entityType)
|
||||
.eq('entity_id', entityId)
|
||||
.eq('is_public', true)
|
||||
.not('approved_by', 'is', null)
|
||||
.order('event_date', { ascending: false });
|
||||
|
||||
if (error) throw error;
|
||||
return data as TimelineEvent[];
|
||||
},
|
||||
});
|
||||
|
||||
// Fetch user's pending timeline events
|
||||
const { data: pendingEvents, refetch: refetchPending } = useQuery({
|
||||
queryKey: ['timeline-events', 'pending', entityType, entityId, user?.id],
|
||||
queryFn: async () => {
|
||||
if (!user) return [];
|
||||
|
||||
const { data, error } = await supabase
|
||||
.from('entity_timeline_events')
|
||||
.select('*')
|
||||
.eq('entity_type', entityType)
|
||||
.eq('entity_id', entityId)
|
||||
.eq('created_by', user.id)
|
||||
.is('approved_by', null)
|
||||
.order('created_at', { ascending: false });
|
||||
|
||||
if (error) throw error;
|
||||
return data as TimelineEvent[];
|
||||
},
|
||||
enabled: !!user,
|
||||
});
|
||||
|
||||
// Refetch both queries
|
||||
const refetchAll = () => {
|
||||
refetchApproved();
|
||||
refetchPending();
|
||||
};
|
||||
|
||||
// Convert approved events to HistoryEvent format for EntityHistoryTimeline
|
||||
const historyEvents = approvedEvents?.map((event) => {
|
||||
let mappedType: 'name_change' | 'status_change' | 'ownership_change' | 'relocation' | 'milestone' = 'milestone';
|
||||
|
||||
if (event.event_type === 'name_change') mappedType = 'name_change';
|
||||
else if (event.event_type === 'status_change') mappedType = 'status_change';
|
||||
else if (event.event_type === 'operator_change' || event.event_type === 'owner_change') mappedType = 'ownership_change';
|
||||
else if (event.event_type === 'location_change') mappedType = 'relocation';
|
||||
|
||||
return {
|
||||
date: event.event_date,
|
||||
title: event.title,
|
||||
description: event.description,
|
||||
type: mappedType,
|
||||
from: event.from_value,
|
||||
to: event.to_value,
|
||||
};
|
||||
}) || [];
|
||||
|
||||
// Handle edit
|
||||
const handleEdit = (event: TimelineEvent) => {
|
||||
setEditingEvent(event);
|
||||
setIsDialogOpen(true);
|
||||
};
|
||||
|
||||
// Convert TimelineEvent to the format expected by the dialog
|
||||
const editingEventForDialog = editingEvent ? {
|
||||
...editingEvent,
|
||||
event_date: new Date(editingEvent.event_date),
|
||||
id: editingEvent.id,
|
||||
approved_by: editingEvent.approved_by || null,
|
||||
} : undefined;
|
||||
|
||||
// Handle delete
|
||||
const handleDelete = async (eventId: string) => {
|
||||
if (!user) {
|
||||
toast.error('Authentication required', {
|
||||
description: 'Please sign in to delete timeline events.'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await deleteTimelineEvent(eventId, user.id);
|
||||
refetchAll();
|
||||
toast.success('Event deleted', {
|
||||
description: 'Your timeline event has been deleted successfully.'
|
||||
});
|
||||
} catch (error: unknown) {
|
||||
handleError(error, {
|
||||
action: 'Delete Timeline Event',
|
||||
userId: user?.id,
|
||||
metadata: { eventId }
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Handle dialog close
|
||||
const handleDialogChange = (open: boolean) => {
|
||||
setIsDialogOpen(open);
|
||||
if (!open) {
|
||||
setEditingEvent(null);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle success
|
||||
const handleSuccess = () => {
|
||||
refetchAll();
|
||||
setEditingEvent(null);
|
||||
setIsDialogOpen(false);
|
||||
};
|
||||
|
||||
const hasPendingEvents = pendingEvents && pendingEvents.length > 0;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header with Add Event button */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{user && hasPendingEvents && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setShowPending(!showPending)}
|
||||
>
|
||||
<Clock className="mr-2 h-4 w-4" />
|
||||
Pending ({pendingEvents.length})
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{user && (
|
||||
<Button onClick={() => setIsDialogOpen(true)} size="sm">
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Add Event
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pending Events Section */}
|
||||
{user && hasPendingEvents && showPending && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="w-5 h-5 text-yellow-500" />
|
||||
<h3 className="text-lg font-semibold">Pending Submissions</h3>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{pendingEvents.map((event) => (
|
||||
<TimelineEventCard
|
||||
key={event.id}
|
||||
event={event}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
canEdit={true}
|
||||
canDelete={true}
|
||||
isPending={true}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Separator className="my-6" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Approved Timeline Events */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-500" />
|
||||
<h3 className="text-lg font-semibold">Timeline History</h3>
|
||||
</div>
|
||||
{historyEvents.length > 0 ? (
|
||||
<EntityHistoryTimeline events={historyEvents} entityName={entityName} />
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground py-8 text-center">
|
||||
No timeline events yet. Be the first to add one!
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Editor Dialog */}
|
||||
<TimelineEventEditorDialog
|
||||
open={isDialogOpen}
|
||||
onOpenChange={handleDialogChange}
|
||||
entityType={entityType}
|
||||
entityId={entityId}
|
||||
entityName={entityName}
|
||||
existingEvent={editingEventForDialog}
|
||||
onSuccess={handleSuccess}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
120
src-old/components/timeline/TimelineEventCard.tsx
Normal file
120
src-old/components/timeline/TimelineEventCard.tsx
Normal file
@@ -0,0 +1,120 @@
|
||||
import { Edit, Trash, Clock, CheckCircle } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { format } from 'date-fns';
|
||||
import { parseDateForDisplay } from '@/lib/dateUtils';
|
||||
import type { TimelineEvent } from '@/types/timeline';
|
||||
|
||||
interface TimelineEventCardProps {
|
||||
event: TimelineEvent;
|
||||
onEdit?: (event: TimelineEvent) => void;
|
||||
onDelete?: (eventId: string) => void;
|
||||
canEdit: boolean;
|
||||
canDelete: boolean;
|
||||
isPending?: boolean;
|
||||
}
|
||||
|
||||
// ⚠️ IMPORTANT: Use parseDateForDisplay to prevent timezone shifts
|
||||
// YYYY-MM-DD strings must be interpreted as local dates, not UTC
|
||||
const formatEventDate = (date: string, precision: string = 'day') => {
|
||||
const dateObj = parseDateForDisplay(date);
|
||||
|
||||
switch (precision) {
|
||||
case 'year':
|
||||
return format(dateObj, 'yyyy');
|
||||
case 'month':
|
||||
return format(dateObj, 'MMMM yyyy');
|
||||
case 'day':
|
||||
default:
|
||||
return format(dateObj, 'MMMM d, yyyy');
|
||||
}
|
||||
};
|
||||
|
||||
const getEventTypeLabel = (type: string): string => {
|
||||
return type.split('_').map(word =>
|
||||
word.charAt(0).toUpperCase() + word.slice(1)
|
||||
).join(' ');
|
||||
};
|
||||
|
||||
export function TimelineEventCard({
|
||||
event,
|
||||
onEdit,
|
||||
onDelete,
|
||||
canEdit,
|
||||
canDelete,
|
||||
isPending = false
|
||||
}: TimelineEventCardProps) {
|
||||
return (
|
||||
<Card className={isPending ? 'border-yellow-500/50 bg-yellow-500/5' : ''}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex justify-between items-start gap-4">
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Badge variant={isPending ? 'secondary' : 'default'}>
|
||||
{getEventTypeLabel(event.event_type)}
|
||||
</Badge>
|
||||
{isPending && (
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
Pending Approval
|
||||
</Badge>
|
||||
)}
|
||||
{!isPending && (
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
Approved
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold text-lg">{event.title}</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{formatEventDate(event.event_date, event.event_date_precision)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{event.description && (
|
||||
<p className="text-sm">{event.description}</p>
|
||||
)}
|
||||
|
||||
{(event.from_value || event.to_value) && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{event.from_value && <span>From: {event.from_value}</span>}
|
||||
{event.from_value && event.to_value && <span className="mx-2">→</span>}
|
||||
{event.to_value && <span>To: {event.to_value}</span>}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(canEdit || canDelete) && (
|
||||
<div className="flex gap-2">
|
||||
{canEdit && (
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={() => onEdit?.(event)}
|
||||
title="Edit event"
|
||||
>
|
||||
<Edit className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
{canDelete && (
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={() => onDelete?.(event.id)}
|
||||
title="Delete event"
|
||||
className="text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
438
src-old/components/timeline/TimelineEventEditorDialog.tsx
Normal file
438
src-old/components/timeline/TimelineEventEditorDialog.tsx
Normal file
@@ -0,0 +1,438 @@
|
||||
import { useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { DatePicker } from '@/components/ui/date-picker';
|
||||
|
||||
import { Loader2, Trash } from 'lucide-react';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { submitTimelineEvent, submitTimelineEventUpdate, deleteTimelineEvent } from '@/lib/entitySubmissionHelpers';
|
||||
import { handleError } from '@/lib/errorHandler';
|
||||
import type {
|
||||
EntityType,
|
||||
TimelineEventFormData,
|
||||
} from '@/types/timeline';
|
||||
|
||||
// Validation schema
|
||||
const timelineEventSchema = z.object({
|
||||
event_type: z.enum([
|
||||
'name_change',
|
||||
'operator_change',
|
||||
'owner_change',
|
||||
'location_change',
|
||||
'status_change',
|
||||
'opening',
|
||||
'closure',
|
||||
'reopening',
|
||||
'renovation',
|
||||
'expansion',
|
||||
'acquisition',
|
||||
'milestone',
|
||||
'other',
|
||||
]),
|
||||
event_date: z.date({
|
||||
message: 'Event date is required',
|
||||
}),
|
||||
event_date_precision: z.enum(['day', 'month', 'year']).default('day'),
|
||||
title: z.string().min(1, 'Title is required').max(200, 'Title is too long'),
|
||||
description: z.string().max(1000, 'Description is too long').optional(),
|
||||
|
||||
// Conditional fields
|
||||
from_value: z.string().max(200).optional(),
|
||||
to_value: z.string().max(200).optional(),
|
||||
from_entity_id: z.string().uuid().optional(),
|
||||
to_entity_id: z.string().uuid().optional(),
|
||||
from_location_id: z.string().uuid().optional(),
|
||||
to_location_id: z.string().uuid().optional(),
|
||||
|
||||
is_public: z.boolean().default(true),
|
||||
});
|
||||
|
||||
interface TimelineEventEditorDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
entityType: EntityType;
|
||||
entityId: string;
|
||||
entityName: string;
|
||||
existingEvent?: TimelineEventFormData & { id: string; approved_by?: string | null };
|
||||
onSuccess?: () => void;
|
||||
}
|
||||
|
||||
export function TimelineEventEditorDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
entityType,
|
||||
entityId,
|
||||
entityName,
|
||||
existingEvent,
|
||||
onSuccess,
|
||||
}: TimelineEventEditorDialogProps) {
|
||||
const { user } = useAuth();
|
||||
const { toast } = useToast();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
|
||||
const isEditing = !!existingEvent;
|
||||
const dialogTitle = isEditing ? 'Edit Timeline Event' : 'Add Timeline Event';
|
||||
const submitButtonText = isEditing ? 'Update Event' : 'Submit for Review';
|
||||
|
||||
const form = useForm<TimelineEventFormData>({
|
||||
resolver: zodResolver(timelineEventSchema),
|
||||
defaultValues: existingEvent ? {
|
||||
event_type: existingEvent.event_type,
|
||||
event_date: new Date(existingEvent.event_date),
|
||||
event_date_precision: existingEvent.event_date_precision,
|
||||
title: existingEvent.title,
|
||||
description: existingEvent.description || '',
|
||||
from_value: existingEvent.from_value || '',
|
||||
to_value: existingEvent.to_value || '',
|
||||
from_entity_id: existingEvent.from_entity_id || '',
|
||||
to_entity_id: existingEvent.to_entity_id || '',
|
||||
from_location_id: existingEvent.from_location_id || '',
|
||||
to_location_id: existingEvent.to_location_id || '',
|
||||
} : {
|
||||
event_type: 'milestone',
|
||||
event_date: new Date(),
|
||||
event_date_precision: 'day',
|
||||
title: '',
|
||||
description: '',
|
||||
},
|
||||
});
|
||||
|
||||
const selectedEventType = form.watch('event_type');
|
||||
|
||||
const onSubmit = async (data: TimelineEventFormData) => {
|
||||
if (!user) {
|
||||
toast({
|
||||
title: 'Authentication required',
|
||||
description: 'You must be logged in to submit timeline events.',
|
||||
variant: 'destructive',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
if (isEditing) {
|
||||
await submitTimelineEventUpdate(existingEvent.id, data, user.id);
|
||||
toast({
|
||||
title: 'Timeline event update submitted',
|
||||
description: 'Your update has been submitted for moderator review.',
|
||||
});
|
||||
} else {
|
||||
await submitTimelineEvent(entityType, entityId, data, user.id);
|
||||
toast({
|
||||
title: 'Timeline event submitted',
|
||||
description: 'Your timeline event has been submitted for moderator review.',
|
||||
});
|
||||
}
|
||||
|
||||
form.reset();
|
||||
onOpenChange(false);
|
||||
onSuccess?.();
|
||||
} catch (error: unknown) {
|
||||
handleError(error, {
|
||||
action: isEditing ? 'Update Timeline Event' : 'Submit Timeline Event',
|
||||
userId: user?.id,
|
||||
metadata: { entityType, entityId }
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!existingEvent || !user) return;
|
||||
|
||||
setIsDeleting(true);
|
||||
try {
|
||||
await deleteTimelineEvent(existingEvent.id, user.id);
|
||||
toast({
|
||||
title: 'Event deleted',
|
||||
description: 'Your timeline event has been deleted successfully.',
|
||||
});
|
||||
onSuccess?.();
|
||||
onOpenChange(false);
|
||||
setShowDeleteConfirm(false);
|
||||
form.reset();
|
||||
} catch (error: unknown) {
|
||||
handleError(error, {
|
||||
action: 'Delete Timeline Event',
|
||||
userId: user?.id,
|
||||
metadata: { eventId: existingEvent?.id }
|
||||
});
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Event type configurations for conditional field rendering
|
||||
const showFromTo = [
|
||||
'name_change',
|
||||
'operator_change',
|
||||
'owner_change',
|
||||
'status_change',
|
||||
].includes(selectedEventType);
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{dialogTitle}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Add a historical milestone or event for {entityName}.
|
||||
All submissions go through moderator review.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="event_type"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Event Type</FormLabel>
|
||||
<Select
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select event type" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="name_change">Name Change</SelectItem>
|
||||
<SelectItem value="operator_change">Operator Change</SelectItem>
|
||||
<SelectItem value="owner_change">Ownership Change</SelectItem>
|
||||
<SelectItem value="location_change">Relocation</SelectItem>
|
||||
<SelectItem value="status_change">Status Change</SelectItem>
|
||||
<SelectItem value="opening">Opening</SelectItem>
|
||||
<SelectItem value="closure">Closure</SelectItem>
|
||||
<SelectItem value="reopening">Reopening</SelectItem>
|
||||
<SelectItem value="renovation">Renovation</SelectItem>
|
||||
<SelectItem value="expansion">Expansion</SelectItem>
|
||||
<SelectItem value="acquisition">Acquisition</SelectItem>
|
||||
<SelectItem value="milestone">Milestone</SelectItem>
|
||||
<SelectItem value="other">Other</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Event Title</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="e.g., Renamed to Six Flags"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
A brief, descriptive title for this event
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="event_date"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Event Date</FormLabel>
|
||||
<DatePicker
|
||||
date={field.value}
|
||||
onSelect={field.onChange}
|
||||
fromYear={1800}
|
||||
toYear={new Date().getFullYear() + 10}
|
||||
/>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="event_date_precision"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Date Precision</FormLabel>
|
||||
<Select
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="day">Exact Day</SelectItem>
|
||||
<SelectItem value="month">Month Only</SelectItem>
|
||||
<SelectItem value="year">Year Only</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{showFromTo && (
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="from_value"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>From</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Previous value" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="to_value"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>To</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="New value" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="description"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Description (Optional)</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder="Additional context about this event..."
|
||||
rows={4}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Provide additional details, context, or sources
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<DialogFooter className="gap-3 sm:gap-0">
|
||||
{isEditing && existingEvent?.approved_by === null && (
|
||||
<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
disabled={isSubmitting}
|
||||
className="sm:mr-auto"
|
||||
>
|
||||
<Trash className="w-4 h-4 mr-2" />
|
||||
Delete Event
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete Timeline Event?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This will permanently delete this timeline event. This action cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={handleDelete}
|
||||
disabled={isDeleting}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
{isDeleting ? "Deleting..." : "Delete"}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
)}
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
{submitButtonText}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
10
src-old/components/timeline/index.ts
Normal file
10
src-old/components/timeline/index.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* Timeline Components
|
||||
*
|
||||
* Components for managing entity timeline/historical milestones.
|
||||
* All timeline events flow through the moderation queue.
|
||||
*/
|
||||
|
||||
export { TimelineEventEditorDialog } from './TimelineEventEditorDialog';
|
||||
export { EntityTimelineManager } from './EntityTimelineManager';
|
||||
export { TimelineEventCard } from './TimelineEventCard';
|
||||
Reference in New Issue
Block a user