mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-24 05:11:13 -05:00
Approve database migration
This commit is contained in:
gpt-engineer-app[bot]
60
src/components/moderation/TimelineEventPreview.tsx
Normal file
60
src/components/moderation/TimelineEventPreview.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Calendar, Tag } from 'lucide-react';
|
||||
import type { TimelineSubmissionData } from '@/types/timeline';
|
||||
|
||||
interface TimelineEventPreviewProps {
|
||||
data: TimelineSubmissionData;
|
||||
}
|
||||
|
||||
export function TimelineEventPreview({ data }: TimelineEventPreviewProps) {
|
||||
const formatEventType = (type: string) => {
|
||||
return type.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase());
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Tag className="h-4 w-4" />
|
||||
Timeline Event: {data.title}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="font-medium">Event Type:</span>
|
||||
<p className="text-muted-foreground">
|
||||
{formatEventType(data.event_type)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">Date:</span>
|
||||
<p className="text-muted-foreground flex items-center gap-1">
|
||||
<Calendar className="h-3 w-3" />
|
||||
{new Date(data.event_date).toLocaleDateString()}
|
||||
({data.event_date_precision})
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(data.from_value || data.to_value) && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="font-medium">Change:</span>
|
||||
<span className="text-muted-foreground">
|
||||
{data.from_value || '—'} → {data.to_value || '—'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.description && (
|
||||
<div>
|
||||
<span className="font-medium text-sm">Description:</span>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
{data.description}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
92
src/components/timeline/EntityTimelineManager.tsx
Normal file
92
src/components/timeline/EntityTimelineManager.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
import { useState } from 'react';
|
||||
import { Plus } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { TimelineEventEditorDialog } from './TimelineEventEditorDialog';
|
||||
import { EntityHistoryTimeline } from '@/components/history/EntityHistoryTimeline';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
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);
|
||||
|
||||
// Fetch timeline events
|
||||
const { data: events, refetch } = useQuery({
|
||||
queryKey: ['timeline-events', 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[];
|
||||
},
|
||||
});
|
||||
|
||||
// Convert to HistoryEvent format for display
|
||||
const historyEvents = events?.map((event) => {
|
||||
// Map timeline event types to history event types
|
||||
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,
|
||||
};
|
||||
}) || [];
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>Timeline & History</CardTitle>
|
||||
<CardDescription>
|
||||
Historical events and milestones for {entityName}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button onClick={() => setIsDialogOpen(true)} size="sm">
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Add Event
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<EntityHistoryTimeline events={historyEvents} entityName={entityName} />
|
||||
</CardContent>
|
||||
|
||||
<TimelineEventEditorDialog
|
||||
open={isDialogOpen}
|
||||
onOpenChange={setIsDialogOpen}
|
||||
entityType={entityType}
|
||||
entityId={entityId}
|
||||
entityName={entityName}
|
||||
onSuccess={() => refetch()}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
386
src/components/timeline/TimelineEventEditorDialog.tsx
Normal file
386
src/components/timeline/TimelineEventEditorDialog.tsx
Normal file
@@ -0,0 +1,386 @@
|
||||
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 {
|
||||
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 { Switch } from '@/components/ui/switch';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import { submitTimelineEvent, submitTimelineEventUpdate } from '@/lib/entitySubmissionHelpers';
|
||||
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',
|
||||
'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?: any;
|
||||
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 isEditing = !!existingEvent;
|
||||
|
||||
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 || '',
|
||||
is_public: existingEvent.is_public,
|
||||
} : {
|
||||
event_type: 'milestone',
|
||||
event_date: new Date(),
|
||||
event_date_precision: 'day',
|
||||
title: '',
|
||||
description: '',
|
||||
is_public: true,
|
||||
},
|
||||
});
|
||||
|
||||
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) {
|
||||
console.error('Failed to submit timeline event:', error);
|
||||
toast({
|
||||
title: 'Submission failed',
|
||||
description: error instanceof Error ? error.message : 'Failed to submit timeline event',
|
||||
variant: 'destructive',
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(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>
|
||||
{isEditing ? 'Edit' : 'Add'} Timeline Event
|
||||
</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="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>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="is_public"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
|
||||
<div className="space-y-0.5">
|
||||
<FormLabel className="text-base">Public Event</FormLabel>
|
||||
<FormDescription>
|
||||
Make this event visible to all users
|
||||
</FormDescription>
|
||||
</div>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<DialogFooter>
|
||||
<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" />}
|
||||
{isEditing ? 'Submit Update' : 'Submit for Review'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
9
src/components/timeline/index.ts
Normal file
9
src/components/timeline/index.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* 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';
|
||||
Reference in New Issue
Block a user