125 lines
3.7 KiB
TypeScript
125 lines
3.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Alert, AlertDescription } from '@/components/ui/alert';
|
|
import { AlertTriangle, Trash2 } from 'lucide-react';
|
|
import { BaseModal } from './base/BaseModal';
|
|
import { ErrorDisplay } from './base/ErrorDisplay';
|
|
|
|
interface ClearAllPropositionsModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onConfirm: () => Promise<void>;
|
|
campaignTitle?: string;
|
|
propositionCount: number;
|
|
}
|
|
|
|
export default function ClearAllPropositionsModal({
|
|
isOpen,
|
|
onClose,
|
|
onConfirm,
|
|
campaignTitle,
|
|
propositionCount
|
|
}: ClearAllPropositionsModalProps) {
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
|
|
const handleConfirm = async () => {
|
|
setLoading(true);
|
|
setError('');
|
|
|
|
try {
|
|
await onConfirm();
|
|
onClose();
|
|
} catch (error) {
|
|
console.error('Erreur lors de la suppression des propositions:', error);
|
|
setError('Erreur lors de la suppression des propositions.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleClose = () => {
|
|
if (!loading) {
|
|
setError('');
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
const footer = (
|
|
<>
|
|
<Button variant="outline" onClick={handleClose} disabled={loading}>
|
|
Annuler
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={handleConfirm}
|
|
disabled={loading}
|
|
className="bg-red-600 hover:bg-red-700"
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
|
|
Suppression...
|
|
</>
|
|
) : (
|
|
<>
|
|
<Trash2 className="w-4 h-4 mr-2" />
|
|
Tout effacer
|
|
</>
|
|
)}
|
|
</Button>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<BaseModal
|
|
isOpen={isOpen}
|
|
onClose={handleClose}
|
|
title="Effacer toutes les propositions"
|
|
description={`Cette action supprimera définitivement toutes les propositions de la campagne.${campaignTitle ? ` Campagne : ${campaignTitle}` : ''}`}
|
|
footer={footer}
|
|
maxWidth="sm:max-w-md"
|
|
>
|
|
<ErrorDisplay error={error} />
|
|
|
|
<Alert className="border-red-200 bg-red-50 dark:bg-red-900/20 dark:border-red-800">
|
|
<AlertTriangle className="h-4 w-4 text-red-600 dark:text-red-400" />
|
|
<AlertDescription className="text-red-800 dark:text-red-200">
|
|
<strong>Attention :</strong> Cette action est irréversible.
|
|
{propositionCount > 0 && (
|
|
<>
|
|
{' '}Vous êtes sur le point de supprimer <strong>{propositionCount} proposition{propositionCount > 1 ? 's' : ''}</strong>.
|
|
</>
|
|
)}
|
|
</AlertDescription>
|
|
</Alert>
|
|
|
|
<div className="mt-4 p-4 bg-slate-50 dark:bg-slate-800 rounded-lg">
|
|
<h4 className="font-medium text-slate-900 dark:text-slate-100 mb-2">
|
|
Que sera supprimé :
|
|
</h4>
|
|
<ul className="text-sm text-slate-600 dark:text-slate-300 space-y-1">
|
|
<li>• Toutes les propositions de la campagne</li>
|
|
<li>• Les titres et descriptions des propositions</li>
|
|
<li>• Les informations des auteurs (noms, emails)</li>
|
|
<li>• Toutes les données associées</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
|
|
<h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">
|
|
Ce qui sera conservé :
|
|
</h4>
|
|
<ul className="text-sm text-blue-800 dark:text-blue-200 space-y-1">
|
|
<li>• La campagne elle-même</li>
|
|
<li>• Les participants</li>
|
|
<li>• Les votes déjà effectués</li>
|
|
<li>• Les paramètres de la campagne</li>
|
|
</ul>
|
|
</div>
|
|
</BaseModal>
|
|
);
|
|
}
|