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 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | 112x 112x 112x 112x 112x 112x 212x 112x 15x 112x 112x 112x 112x 157x 112x 14x 112x 112x 126x 166x 121x 100x 121x 100x 212x 112x 412x 312x 657x 448x | import { Trash2 } 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 { CostCurveRead } from "@/api/apiStore.gen";
import { mutationErrorMessage } from "../model/payloads";
import type { CostCurveUsageSummary, SaveState } from "../types";
import { FormState } from "../ui/FormState";
import { UsageList } from "./UsageList";
export function CostCurveDeleteButton({
curve,
usage,
canEdit,
saving,
onDelete,
}: {
curve: CostCurveRead;
usage: CostCurveUsageSummary;
canEdit: boolean;
saving: boolean;
onDelete: () => Promise<void>;
}) {
const [open, setOpen] = useState(false);
const [deleteState, setDeleteState] = useState<SaveState>({ kind: "idle" });
const deleting = deleteState.kind === "saving";
const usageCount = usage.unitNames.length + usage.capitalLineLabels.length;
const deleteCurve = async () => {
setDeleteState({ kind: "saving", message: "Deleting cost curve" });
try {
await onDelete();
setDeleteState({ kind: "saved", message: "Cost curve deleted" });
setOpen(false);
} catch (error) {
setDeleteState({
kind: "error",
message: mutationErrorMessage(error),
});
}
};
return (
<AlertDialog
open={open}
onOpenChange={(nextOpen) => {
setOpen(nextOpen);
Iif (nextOpen) setDeleteState({ kind: "idle" });
}}
>
<AlertDialogTrigger asChild>
<Button
type="button"
size="sm"
variant="ghost"
className="h-7 px-2 text-muted-foreground hover:text-destructive"
disabled={!canEdit || saving}
aria-label={`Delete cost curve ${curve.name}`}
title={`Delete cost curve ${curve.name}`}
>
<Trash2 className="size-4" aria-hidden="true" />
</Button>
</AlertDialogTrigger>
<AlertDialogContent aria-label={`Delete cost curve ${curve.name} dialog`}>
<AlertDialogHeader>
<AlertDialogTitle>Delete cost curve</AlertDialogTitle>
<AlertDialogDescription>
{usageCount > 0
? "This cost curve is being used by the items below."
: `Delete ${curve.name} from the cost curve library.`}
</AlertDialogDescription>
</AlertDialogHeader>
{usageCount > 0 && (
<div className="grid gap-3 text-sm">
{usage.unitNames.length > 0 && (
<UsageList title="Unit operations" items={usage.unitNames} />
)}
{usage.capitalLineLabels.length > 0 && (
<UsageList
title="Capital lines"
items={usage.capitalLineLabels}
/>
)}
</div>
)}
<FormState state={deleteState} />
<AlertDialogFooter>
<AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
<Button
type="button"
variant="destructive"
disabled={deleting}
onClick={() => void deleteCurve()}
>
{deleting ? "Deleting curve" : "Delete curve"}
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
}
|