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 | 26x 26x 26x 26x 26x 26x 26x | import { AutoSelectInput } from "@/ahuora-design-system/ui/auto-select-input";
import { Badge } from "@/ahuora-design-system/ui/badge";
import { Input } from "@/ahuora-design-system/ui/input";
import {
PropertyInfoRead,
useCorePropertyinfoDestroyMutation,
useCorePropertyinfoPartialUpdateMutation,
} from "@/api/apiStore.gen";
import { CircleX } from "lucide-react";
import { UnitsDropdown } from "../../PropertiesSidebar/PropertyPanel/InputFields/UnitsDropdown";
import { FormulaInputField } from "./FormulaInputField";
export function FormulaCard({
property,
showTop,
}: {
property: PropertyInfoRead;
showTop?: boolean;
}) {
const [updatePropertyInfo] = useCorePropertyinfoPartialUpdateMutation();
const [deleteExpression] = useCorePropertyinfoDestroyMutation();
if (showTop == undefined) showTop = true;
const onUpdateName = (value: string) => {
// backend update
updatePropertyInfo({
id: property.id,
patchedPropertyInfo: {
displayName: value,
},
});
// TODO: optimistic update
};
const onDeleteExpression = () => {
deleteExpression({
id: property.id,
});
};
const onUpdateUnit = (unit: string) => {
// backend update
updatePropertyInfo({
id: property.id,
patchedPropertyInfo: {
unit: unit,
},
});
// TODO: optimistic update
};
return (
<div className="bg-muted rounded-lg pb-1 min-h-full">
{showTop && (
<div className="flex flex-row justify-between p-2 bg-accent items-center gap-2 rounded-t-lg">
<Badge className="max-w-100">
<AutoSelectInput
aria-label="expression-name"
textSize="text-xs"
textColor="text-primary"
width="max-w-500"
value={property.displayName}
onUpdateValue={onUpdateName}
/>
</Badge>
<CircleX
size={16}
className="cursor-pointer"
aria-label="delete-expression"
onClick={onDeleteExpression}
/>
</div>
)}
<div
aria-label="expression-div"
className="rounded-md p-2 flex flex-col gap-2"
>
<div className="flex flex-col gap-2">
<FormulaInputField
property={property}
propertyValue={property.values}
/>
<div className="flex flex-row gap-2">
<Input
value={
property.values.value == undefined ? "" : property.values.value
}
placeholder="Not calculated"
disabled
/>
<UnitsDropdown property={property} onUpdate={onUpdateUnit} />
</div>
</div>
</div>
</div>
);
}
|