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 | 53x 53x 53x 53x 53x 53x 53x 53x 53x 12x 12x 1x 53x 1x 1x 53x 53x | import { Button } from "@/ahuora-design-system/ui/button";
import { ScrollArea } from "@/ahuora-design-system/ui/scroll-area";
import {
TabsComponent,
TabsConfig
} from "@/ahuora-design-system/ui/tabs-content";
import { ToolTipCover } from "@/ahuora-design-system/ui/tooltip";
import {
AbstractionTypeEnum,
api,
useGraphicsgroupingsPartialUpdateMutation
} from "@/api/apiStore.gen";
import {
useCurrentGroup,
useSelectedGroup,
useSimulationObjectGroup
} from "@/hooks/flowsheetObjects";
import { useProjectId } from "@/hooks/project";
import { useSearchParam } from "@/hooks/searchParams";
import { useAppDispatch } from "@/store/hooks";
import { Settings2 } from "lucide-react";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { GroupConnectionList } from "./Connections/GroupConnectionList";
import { GroupingTypeDropdown } from "./GroupingTypeDropdown";
import { ObjectDataProps } from "./ObjectDataProps";
import { SelectedPropertyInfo } from "./ObjectDetailsPanel";
import { ObjectsPanel } from "./ObjectsPanel";
import { GroupProperties } from "./GroupProperties";
import { GroupPropertySelection } from "./GroupPropertySelection";
export function GroupData({
schema,
openAccordions,
setOpenAccordions,
}: ObjectDataProps) {
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [view, setView] = useState<"selection" | "summary">("selection");
const [tempSelectedProperties, setTempSelectedProperties] = useState<
SelectedPropertyInfo[]
>([]);
const dispatch = useAppDispatch();
const [updateGrouping] = useGraphicsgroupingsPartialUpdateMutation();
const flowsheetId = useProjectId();
const grouping = useSelectedGroup();
console.log(grouping)
useEffect(() => {
if (grouping) {
setTempSelectedProperties(
grouping.propertyInfoRelations.map(([propertyInfoId, unitOpId]) => ({
propertyId: propertyInfoId,
unitOpId: unitOpId,
})),
);
}
}, [grouping?.propertyInfoRelations]);
const handleOpenDialog = () => {
setIsDialogOpen(true);
setView("selection");
};
const handleAbstractionTypeChange = (value: AbstractionTypeEnum) => {
dispatch(
api.util.updateQueryData(
"graphicsgroupingsList",
{ flowsheet: flowsheetId },
(groupings) => {
const group = groupings.find((g) => g.id == grouping!.id);
group!.abstractionType = value;
},
),
);
updateGrouping({
id: grouping!.id,
patchedGrouping: {
abstractionType: value,
},
});
};
return (
<ScrollArea className="w-full h-full">
{grouping && (
<GroupingTypeDropdown
value={grouping.abstractionType!}
onChange={handleAbstractionTypeChange}
/>
)}
<TabsComponent tabData={{
Properties: {
header: <GroupPropertySelection tempSelectedProperties={tempSelectedProperties} handleOpenDialog={handleOpenDialog} />,
value: <GroupProperties tempSelectedProperties={tempSelectedProperties} setTempSelectedProperties={setTempSelectedProperties}
view={view} setView={setView} isDialogOpen={isDialogOpen} setIsDialogOpen={setIsDialogOpen} />,
tabTriggerValue: "properties",
},
Connections: {
value: <GroupConnectionList />,
tabTriggerValue: "connections",
},
Objects: {
value: (
<ObjectsPanel
schema={schema}
openAccordions={openAccordions}
setOpenAccordions={setOpenAccordions}
/>
),
subTabHeader: {
bg: "blend",
type: "hShort",
tabValues: ["All", "Units", "Streams"],
},
tabTriggerValue: "objects",
},
}} />
</ScrollArea>
);
} |