mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 14:11:13 -05:00
Approve timeline integration plan
This commit is contained in:
@@ -1,14 +1,14 @@
|
|||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
import { EntityHistoryTimeline, HistoryEvent } from './EntityHistoryTimeline';
|
import { EntityTimelineManager } from '@/components/timeline/EntityTimelineManager';
|
||||||
import { EntityVersionHistory } from '@/components/versioning/EntityVersionHistory';
|
import { EntityVersionHistory } from '@/components/versioning/EntityVersionHistory';
|
||||||
import { FormerNamesSection } from './FormerNamesSection';
|
import { FormerNamesSection } from './FormerNamesSection';
|
||||||
import { RideNameHistory } from '@/types/database';
|
import { RideNameHistory } from '@/types/database';
|
||||||
|
import type { EntityType } from '@/types/timeline';
|
||||||
|
|
||||||
interface EntityHistoryTabsProps {
|
interface EntityHistoryTabsProps {
|
||||||
entityType: 'park' | 'ride' | 'company';
|
entityType: EntityType;
|
||||||
entityId: string;
|
entityId: string;
|
||||||
entityName: string;
|
entityName: string;
|
||||||
events: HistoryEvent[];
|
|
||||||
formerNames?: RideNameHistory[];
|
formerNames?: RideNameHistory[];
|
||||||
currentName?: string;
|
currentName?: string;
|
||||||
}
|
}
|
||||||
@@ -43,7 +43,6 @@ export function EntityHistoryTabs({
|
|||||||
entityType,
|
entityType,
|
||||||
entityId,
|
entityId,
|
||||||
entityName,
|
entityName,
|
||||||
events,
|
|
||||||
formerNames,
|
formerNames,
|
||||||
currentName,
|
currentName,
|
||||||
}: EntityHistoryTabsProps) {
|
}: EntityHistoryTabsProps) {
|
||||||
@@ -66,7 +65,12 @@ export function EntityHistoryTabs({
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<EntityHistoryTimeline events={events} entityName={entityName} />
|
{/* Dynamic Timeline Manager with Edit/Delete */}
|
||||||
|
<EntityTimelineManager
|
||||||
|
entityType={entityType}
|
||||||
|
entityId={entityId}
|
||||||
|
entityName={entityName}
|
||||||
|
/>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="version-history" className="mt-6">
|
<TabsContent value="version-history" className="mt-6">
|
||||||
|
|||||||
@@ -1,11 +1,15 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Plus } from 'lucide-react';
|
import { Plus, Clock, CheckCircle } from 'lucide-react';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Separator } from '@/components/ui/separator';
|
||||||
import { TimelineEventEditorDialog } from './TimelineEventEditorDialog';
|
import { TimelineEventEditorDialog } from './TimelineEventEditorDialog';
|
||||||
|
import { TimelineEventCard } from './TimelineEventCard';
|
||||||
import { EntityHistoryTimeline } from '@/components/history/EntityHistoryTimeline';
|
import { EntityHistoryTimeline } from '@/components/history/EntityHistoryTimeline';
|
||||||
import { useQuery } from '@tanstack/react-query';
|
import { useQuery } from '@tanstack/react-query';
|
||||||
import { supabase } from '@/integrations/supabase/client';
|
import { supabase } from '@/integrations/supabase/client';
|
||||||
|
import { useAuth } from '@/hooks/useAuth';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import { deleteTimelineEvent } from '@/lib/entitySubmissionHelpers';
|
||||||
import type { EntityType, TimelineEvent } from '@/types/timeline';
|
import type { EntityType, TimelineEvent } from '@/types/timeline';
|
||||||
|
|
||||||
interface EntityTimelineManagerProps {
|
interface EntityTimelineManagerProps {
|
||||||
@@ -20,10 +24,13 @@ export function EntityTimelineManager({
|
|||||||
entityName,
|
entityName,
|
||||||
}: EntityTimelineManagerProps) {
|
}: EntityTimelineManagerProps) {
|
||||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||||
|
const [editingEvent, setEditingEvent] = useState<TimelineEvent | null>(null);
|
||||||
|
const [showPending, setShowPending] = useState(true);
|
||||||
|
const { user } = useAuth();
|
||||||
|
|
||||||
// Fetch timeline events
|
// Fetch approved timeline events
|
||||||
const { data: events, refetch } = useQuery({
|
const { data: approvedEvents, refetch: refetchApproved } = useQuery({
|
||||||
queryKey: ['timeline-events', entityType, entityId],
|
queryKey: ['timeline-events', 'approved', entityType, entityId],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
const { data, error } = await supabase
|
const { data, error } = await supabase
|
||||||
.from('entity_timeline_events')
|
.from('entity_timeline_events')
|
||||||
@@ -39,9 +46,35 @@ export function EntityTimelineManager({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Convert to HistoryEvent format for display
|
// Fetch user's pending timeline events
|
||||||
const historyEvents = events?.map((event) => {
|
const { data: pendingEvents, refetch: refetchPending } = useQuery({
|
||||||
// Map timeline event types to history event types
|
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';
|
let mappedType: 'name_change' | 'status_change' | 'ownership_change' | 'relocation' | 'milestone' = 'milestone';
|
||||||
|
|
||||||
if (event.event_type === 'name_change') mappedType = 'name_change';
|
if (event.event_type === 'name_change') mappedType = 'name_change';
|
||||||
@@ -59,34 +92,125 @@ export function EntityTimelineManager({
|
|||||||
};
|
};
|
||||||
}) || [];
|
}) || [];
|
||||||
|
|
||||||
|
// Handle edit
|
||||||
|
const handleEdit = (event: TimelineEvent) => {
|
||||||
|
setEditingEvent(event);
|
||||||
|
setIsDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 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: any) {
|
||||||
|
console.error('Delete error:', error);
|
||||||
|
toast.error('Failed to delete event', {
|
||||||
|
description: error.message || 'Please try again.'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 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 (
|
return (
|
||||||
<Card>
|
<div className="space-y-6">
|
||||||
<CardHeader>
|
{/* Header with Add Event button */}
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div>
|
<div className="flex items-center gap-3">
|
||||||
<CardTitle>Timeline & History</CardTitle>
|
{user && hasPendingEvents && (
|
||||||
<CardDescription>
|
<Button
|
||||||
Historical events and milestones for {entityName}
|
variant="outline"
|
||||||
</CardDescription>
|
size="sm"
|
||||||
|
onClick={() => setShowPending(!showPending)}
|
||||||
|
>
|
||||||
|
<Clock className="mr-2 h-4 w-4" />
|
||||||
|
Pending ({pendingEvents.length})
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
{user && (
|
||||||
<Button onClick={() => setIsDialogOpen(true)} size="sm">
|
<Button onClick={() => setIsDialogOpen(true)} size="sm">
|
||||||
<Plus className="mr-2 h-4 w-4" />
|
<Plus className="mr-2 h-4 w-4" />
|
||||||
Add Event
|
Add Event
|
||||||
</Button>
|
</Button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<EntityHistoryTimeline events={historyEvents} entityName={entityName} />
|
|
||||||
</CardContent>
|
|
||||||
|
|
||||||
|
{/* 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
|
<TimelineEventEditorDialog
|
||||||
open={isDialogOpen}
|
open={isDialogOpen}
|
||||||
onOpenChange={setIsDialogOpen}
|
onOpenChange={handleDialogChange}
|
||||||
entityType={entityType}
|
entityType={entityType}
|
||||||
entityId={entityId}
|
entityId={entityId}
|
||||||
entityName={entityName}
|
entityName={entityName}
|
||||||
onSuccess={() => refetch()}
|
existingEvent={editingEvent}
|
||||||
|
onSuccess={handleSuccess}
|
||||||
/>
|
/>
|
||||||
</Card>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
117
src/components/timeline/TimelineEventCard.tsx
Normal file
117
src/components/timeline/TimelineEventCard.tsx
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
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 type { TimelineEvent } from '@/types/timeline';
|
||||||
|
|
||||||
|
interface TimelineEventCardProps {
|
||||||
|
event: TimelineEvent;
|
||||||
|
onEdit?: (event: TimelineEvent) => void;
|
||||||
|
onDelete?: (eventId: string) => void;
|
||||||
|
canEdit: boolean;
|
||||||
|
canDelete: boolean;
|
||||||
|
isPending?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatEventDate = (date: string, precision: string = 'day') => {
|
||||||
|
const dateObj = new Date(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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -10,6 +10,17 @@ import {
|
|||||||
DialogHeader,
|
DialogHeader,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
} from '@/components/ui/dialog';
|
} from '@/components/ui/dialog';
|
||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
AlertDialogTrigger,
|
||||||
|
} from '@/components/ui/alert-dialog';
|
||||||
import {
|
import {
|
||||||
Form,
|
Form,
|
||||||
FormControl,
|
FormControl,
|
||||||
@@ -31,10 +42,10 @@ import { Textarea } from '@/components/ui/textarea';
|
|||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { DatePicker } from '@/components/ui/date-picker';
|
import { DatePicker } from '@/components/ui/date-picker';
|
||||||
import { Switch } from '@/components/ui/switch';
|
import { Switch } from '@/components/ui/switch';
|
||||||
import { Loader2 } from 'lucide-react';
|
import { Loader2, Trash } from 'lucide-react';
|
||||||
import { useAuth } from '@/hooks/useAuth';
|
import { useAuth } from '@/hooks/useAuth';
|
||||||
import { useToast } from '@/hooks/use-toast';
|
import { useToast } from '@/hooks/use-toast';
|
||||||
import { submitTimelineEvent, submitTimelineEventUpdate } from '@/lib/entitySubmissionHelpers';
|
import { submitTimelineEvent, submitTimelineEventUpdate, deleteTimelineEvent } from '@/lib/entitySubmissionHelpers';
|
||||||
import type {
|
import type {
|
||||||
EntityType,
|
EntityType,
|
||||||
TimelineEventFormData,
|
TimelineEventFormData,
|
||||||
@@ -97,8 +108,12 @@ export function TimelineEventEditorDialog({
|
|||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const { toast } = useToast();
|
const { toast } = useToast();
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
|
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||||
|
const [isDeleting, setIsDeleting] = useState(false);
|
||||||
|
|
||||||
const isEditing = !!existingEvent;
|
const isEditing = !!existingEvent;
|
||||||
|
const dialogTitle = isEditing ? 'Edit Timeline Event' : 'Add Timeline Event';
|
||||||
|
const submitButtonText = isEditing ? 'Update Event' : 'Submit for Review';
|
||||||
|
|
||||||
const form = useForm<TimelineEventFormData>({
|
const form = useForm<TimelineEventFormData>({
|
||||||
resolver: zodResolver(timelineEventSchema),
|
resolver: zodResolver(timelineEventSchema),
|
||||||
@@ -168,6 +183,32 @@ export function TimelineEventEditorDialog({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
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: any) {
|
||||||
|
console.error('Delete error:', error);
|
||||||
|
toast({
|
||||||
|
title: 'Failed to delete event',
|
||||||
|
description: error.message || 'Please try again.',
|
||||||
|
variant: 'destructive',
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setIsDeleting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// Event type configurations for conditional field rendering
|
// Event type configurations for conditional field rendering
|
||||||
const showFromTo = [
|
const showFromTo = [
|
||||||
'name_change',
|
'name_change',
|
||||||
@@ -181,7 +222,7 @@ export function TimelineEventEditorDialog({
|
|||||||
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
|
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>
|
<DialogTitle>
|
||||||
{isEditing ? 'Edit' : 'Add'} Timeline Event
|
{dialogTitle}
|
||||||
</DialogTitle>
|
</DialogTitle>
|
||||||
<DialogDescription>
|
<DialogDescription>
|
||||||
Add a historical milestone or event for {entityName}.
|
Add a historical milestone or event for {entityName}.
|
||||||
@@ -366,7 +407,40 @@ export function TimelineEventEditorDialog({
|
|||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<DialogFooter>
|
<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
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
@@ -377,7 +451,7 @@ export function TimelineEventEditorDialog({
|
|||||||
</Button>
|
</Button>
|
||||||
<Button type="submit" disabled={isSubmitting}>
|
<Button type="submit" disabled={isSubmitting}>
|
||||||
{isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
{isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||||
{isEditing ? 'Submit Update' : 'Submit for Review'}
|
{submitButtonText}
|
||||||
</Button>
|
</Button>
|
||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -7,3 +7,4 @@
|
|||||||
|
|
||||||
export { TimelineEventEditorDialog } from './TimelineEventEditorDialog';
|
export { TimelineEventEditorDialog } from './TimelineEventEditorDialog';
|
||||||
export { EntityTimelineManager } from './EntityTimelineManager';
|
export { EntityTimelineManager } from './EntityTimelineManager';
|
||||||
|
export { TimelineEventCard } from './TimelineEventCard';
|
||||||
|
|||||||
@@ -1081,3 +1081,52 @@ export async function submitTimelineEventUpdate(
|
|||||||
submissionId: submission.id,
|
submissionId: submission.id,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete a timeline event (only pending/own events)
|
||||||
|
* @param eventId - Timeline event ID
|
||||||
|
* @param userId - Current user ID
|
||||||
|
* @throws Error if event not found or cannot be deleted
|
||||||
|
*/
|
||||||
|
export async function deleteTimelineEvent(
|
||||||
|
eventId: string,
|
||||||
|
userId: string
|
||||||
|
): Promise<void> {
|
||||||
|
// First verify the event exists and user has permission
|
||||||
|
const { data: event, error: fetchError } = await supabase
|
||||||
|
.from('entity_timeline_events')
|
||||||
|
.select('created_by, approved_by')
|
||||||
|
.eq('id', eventId)
|
||||||
|
.single();
|
||||||
|
|
||||||
|
if (fetchError) {
|
||||||
|
console.error('Error fetching timeline event:', fetchError);
|
||||||
|
throw new Error('Timeline event not found');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!event) {
|
||||||
|
throw new Error('Timeline event not found');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only allow deletion of own unapproved events
|
||||||
|
if (event.created_by !== userId) {
|
||||||
|
throw new Error('You can only delete your own timeline events');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.approved_by !== null) {
|
||||||
|
throw new Error('Cannot delete approved timeline events');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delete the event
|
||||||
|
const { error: deleteError } = await supabase
|
||||||
|
.from('entity_timeline_events')
|
||||||
|
.delete()
|
||||||
|
.eq('id', eventId);
|
||||||
|
|
||||||
|
if (deleteError) {
|
||||||
|
console.error('Error deleting timeline event:', deleteError);
|
||||||
|
throw new Error('Failed to delete timeline event');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('✅ Timeline event deleted:', eventId);
|
||||||
|
}
|
||||||
|
|||||||
@@ -331,14 +331,6 @@ export default function DesignerDetail() {
|
|||||||
entityType="company"
|
entityType="company"
|
||||||
entityId={designer.id}
|
entityId={designer.id}
|
||||||
entityName={designer.name}
|
entityName={designer.name}
|
||||||
events={[
|
|
||||||
...(designer.founded_year ? [{
|
|
||||||
date: `${designer.founded_year}`,
|
|
||||||
title: `${designer.name} Founded`,
|
|
||||||
description: `${designer.name} was established`,
|
|
||||||
type: 'milestone' as const
|
|
||||||
}] : []),
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|||||||
@@ -365,14 +365,6 @@ export default function ManufacturerDetail() {
|
|||||||
entityType="company"
|
entityType="company"
|
||||||
entityId={manufacturer.id}
|
entityId={manufacturer.id}
|
||||||
entityName={manufacturer.name}
|
entityName={manufacturer.name}
|
||||||
events={[
|
|
||||||
...(manufacturer.founded_year ? [{
|
|
||||||
date: `${manufacturer.founded_year}`,
|
|
||||||
title: `${manufacturer.name} Founded`,
|
|
||||||
description: `${manufacturer.name} was established`,
|
|
||||||
type: 'milestone' as const
|
|
||||||
}] : []),
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|||||||
@@ -417,14 +417,6 @@ export default function OperatorDetail() {
|
|||||||
entityType="company"
|
entityType="company"
|
||||||
entityId={operator.id}
|
entityId={operator.id}
|
||||||
entityName={operator.name}
|
entityName={operator.name}
|
||||||
events={[
|
|
||||||
...(operator.founded_year ? [{
|
|
||||||
date: `${operator.founded_year}`,
|
|
||||||
title: `${operator.name} Founded`,
|
|
||||||
description: `${operator.name} was established`,
|
|
||||||
type: 'milestone' as const
|
|
||||||
}] : []),
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|||||||
@@ -637,20 +637,6 @@ export default function ParkDetail() {
|
|||||||
entityType="park"
|
entityType="park"
|
||||||
entityId={park.id}
|
entityId={park.id}
|
||||||
entityName={park.name}
|
entityName={park.name}
|
||||||
events={[
|
|
||||||
...(park.opening_date ? [{
|
|
||||||
date: park.opening_date,
|
|
||||||
title: `${park.name} Opened`,
|
|
||||||
description: `${park.name} opened to the public`,
|
|
||||||
type: 'milestone' as const
|
|
||||||
}] : []),
|
|
||||||
...(park.closing_date ? [{
|
|
||||||
date: park.closing_date,
|
|
||||||
title: `${park.name} Closed`,
|
|
||||||
description: `${park.name} ceased operation`,
|
|
||||||
type: 'status_change' as const
|
|
||||||
}] : []),
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|||||||
@@ -417,14 +417,6 @@ export default function PropertyOwnerDetail() {
|
|||||||
entityType="company"
|
entityType="company"
|
||||||
entityId={owner.id}
|
entityId={owner.id}
|
||||||
entityName={owner.name}
|
entityName={owner.name}
|
||||||
events={[
|
|
||||||
...(owner.founded_year ? [{
|
|
||||||
date: `${owner.founded_year}`,
|
|
||||||
title: `${owner.name} Founded`,
|
|
||||||
description: `${owner.name} was established`,
|
|
||||||
type: 'milestone' as const
|
|
||||||
}] : []),
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|||||||
@@ -707,20 +707,6 @@ export default function RideDetail() {
|
|||||||
entityName={ride.name}
|
entityName={ride.name}
|
||||||
currentName={ride.name}
|
currentName={ride.name}
|
||||||
formerNames={ride.name_history}
|
formerNames={ride.name_history}
|
||||||
events={[
|
|
||||||
...(ride.opening_date ? [{
|
|
||||||
date: ride.opening_date,
|
|
||||||
title: `${ride.name} Opened`,
|
|
||||||
description: `${ride.name} opened to the public at ${ride.park.name}`,
|
|
||||||
type: 'milestone' as const
|
|
||||||
}] : []),
|
|
||||||
...(ride.closing_date ? [{
|
|
||||||
date: ride.closing_date,
|
|
||||||
title: `${ride.name} Closed`,
|
|
||||||
description: `${ride.name} ceased operation`,
|
|
||||||
type: 'status_change' as const
|
|
||||||
}] : []),
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|||||||
@@ -0,0 +1,89 @@
|
|||||||
|
-- Comprehensive RLS policies for entity_timeline_events
|
||||||
|
|
||||||
|
-- Drop existing policies if any
|
||||||
|
DROP POLICY IF EXISTS "Public can view public timeline events" ON public.entity_timeline_events;
|
||||||
|
DROP POLICY IF EXISTS "Service role can manage timeline events" ON public.entity_timeline_events;
|
||||||
|
DROP POLICY IF EXISTS "Users can view their own timeline submissions" ON public.entity_timeline_events;
|
||||||
|
|
||||||
|
-- Users can create timeline submissions (goes through moderation)
|
||||||
|
CREATE POLICY "Users can submit timeline events"
|
||||||
|
ON public.entity_timeline_events
|
||||||
|
FOR INSERT
|
||||||
|
TO authenticated
|
||||||
|
WITH CHECK (
|
||||||
|
created_by = auth.uid() AND
|
||||||
|
approved_by IS NULL AND
|
||||||
|
submission_id IS NOT NULL
|
||||||
|
);
|
||||||
|
|
||||||
|
-- Users can view their own pending submissions
|
||||||
|
CREATE POLICY "Users can view own pending timeline events"
|
||||||
|
ON public.entity_timeline_events
|
||||||
|
FOR SELECT
|
||||||
|
TO authenticated
|
||||||
|
USING (
|
||||||
|
created_by = auth.uid() AND
|
||||||
|
approved_by IS NULL
|
||||||
|
);
|
||||||
|
|
||||||
|
-- Users can update their own pending submissions
|
||||||
|
CREATE POLICY "Users can update own pending timeline events"
|
||||||
|
ON public.entity_timeline_events
|
||||||
|
FOR UPDATE
|
||||||
|
TO authenticated
|
||||||
|
USING (
|
||||||
|
created_by = auth.uid() AND
|
||||||
|
approved_by IS NULL
|
||||||
|
)
|
||||||
|
WITH CHECK (
|
||||||
|
created_by = auth.uid() AND
|
||||||
|
approved_by IS NULL
|
||||||
|
);
|
||||||
|
|
||||||
|
-- Users can delete their own pending submissions only
|
||||||
|
CREATE POLICY "Users can delete own pending timeline events"
|
||||||
|
ON public.entity_timeline_events
|
||||||
|
FOR DELETE
|
||||||
|
TO authenticated
|
||||||
|
USING (
|
||||||
|
created_by = auth.uid() AND
|
||||||
|
approved_by IS NULL
|
||||||
|
);
|
||||||
|
|
||||||
|
-- Public can view approved timeline events
|
||||||
|
CREATE POLICY "Public can view approved timeline events"
|
||||||
|
ON public.entity_timeline_events
|
||||||
|
FOR SELECT
|
||||||
|
USING (
|
||||||
|
is_public = true AND
|
||||||
|
approved_by IS NOT NULL
|
||||||
|
);
|
||||||
|
|
||||||
|
-- Moderators can view all timeline events
|
||||||
|
CREATE POLICY "Moderators can view all timeline events"
|
||||||
|
ON public.entity_timeline_events
|
||||||
|
FOR SELECT
|
||||||
|
TO authenticated
|
||||||
|
USING (is_moderator(auth.uid()));
|
||||||
|
|
||||||
|
-- Moderators can manage all timeline events with MFA
|
||||||
|
CREATE POLICY "Moderators can update timeline events"
|
||||||
|
ON public.entity_timeline_events
|
||||||
|
FOR UPDATE
|
||||||
|
TO authenticated
|
||||||
|
USING (is_moderator(auth.uid()) AND has_aal2())
|
||||||
|
WITH CHECK (is_moderator(auth.uid()) AND has_aal2());
|
||||||
|
|
||||||
|
CREATE POLICY "Moderators can delete timeline events"
|
||||||
|
ON public.entity_timeline_events
|
||||||
|
FOR DELETE
|
||||||
|
TO authenticated
|
||||||
|
USING (is_moderator(auth.uid()) AND has_aal2());
|
||||||
|
|
||||||
|
-- Service role can manage all (for edge functions)
|
||||||
|
CREATE POLICY "Service role can manage timeline events"
|
||||||
|
ON public.entity_timeline_events
|
||||||
|
FOR ALL
|
||||||
|
TO service_role
|
||||||
|
USING (true)
|
||||||
|
WITH CHECK (true);
|
||||||
Reference in New Issue
Block a user