whisper-money/resources/js/components/automation-rules/delete-automation-rule-dial...

78 lines
2.4 KiB
TypeScript

import { destroy } from '@/actions/App/Http/Controllers/Settings/AutomationRuleController';
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import type { AutomationRule } from '@/types/automation-rule';
import { __ } from '@/utils/i18n';
import { router } from '@inertiajs/react';
import { useState } from 'react';
interface DeleteAutomationRuleDialogProps {
rule: AutomationRule;
open: boolean;
onOpenChange: (open: boolean) => void;
onSuccess?: () => void;
}
export function DeleteAutomationRuleDialog({
rule,
open,
onOpenChange,
onSuccess,
}: DeleteAutomationRuleDialogProps) {
const [isDeleting, setIsDeleting] = useState(false);
const handleDelete = () => {
setIsDeleting(true);
router.delete(destroy(rule.id).url, {
preserveState: true,
preserveScroll: true,
onSuccess: () => {
onOpenChange(false);
onSuccess?.();
},
onFinish: () => {
setIsDeleting(false);
},
});
};
return (
<AlertDialog open={open} onOpenChange={onOpenChange}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>
{__('Delete Automation Rule')}
</AlertDialogTitle>
<AlertDialogDescription>
{__('Are you sure you want to delete "')}
{rule.title}
{__(
'"? This\n action cannot be undone.',
)}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={isDeleting}>
{__('Cancel')}
</AlertDialogCancel>
<AlertDialogAction
onClick={handleDelete}
disabled={isDeleting}
className="bg-red-600 hover:bg-red-700"
>
{isDeleting ? 'Deleting...' : 'Delete'}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
}