Admin/ocean-cleanup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add event cancellation functionality for organizers

Browse Source 
- Add Cancel Event button in event detail modal for organizers
- Show cancel button both before and after event date (if not completed)
- Add confirmation dialog before cancelling
- Update event status to 'cancelled' when cancelled
- Only organizers can cancel their events
This commit is contained in:
Paul Bailey
2025-11-16 20:28:21 +00:00
parent 529cdd0c05
commit 8ee17848a6
2 changed files with 56 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/event/EventDetailModal.tsx
View File

@@ -25,6 +25,7 @@ interface EventDetailModalProps {
onRegister: () => void;
onUnregister: () => void;
onComplete: (data: { litterCollected: number; photos: string[] }) => Promise<void>;
onCancel?: () => void;
isLoading?: boolean;
}
@@ -36,6 +37,7 @@ export function EventDetailModal({
onRegister,
onUnregister,
onComplete,
onCancel,
isLoading = false,
}: EventDetailModalProps) {
const mapRef = useRef<HTMLDivElement>(null);
@@ -271,21 +273,41 @@ export function EventDetailModal({
>
{showCompletionForm ? 'Hide Completion Form' : 'Complete Event'}
</button>
{onCancel && (
<button
onClick={onCancel}
disabled={isLoading}
className="px-6 py-3 border border-red-300 text-red-700 rounded-lg hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
>
Cancel Event
</button>
)}
</div>
) : isOrganizer && !hasEventPassed ? (
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
<div className="flex items-center">
<svg className="h-5 w-5 text-blue-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path
fillRule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clipRule="evenodd"
/>
</svg>
<span className="text-sm text-blue-800">
You can complete this event after {format(new Date(event.scheduledDate), 'MMM d, yyyy')}
</span>
<div className="space-y-3">
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
<div className="flex items-center">
<svg className="h-5 w-5 text-blue-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path
fillRule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clipRule="evenodd"
/>
</svg>
<span className="text-sm text-blue-800">
You can complete this event after {format(new Date(event.scheduledDate), 'MMM d, yyyy')}
</span>
</div>
</div>
{onCancel && (
<button
onClick={onCancel}
disabled={isLoading}
className="w-full px-6 py-3 border border-red-300 text-red-700 rounded-lg hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
>
Cancel Event
</button>
)}
</div>
) : isRegistered ? (
<div className="flex items-center justify-between">