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 | 24x 24x 24x 24x 24x 24x 24x 24x 1x 1x 30x 24x 31x 24x 24x 24x 24x 24x 72x 168x 1x 24x 25x 72x 26x 72x | import { useEffect, useRef, useState } from "react";
import { Checkbox } from "@/ahuora-design-system/ui/checkbox";
import { Label } from "@/ahuora-design-system/ui/label";
import type { CostableItemRead } from "@/api/apiStore.gen";
import type { SaveState } from "../model/capitalLineTypes";
import { FieldError } from "../ui/CapitalLineUi";
export function UnitInclusionControl({
item,
canEdit,
error,
saveState,
onChange,
}: {
item: CostableItemRead;
canEdit: boolean;
error?: string;
saveState?: SaveState;
onChange: (included: boolean) => void;
}) {
const [localValue, setLocalValue] = useState(item.included);
const [dirty, setDirty] = useState(false);
const canonicalValue = item.included;
const canonicalKey = `${canonicalValue}|${item.updated_at ?? ""}`;
const editBaseCanonicalKeyRef = useRef(canonicalKey);
const pending = saveState?.kind === "saving";
useEffect(() => {
if (localValue === canonicalValue) {
editBaseCanonicalKeyRef.current = canonicalKey;
setDirty(false);
return;
}
if (dirty && pending) {
editBaseCanonicalKeyRef.current = canonicalKey;
return;
}
Iif (dirty && saveState?.kind === "error") return;
if (
dirty &&
saveState?.kind === "saved" &&
canonicalKey === editBaseCanonicalKeyRef.current
) {
return;
}
setLocalValue(canonicalValue);
editBaseCanonicalKeyRef.current = canonicalKey;
setDirty(false);
}, [
canonicalKey,
canonicalValue,
dirty,
item.id,
localValue,
pending,
saveState?.kind,
]);
return (
<div className="grid gap-1">
<div className="inline-flex items-center gap-2 rounded-md border bg-background px-2 py-1.5">
<Checkbox
id={`unit-inclusion-${item.id}`}
checked={localValue}
disabled={!canEdit}
aria-label={`Unit inclusion for ${item.name}`}
aria-describedby={
error ? `unit-inclusion-${item.id}-error` : undefined
}
onCheckedChange={(checked) => {
const included = checked === true;
editBaseCanonicalKeyRef.current = canonicalKey;
setLocalValue(included);
setDirty(true);
onChange(included);
}}
/>
<Label
htmlFor={`unit-inclusion-${item.id}`}
className="cursor-pointer text-xs font-medium leading-none"
>
Included
</Label>
</div>
<FieldError id={`unit-inclusion-${item.id}-error`} message={error} />
</div>
);
}
|