webstudio/ui/src/features/create_pipeline/presentation/create_pipeline_screen.tsx

63 lines
2.4 KiB
TypeScript

import * as React from "react";
import { Row, Button } from "antd";
import { LoadPage } from "../../../core/ui/pages/load_page";
import { observer } from "mobx-react-lite";
import { Icon, List } from "../../../core/ui/list/list";
import { CreateTriggerScreenPath } from "../../create_trigger/presentation/create_trigger_screen";
import { CreateProcessScreenPath } from "../../create_process/presentation/create_process_screen";
import { CreatePipelineStore } from "./create_pipeline_store";
import { CreatePipelineRepository } from "../data/create_pipeline_repository";
export const CreatePipelineScreenPath = "/create_pipeline";
export const CreatePipelineScreen: React.FunctionComponent = observer(() => {
const [createPipelineStore] = React.useState(() => new CreatePipelineStore(new CreatePipelineRepository()));
React.useEffect(() => {}, [createPipelineStore]);
return (
<>
<LoadPage
largeText={"Create pipeline"}
isError={createPipelineStore.isError}
isLoading={createPipelineStore.isLoading}
children={
<>
<Row>
<List
headers={"process"}
link={{ path: CreateProcessScreenPath, text: "create process" }}
values={createPipelineStore.processModels.map((el) => {
return { text: el.description, id: el._id };
})}
onClick={(e) => createPipelineStore.addProcess(e.text, e.id!)}
icon={Icon.add}
/>
<div style={{ flexGrow: "1" }}>
<Button onClick={() => createPipelineStore.createPipeline()}>Save result</Button>
<List
headers="new pipeline"
values={createPipelineStore.pipelineViewModels}
icon={Icon.delete}
onClick={(_e, index) => {
createPipelineStore.filterPipelineViewModel(index);
}}
/>
</div>
<List
headers="triggers"
link={{ path: CreateTriggerScreenPath, text: "create trigger" }}
values={createPipelineStore.triggersModels.map((el) => {
return { text: el.description, id: el._id };
})}
onClick={(e) => createPipelineStore.addTrigger(e.text, e.id!)}
icon={Icon.add}
/>
</Row>
</>
}
/>
</>
);
});