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 | 374x 374x 374x 374x 374x 374x 374x 374x 374x 374x 374x 374x 115x 718x 374x 438x 88x 374x 462x 374x 26x 26x 682x 310x 69x 126x 43x 3x 3x 284x 493x 64x 64x 64x 64x 7x 1x 128x 192x | import { Plus } from "lucide-react";
import { useSearchParams } from "react-router-dom";
import { AccessControlledButton as Button } from "@/ahuora-design-system/ui/accessControlled";
import {
useCoreScenarioCreateMutation,
useCoreScenarioRetrieveQuery,
} from "@/api/apiStore.gen";
import { useFlowsheetAccess } from "@/hooks/flowsheetAccess";
import { useCurrentGroup } from "@/hooks/flowsheetObjects";
import { useFlowsheetId } from "../../../../../hooks/project";
import { useSearchParam } from "../../../../../hooks/searchParams";
import { NoTabsLeftSideBar } from "../sidebar-structure";
import { ScenarioCard } from "./ScenarioCard";
import { ScenarioDetails } from "./ScenarioDetails";
import { useScenarios } from "./useScenarios";
export function ScenarioList() {
const access = useFlowsheetAccess();
const currentGroup = useCurrentGroup();
const rootObjectId = currentGroup?.simulationObject;
const scenarios = useScenarios();
const [scenario, setScenario] = useSearchParam("scenario");
const [_, setSearchParams] = useSearchParams();
const projectID = useFlowsheetId();
const [addScenario] = useCoreScenarioCreateMutation();
const sortedScenarios = scenarios?.slice().sort((a, b) => b.id - a.id) || [];
const selectedScenarioId = scenario ? Number(scenario) : undefined;
const selectedScenarioFromList = scenarios?.find(
(opt) => opt.id === selectedScenarioId,
);
const { data: selectedScenarioFromQuery } = useCoreScenarioRetrieveQuery(
{ id: selectedScenarioId! },
{
skip: !selectedScenarioId || !!selectedScenarioFromList,
},
);
const onAddScenario = async () => {
Iif (!rootObjectId) return;
const result = await addScenario({
scenario: {
flowsheet: projectID,
simulationObject: rootObjectId,
},
});
if (result.data) {
setScenario(result.data.id);
}
};
if (scenario) {
const currentScenario =
selectedScenarioFromList ?? selectedScenarioFromQuery;
Iif (!currentScenario) return null;
return (
<ScenarioDetails
onClose={() =>
setSearchParams((params) => {
params.delete("scenario");
return params;
})
}
scenario={currentScenario}
/>
);
}
return (
<NoTabsLeftSideBar
title="Scenarios"
body={
<div>
{sortedScenarios.length > 0 ? (
<div className="flex flex-col gap-2 ">
<Button
variant="default"
size="sm"
onClick={onAddScenario}
className="w-full mb-3"
>
<Plus /> Add Scenario
</Button>
{sortedScenarios.map((scenario) => (
<ScenarioCard
key={scenario.id}
scenario={scenario}
onClick={() => setScenario(scenario.id)}
/>
))}
{/* <Button variant="default" size="sm" onClick={onAddScenario}>
<Plus /> Add Scenario
</Button> */}
</div>
) : (
<>
<p>
{access?.can_edit === false
? "No scenarios found."
: "No scenarios found. Click the button to add."}
</p>
<Button
variant="default"
size="sm"
className="w-full mt-3"
onClick={onAddScenario}
>
<Plus /> Add Scenario
</Button>
</>
)}
</div>
}
/>
);
}
|