2023-11-10 12:06:40 +03:00
|
|
|
import * as React from "react";
|
|
|
|
import { observer } from "mobx-react-lite";
|
|
|
|
import { LoadPage } from "../../../core/ui/pages/load_page";
|
2023-11-14 20:44:06 +03:00
|
|
|
import { CreateProjectScreenPath } from "../../create_project/create_project_screen";
|
2023-11-16 00:40:35 +03:00
|
|
|
import { SelectProjectStore } from "./select_project_store";
|
2023-11-20 00:48:40 +03:00
|
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import { CreateProjectInstancePath } from "../../create_project_instance/create_project_instance";
|
|
|
|
import { Button } from "antd";
|
2023-11-10 12:06:40 +03:00
|
|
|
export const SelectProjectScreenPath = "/select_project";
|
|
|
|
|
|
|
|
export const SelectProjectScreen: React.FunctionComponent = observer(() => {
|
2024-02-04 13:12:53 +00:00
|
|
|
const [selectProjectStore] = React.useState(() => new SelectProjectStore());
|
2023-11-20 00:48:40 +03:00
|
|
|
const navigate = useNavigate();
|
2023-11-16 00:40:35 +03:00
|
|
|
|
2024-02-04 13:12:53 +00:00
|
|
|
React.useEffect(() => {
|
|
|
|
selectProjectStore.init();
|
|
|
|
}, [selectProjectStore, navigate]);
|
|
|
|
|
2023-11-10 12:06:40 +03:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<LoadPage
|
2023-11-14 20:44:06 +03:00
|
|
|
path={CreateProjectScreenPath}
|
2023-11-10 12:06:40 +03:00
|
|
|
largeText={"Select project"}
|
|
|
|
minText={"add new project?"}
|
|
|
|
isLoading={selectProjectStore.isLoading}
|
2024-02-04 13:12:53 +00:00
|
|
|
isError={selectProjectStore.errors.isNotEmpty()}
|
2023-11-10 12:06:40 +03:00
|
|
|
children={selectProjectStore.projects.map((el) => {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div>{el.description}</div>
|
2023-11-20 00:48:40 +03:00
|
|
|
<div>
|
2024-02-04 13:12:53 +00:00
|
|
|
<Button onClick={() => navigate(CreateProjectInstancePath + el._id)}>create instance</Button>
|
2023-11-20 00:48:40 +03:00
|
|
|
</div>
|
2023-11-10 12:06:40 +03:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
});
|