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 112 113 114 115 116 117 118 119 | import { Input } from "@/ahuora-design-system/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/ahuora-design-system/ui/select";
import { ModeEnum, SourceOptionsEnum } from "@/api/apiStore.gen";
import {
defaultManualValueForSpec,
type RequiredDriverSpec,
} from "../../../cost-curves/model/driverSpecs";
import type { BulkDriverInputMode } from "./bulkSetupHelpers";
import { driverInputModeForSpec } from "./bulkSetupHelpers";
export function BulkDriverInputsEditor({
groupLabel,
specs,
modes,
manualValues,
canEdit,
busy,
onModesChange,
onManualValuesChange,
}: {
groupLabel: string;
specs: RequiredDriverSpec[];
modes: Record<string, BulkDriverInputMode>;
manualValues: Record<string, string>;
canEdit: boolean;
busy: boolean;
onModesChange: (modes: Record<string, BulkDriverInputMode>) => void;
onManualValuesChange: (manualValues: Record<string, string>) => void;
}) {
Iif (specs.length === 0) return null;
return (
<div className="grid gap-3">
<div className="text-sm font-medium text-muted-foreground">
Cost curve variables
</div>
<div className="grid gap-2 sm:grid-cols-2">
{specs.map((spec) => {
const mode = driverInputModeForSpec(spec, modes);
const manualValue =
manualValues[spec.key] ?? defaultManualValueForSpec(spec);
return (
<div key={spec.key} className="grid gap-2">
<div className="min-w-0 text-sm font-medium">
{spec.label}
<span className="ml-1 text-muted-foreground">
({spec.unit})
</span>
</div>
<div
className={
mode === ModeEnum.Manual
? "grid gap-2 sm:grid-cols-[minmax(10rem,1fr)_minmax(7rem,0.6fr)]"
: "grid gap-2"
}
>
<Select
value={mode}
disabled={!canEdit || busy}
onValueChange={(value) => {
onModesChange({
...modes,
[spec.key]: value as ModeEnum,
});
}}
>
<SelectTrigger
aria-label={`Bulk ${spec.label} setup for ${groupLabel}`}
>
<SelectValue />
</SelectTrigger>
<SelectContent>
{spec.sourceOptions.includes(
SourceOptionsEnum.Property,
) && (
<SelectItem value={ModeEnum.AutoProperty}>
Auto-select property
</SelectItem>
)}
<SelectItem value={ModeEnum.Keep}>
Leave unchanged
</SelectItem>
{spec.sourceOptions.includes(SourceOptionsEnum.Manual) && (
<SelectItem value={ModeEnum.Manual}>
Manual value
</SelectItem>
)}
</SelectContent>
</Select>
{mode === ModeEnum.Manual && (
<Input
aria-label={`Bulk ${spec.label} manual value for ${groupLabel}`}
value={manualValue}
disabled={!canEdit || busy}
inputMode="decimal"
placeholder="Value"
onChange={(event) => {
onManualValuesChange({
...manualValues,
[spec.key]: event.currentTarget.value,
});
}}
/>
)}
</div>
</div>
);
})}
</div>
</div>
);
}
|