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 | 57x 57x 57x 57x 57x 57x 57x 57x 57x 4x 4x 4x 4x 57x 45x 40x 45x 40x 1x 1x 1x 12x 2x | import { Button } from "@/ahuora-design-system/ui/button";
import {
useCoreScenarioCreateMutation
} from "@/api/apiStore.gen";
import { useCurrentGroup } from "@/hooks/flowsheetObjects";
import { Plus } from "lucide-react";
import { useSearchParams } from "react-router-dom";
import { useSearchParam } from "../../../../../hooks/searchParams";
import { NoTabsLeftSideBar } from "../sidebar-structure";
import { ScenarioCard } from "./ScenarioCard";
import { ScenarioDetails } from "./ScenarioDetails";
import { useScenarios } from "./useScenarios";
import { useProjectId } from "../../../../../hooks/project";
export function ScenarioList() {
const currentGroup = useCurrentGroup();
const rootObjectId = currentGroup?.simulationObject;
const scenarios = useScenarios();
const [scenario, setScenario] = useSearchParam("scenario");
const [_, setSearchParams] = useSearchParams();
const projectID = useProjectId();
const [addScenario] = useCoreScenarioCreateMutation();
const sortedScenarios = scenarios?.slice().sort((a, b) => b.id - a.id) || [];
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 = scenarios?.find(
(opt) => opt.id === Number(scenario),
);
if (!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>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>
}
/>
);
}
|