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 | 1070x 581x 581x 581x 581x 581x 581x 109x 109x 8x 8x 8x 436x 109x 1x 327x 109x 113x 109x 109x 3922x 1146x 114x 923x 196x 973x 1037x 90x 89x 90x | import SelectInput from "@/ahuora-design-system/inputs/SelectInput";
import {
api,
useUnitopsSimulationobjectsPartialUpdateMutation,
} from "@/api/apiStore.gen";
import allPropertyPackages from "@/data/propertyPackages.json";
import { useCurrentObject } from "@/hooks/flowsheetObjects";
import { useAppDispatch } from "@/store/hooks";
import { FeatureFlag, useFeatureFlag } from "../../../../../lib/featureFlags";
import { CustomPackageChooser } from "./CustomPackageChooser";
import { CustomPackageDialog } from "./CustomPackageDialog";
/**
* a single property package slot
*/
function PropertyPackageSlot() {
const [updateSimulationObject] =
useUnitopsSimulationobjectsPartialUpdateMutation();
const dispatch = useAppDispatch();
const unitOp = useCurrentObject();
const unitOpId = unitOp?.id;
const currentSelectedName = unitOp?.propertyPackageType ?? "";
// We use feature flags to determine wheather to show the custom property package option in the dropdown,
// but we want to keep the option to open the modal to view the custom property package for existing users
// who have already set a property package to custom.
const [customPropertyPackagesEnabled] = useFeatureFlag(
FeatureFlag.CUSTOM_PROPERTY_PACKAGES,
);
const availablePropertyPackages = customPropertyPackagesEnabled
? allPropertyPackages
: allPropertyPackages.filter((pkg) => pkg.key !== "custom");
function onChange(pkgKey: string) {
Iif (!unitOpId) return;
// optimistic update
dispatch(
api.util.updateQueryData(
"unitopsSimulationobjectsRetrieve",
{ id: unitOpId },
(cachedSimulationObject) => {
cachedSimulationObject.propertyPackageType = pkgKey;
},
),
);
//Update in backend
updateSimulationObject({
id: unitOpId,
patchedSimulationObject: {
propertyPackageType: pkgKey,
},
});
}
function onCustomPackageChange(newCustomPackageId: number) {
Iif (!unitOpId) return;
updateSimulationObject({
id: unitOpId,
patchedSimulationObject: {
customPackage: newCustomPackageId,
},
});
}
return (
<div className="flex flex-col gap-3">
<SelectInput
title="Select property package"
data={availablePropertyPackages.map((pkg) => ({
label: pkg.name,
value: pkg.key,
}))}
value={currentSelectedName}
handleChange={onChange}
/>
{currentSelectedName === "custom" && (
<CustomPackageChooser
customPackageId={unitOp?.customPackage}
onCustomPackageChange={onCustomPackageChange}
/>
)}
{currentSelectedName === "custom" && unitOp?.customPackage && (
<CustomPackageDialog
propertyPackageId={unitOp.customPackage}
></CustomPackageDialog>
)}
</div>
);
}
function PropertyPackageSettings() {
return (
<div className="flex flex-col gap-3">
<PropertyPackageSlot />
</div>
);
}
export default PropertyPackageSettings;
|