96 lines
3.4 KiB
TypeScript
96 lines
3.4 KiB
TypeScript
'use client';
|
||
import { useState } from 'react';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||
import { AlertTriangle } from 'lucide-react';
|
||
import { participantService } from '@/lib/services';
|
||
import { Participant } from '@/types';
|
||
|
||
interface DeleteParticipantModalProps {
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
onSuccess: () => void;
|
||
participant: Participant | null;
|
||
}
|
||
|
||
export default function DeleteParticipantModal({ isOpen, onClose, onSuccess, participant }: DeleteParticipantModalProps) {
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState('');
|
||
|
||
const handleDelete = async () => {
|
||
if (!participant) return;
|
||
|
||
setLoading(true);
|
||
setError('');
|
||
|
||
try {
|
||
await participantService.delete(participant.id);
|
||
onSuccess();
|
||
} catch (err: any) {
|
||
const errorMessage = err?.message || err?.details || 'Erreur lors de la suppression du participant';
|
||
setError(`Erreur lors de la suppression du participant: ${errorMessage}`);
|
||
console.error('Erreur lors de la suppression du participant:', err);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
if (!participant) return null;
|
||
|
||
return (
|
||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||
<DialogContent className="sm:max-w-[425px]">
|
||
<DialogHeader>
|
||
<DialogTitle className="flex items-center gap-2">
|
||
<AlertTriangle className="h-5 w-5 text-red-500" />
|
||
Supprimer le participant
|
||
</DialogTitle>
|
||
<DialogDescription>
|
||
Cette action est irréversible. Le participant sera définitivement supprimé.
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
<div className="space-y-4">
|
||
{error && (
|
||
<div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
|
||
<p className="text-sm text-red-600 dark:text-red-400">{error}</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="p-4 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
||
<h4 className="font-medium text-slate-900 dark:text-slate-100 mb-2">
|
||
Participant à supprimer :
|
||
</h4>
|
||
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||
<strong>Nom :</strong> {participant.first_name} {participant.last_name}
|
||
</p>
|
||
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||
<strong>Email :</strong> {participant.email}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
|
||
<p className="text-sm text-amber-700 dark:text-amber-300">
|
||
⚠️ Cette action supprimera également tous les votes associés à ce participant.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<DialogFooter>
|
||
<Button type="button" variant="outline" onClick={onClose}>
|
||
Annuler
|
||
</Button>
|
||
<Button
|
||
type="button"
|
||
variant="destructive"
|
||
onClick={handleDelete}
|
||
disabled={loading}
|
||
>
|
||
{loading ? 'Suppression...' : 'Supprimer définitivement'}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|