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 | 301x 301x 301x 301x 301x 301x 301x 301x 301x 301x 301x 301x 98x 591x 301x 350x 73x 301x 374x 301x 22x 22x 505x 252x 57x 105x 27x 1x 1x 222x 405x 49x 49x 49x 49x 2x 98x 147x | 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 { useProjectId } 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 = useProjectId();
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>
}
/>
);
}
|