webstudio/ui/src/features/all_projects/presentation/all_projects_screen.tsx
2023-12-28 17:18:12 +03:00

64 lines
2.3 KiB
TypeScript

import * as React from "react";
import { AllProjectStore } from "./all_projects_store";
import { ProjectRepository } from "../data/project_repository";
import { LoadPage } from "../../../core/ui/pages/load_page";
import { observer } from "mobx-react-lite";
import { SelectProjectScreenPath } from "../../select_project/presentation/select_project";
import { useNavigate } from "react-router-dom";
import { Button } from "antd";
import { PipelineInstanceScreenPath } from "../../pipeline_instance_main_screen/pipeline_instance_screen";
export const AllProjectScreenPath = "/";
export const AllProjectScreen: React.FunctionComponent = observer(() => {
const [allProjectStore] = React.useState(() => new AllProjectStore(new ProjectRepository()));
const navigate = useNavigate();
React.useEffect(() => {
allProjectStore.init();
}, [allProjectStore]);
return (
<>
<LoadPage
largeText={"Projects"}
needBackButton={false}
minText="create project?"
path={SelectProjectScreenPath}
isError={allProjectStore.isError}
isLoading={allProjectStore.isLoading}
children={
<div>
<h1>Projects</h1>
<h5 style={{ backgroundColor: "ButtonShadow" }}>
<Button
onClick={() => {
navigate(PipelineInstanceScreenPath + allProjectStore.activePipeline?.projectUUID ?? "");
}}
>
Project main panel
</Button>
{allProjectStore.activePipeline?.projectUUID ?? "loading"}
</h5>
{allProjectStore.projectsModels?.map((el) => {
return (
<div style={{ margin: "10px", backgroundColor: "Highlight" }}>
<Button
onClick={() => {
allProjectStore.setPipelineActive(el._id ?? "").then(() => {
allProjectStore.init();
navigate(PipelineInstanceScreenPath + el._id ?? "");
});
}}
>
set active project
</Button>
<div style={{ margin: "10px", display: "contents" }}> {el.description}</div>
</div>
);
})}
</div>
}
/>
</>
);
});