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 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 | 33x 66x 66x 66x 66x 66x 66x 66x 220x 66x 66x 66x 66x 66x 66x 66x 66x 4x 4x 4x 66x 4x 4x 4x 4x 6x 4x 4x 4x 66x | import React, { useState } from "react";
import { ObjectPropertySelector } from "../../../ahuora-design-system/inputs/PropertySelection";
import DebouncedInput from "../../../ahuora-design-system/ui/debounced-input";
import { ToolTipCover } from "../../../ahuora-design-system/ui/tooltip";
import {
api,
ExpressionRead,
PropertyInfoRead,
useCoreExpressionDestroyMutation,
useCoreExpressionPartialUpdateMutation,
useCorePropertyinfoPartialUpdateMutation,
} from "../../../api/apiStore.gen";
import { useFlowsheetUnitOps } from "../../../hooks/flowsheetObjects";
import { useAppDispatch } from "../../../store/hooks";
import { X } from "lucide-react";
import { Label } from "../../../ahuora-design-system/ui/label";
type ExpressionViewerProps = {
expression: ExpressionRead;
showValue: boolean;
};
const ExpressionViewer: React.FC<ExpressionViewerProps> = ({
expression,
showValue,
}) => {
const [editExpression] = useCoreExpressionPartialUpdateMutation();
const [deleteExpression] = useCoreExpressionDestroyMutation();
const [updateProperty] = useCorePropertyinfoPartialUpdateMutation();
//const simulationObjectId = // TODO
//const propertyId = expression.properties[0]?.id
const propertyId1 = expression.property?.id;
const propertySetId = expression.property?.set;
const simulationObjects = useFlowsheetUnitOps();
const simulationObjectId1 = simulationObjects?.find(
(obj) => obj.propertySetId === propertySetId,
)?.id;
const [simulationObjectId, setSimulationObjectId] = useState<
number | undefined
>(simulationObjectId1);
const [propertyId, setPropertyId] = useState<number | undefined>();
const [edited, setEdited] = useState(false); // If the expression has been edited, and we don't want to update it until they have chosen a property
const dispatch = useAppDispatch();
const onOptimistic = (updatedValue: Partial<ExpressionRead>) => {
dispatch(
api.util.updateQueryData(
"coreExpressionList",
{ scenario: expression.scenario! },
(currentExpressions) => {
const index = currentExpressions.findIndex(
(prop) => prop.id === expression.id,
);
currentExpressions[index] = {
...currentExpressions[index],
...updatedValue,
};
},
),
);
};
const onUpdate = (updatedValue: Partial<ExpressionRead>) => {
onOptimistic(updatedValue);
editExpression({
id: expression.id,
patchedExpression: updatedValue,
});
};
const onDelete = () => {
deleteExpression({ id: expression.id });
};
const handleSimulationObjectChange = (id: number) => {
setSimulationObjectId(id);
setPropertyId(undefined);
setEdited(true);
};
const handlePropertyChange = async (
id: number,
property: PropertyInfoRead,
) => {
setPropertyId(id);
setEdited(false);
// Optimistic update the expression
dispatch(
api.util.updateQueryData(
"coreExpressionList",
{ scenario: expression.scenario! },
(currentExpressions) => {
const index = currentExpressions.findIndex(
(prop) => prop.id === expression.id,
);
currentExpressions[index].property = property;
},
),
);
// Remove the old one
Iif (propertyId1)
await updateProperty({
id: propertyId1,
patchedPropertyInfo: {
expression: null,
},
});
// Add the new one
await updateProperty({
id: id,
patchedPropertyInfo: {
expression: expression.id,
},
});
};
// Maybe we should switch this with a sheet? https://ui.shadcn.com/docs/components/sheet
return (
<>
<div className="flex flex-row justify-between ">
<Label className="text-foreground outlined">{expression.name}</Label>
<ToolTipCover content="Delete" asChild>
<X size={18} className="mr-1 cursor-pointer" onClick={onDelete} /></ToolTipCover>
</div>
{showValue && (
<div className="flex flex-col w-[200px]">
<label className="text-sm text-muted-foreground mb-1">
Expression
</label>
<DebouncedInput
placeholder="Expression"
value={expression.value}
onUpdate={(value) => onUpdate({ value: value })}
/>
</div>
)}
{/* Property Selector */}
<div className="flex flex-col">
{/* <label className="text-sm text-muted-foreground mb-1">Select Property</label> */}
<ObjectPropertySelector
simulationObjectId={edited ? simulationObjectId : simulationObjectId1}
propertyId={edited ? propertyId : propertyId1}
onSimulationObjectChange={handleSimulationObjectChange}
onPropertyChange={handlePropertyChange}
layout="flat"
/>
</div>
</>
);
};
export default ExpressionViewer;
|