95 lines
3.2 KiB
TypeScript
95 lines
3.2 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 { campaignService } from '@/lib/services';
|
||
import { Campaign } from '@/types';
|
||
|
||
interface DeleteCampaignModalProps {
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
onSuccess: () => void;
|
||
campaign: Campaign | null;
|
||
}
|
||
|
||
export default function DeleteCampaignModal({ isOpen, onClose, onSuccess, campaign }: DeleteCampaignModalProps) {
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState('');
|
||
|
||
const handleDelete = async () => {
|
||
if (!campaign) return;
|
||
|
||
setLoading(true);
|
||
setError('');
|
||
|
||
try {
|
||
await campaignService.delete(campaign.id);
|
||
onSuccess();
|
||
} catch (err) {
|
||
setError('Erreur lors de la suppression de la campagne');
|
||
console.error(err);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
if (!campaign) 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 la campagne
|
||
</DialogTitle>
|
||
<DialogDescription>
|
||
Cette action est irréversible. Toutes les données associées à cette campagne seront définitivement supprimées.
|
||
</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">
|
||
Campagne à supprimer :
|
||
</h4>
|
||
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||
<strong>Titre :</strong> {campaign.title}
|
||
</p>
|
||
<p className="text-sm text-slate-600 dark:text-slate-300">
|
||
<strong>Description :</strong> {campaign.description}
|
||
</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 toutes les propositions et participants associés à cette campagne.
|
||
</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>
|
||
);
|
||
}
|