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 | 49x 150x 150x 150x 150x 150x 150x 150x 8x 8x 12x 8x 150x 8x 8x 150x 150x 8x 8x 150x 8x 8x 150x 1890x | import { X } from "lucide-react";
import React, { useState } from "react";
import { ObjectPropertySelector } from "../../../ahuora-design-system/inputs/PropertySelection";
import DebouncedInput from "../../../ahuora-design-system/ui/debounced-input";
import { Label } from "../../../ahuora-design-system/ui/label";
import { ToolTipCover } from "../../../ahuora-design-system/ui/tooltip";
import {
api,
DataColumnRead,
PropertyValueRead,
useCoreDataColumnDestroyMutation,
useCoreDataColumnPartialUpdateMutation,
} from "../../../api/apiStore.gen";
import { useAppDispatch } from "../../../store/hooks";
type MssDataViewerProps = {
dataColumn: DataColumnRead;
showValue?: boolean;
};
const MssDataViewer: React.FC<MssDataViewerProps> = ({
dataColumn,
showValue = false,
}) => {
const [editDataColumn] = useCoreDataColumnPartialUpdateMutation();
const [deleteDataColumn] = useCoreDataColumnDestroyMutation();
const simulationObjectId1 =
(dataColumn.propertySimulationObject as number) | undefined;
const [simulationObjectId, setSimulationObjectId] = useState<
number | undefined
>(simulationObjectId1);
const [edited, setEdited] = useState(false); // If the dataColumn has been edited, and we don't want to update it until they have chosen a property
const dispatch = useAppDispatch();
const onOptimistic = (updatedValue: Partial<DataColumnRead>) => {
dispatch(
api.util.updateQueryData(
"coreDataColumnList",
{ scenario: dataColumn.scenario! },
(currentDataColumns) => {
const index = currentDataColumns.findIndex(
(prop) => prop.id === dataColumn.id,
);
currentDataColumns[index] = {
...currentDataColumns[index],
...updatedValue,
};
},
),
);
};
const onUpdate = (updatedValue: Partial<DataColumnRead>) => {
onOptimistic(updatedValue);
editDataColumn({
id: dataColumn.id,
patchedDataColumn: updatedValue,
});
};
const onDelete = () => {
deleteDataColumn({ id: dataColumn.id });
};
const handleSimulationObjectChange = (id: number) => {
setSimulationObjectId(id);
setEdited(true);
};
const handlePropertyChange = async (
id: number,
property: PropertyValueRead,
) => {
setEdited(false);
// Optimistic update the dataColumn
onUpdate({ property_value: 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">{dataColumn.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">
DataColumn
</label>
<DebouncedInput
placeholder="DataColumn"
value={dataColumn.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={dataColumn.property_value}
onSimulationObjectChange={handleSimulationObjectChange}
onPropertyChange={handlePropertyChange}
layout="flat"
useValueId={true}
filter={(value) =>
value.propertyValue &&
((value.propertyValue.enabled &&
!value.propertyValue.controlManipulatedId) ||
value.propertyValue.controlSetPointId)
}
/>
</div>
</>
);
};
export default MssDataViewer;
|