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 | 37x 118x 118x 118x 118x 118x 118x 118x 416x 118x 118x 118x 118x 118x 118x 118x 118x 6x 6x 6x 118x 6x 6x 6x 6x 9x 6x 6x 6x 118x | 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;
|