Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | 14x 14x 14x 14x | import { X } from "lucide-react";
import { useState } from "react";
import {
AlertDialog,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/ahuora-design-system/ui/alert-dialog";
import { Button } from "@/ahuora-design-system/ui/button";
import type { EconomicsStudyRead } from "@/api/apiStore.gen";
import { useEconomicsStudiesDestroyMutation } from "@/api/apiStore.gen";
export function DeleteEconomicsStudyButton({
study,
onDeleted,
}: {
study: EconomicsStudyRead;
onDeleted?: (studyId: number) => void;
}) {
const [deleteStudy, deleteState] = useEconomicsStudiesDestroyMutation();
const [open, setOpen] = useState(false);
const [error, setError] = useState<string | null>(null);
const deleting = deleteState.isLoading;
const handleDelete = async () => {
setError(null);
try {
await deleteStudy({ id: study.id }).unwrap();
setOpen(false);
onDeleted?.(study.id);
} catch {
setError("Could not delete the economics study.");
}
};
return (
<AlertDialog
open={open}
onOpenChange={(nextOpen) => {
setOpen(nextOpen);
Iif (nextOpen) setError(null);
}}
>
<AlertDialogTrigger asChild>
<Button
type="button"
size="xs"
variant="ghost"
className="shrink-0 text-muted-foreground hover:text-destructive"
aria-label={`Delete economics study ${study.name}`}
title={`Delete economics study ${study.name}`}
>
<X className="size-4" aria-hidden="true" />
</Button>
</AlertDialogTrigger>
<AlertDialogContent
className="sm:max-w-md"
aria-label={`Delete economics study ${study.name} dialog`}
>
<AlertDialogHeader>
<AlertDialogTitle>Delete economics study</AlertDialogTitle>
<AlertDialogDescription>
Delete {study.name} and its economics lines and results.
</AlertDialogDescription>
</AlertDialogHeader>
{error && (
<p className="text-xs text-destructive" role="alert">
{error}
</p>
)}
<AlertDialogFooter>
<AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
<Button
type="button"
variant="destructive"
disabled={deleting}
onClick={() => void handleDelete()}
>
{deleting ? "Deleting study" : "Delete study"}
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
}
|