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 | 470x 470x 470x 470x 5x 5x 5x 5x 5x 5x 470x 2820x 481x 481x 481x 465x | import SelectInput from "@/ahuora-design-system/inputs/SelectInput";
import { Label } from "@/ahuora-design-system/ui/label";
import {
api,
SimulationObjectPropertyPackagesRead,
usePropertyPackagesSimulationObjectPropertyPackagesListQuery,
usePropertyPackagesSimulationObjectPropertyPackagesPartialUpdateMutation,
} from "@/api/apiStore.gen";
import { useAppDispatch } from "@/store/hooks";
import { useCurrentObject } from "@/hooks/flowsheetObjects";
import availablePropertyPackages from "@/data/propertyPackages.json";
/**
* a single property package slot
*/
type PropertyPackageSlotProps = {
simulationObjectPackage: SimulationObjectPropertyPackagesRead;
};
function PropertyPackageSlot({
simulationObjectPackage,
}: PropertyPackageSlotProps) {
const [updateUnitOpPropertyPackage] =
usePropertyPackagesSimulationObjectPropertyPackagesPartialUpdateMutation();
const currentSelectedName = simulationObjectPackage.propertyPackage;
const dispatch = useAppDispatch();
const unitOp = useCurrentObject();
function onChange(pkgKey: string) {
updateUnitOpPropertyPackage({
id: simulationObjectPackage.id,
patchedSimulationObjectPropertyPackages: {
propertyPackage: pkgKey,
},
});
// optimistic update
dispatch(
api.util.updateQueryData(
"propertyPackagesSimulationObjectPropertyPackagesList",
{ simulationObject: unitOp!.id },
(cachedPropertyPackages) => {
const cachedPackage = cachedPropertyPackages!.find(
(pkg) => pkg.id === simulationObjectPackage.id,
);
if (cachedPackage) {
cachedPackage.propertyPackage = pkgKey;
}
},
),
);
}
return (
<div className="flex flex-col gap-3">
{simulationObjectPackage.name && (
<Label variant="light">{simulationObjectPackage.name}</Label>
)}
<SelectInput
title="Select property package"
data={availablePropertyPackages.map((pkg) => ({
label: pkg.name,
value: pkg.key,
}))}
value={currentSelectedName}
handleChange={onChange}
/>
</div>
);
}
function PropertyPackageSettings() {
const selectedObject = useCurrentObject();
const { data: selectedObjectPropertyPackages } =
usePropertyPackagesSimulationObjectPropertyPackagesListQuery({
simulationObject: selectedObject!.id!,
});
return (
<div className="flex flex-col gap-3">
{selectedObjectPropertyPackages?.map((pkg) => {
return (
<PropertyPackageSlot key={pkg.id} simulationObjectPackage={pkg} />
);
})}
</div>
);
}
export default PropertyPackageSettings;
|