feat: integrate ConfirmModal for delete confirmations across components

- Added `ConfirmModal` to `TaskCard`, `JiraConfigForm`, `TfsConfigForm`, and `TagsManagement` for improved user experience during delete actions.
- Replaced direct confirmation prompts with modals, enhancing UI consistency and usability.
- Updated state management to handle modal visibility and confirmation logic effectively.
This commit is contained in:
Julien Froidefond
2025-10-01 13:47:57 +02:00
parent 352a65af47
commit f13ed5b8d9
7 changed files with 299 additions and 65 deletions

View File

@@ -0,0 +1,60 @@
'use client';
import { Modal } from './Modal';
import { Button } from './Button';
interface ConfirmModalProps {
isOpen: boolean;
onClose: () => void;
onConfirm: () => void;
title?: string;
message: string;
confirmText?: string;
cancelText?: string;
variant?: 'primary' | 'destructive';
isLoading?: boolean;
}
export function ConfirmModal({
isOpen,
onClose,
onConfirm,
title = 'Confirmation',
message,
confirmText = 'Confirmer',
cancelText = 'Annuler',
variant = 'primary',
isLoading = false
}: ConfirmModalProps) {
const handleConfirm = () => {
onConfirm();
onClose();
};
return (
<Modal isOpen={isOpen} onClose={onClose} title={title} size="sm">
<div className="space-y-4">
<p className="text-[var(--foreground)] text-sm leading-relaxed">
{message}
</p>
<div className="flex justify-end gap-2">
<Button
variant="secondary"
onClick={onClose}
disabled={isLoading}
>
{cancelText}
</Button>
<Button
variant={variant}
onClick={handleConfirm}
disabled={isLoading}
>
{isLoading ? 'Chargement...' : confirmText}
</Button>
</div>
</div>
</Modal>
);
}

View File

@@ -45,3 +45,5 @@ export { MetricsGrid } from './MetricsGrid';
// Composants existants
export { Card, CardHeader, CardTitle, CardContent, CardFooter } from './Card';
export { FontSizeToggle } from './FontSizeToggle';
export { Modal } from './Modal';
export { ConfirmModal } from './ConfirmModal';