mvp progress

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

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { Row, Input, Button } from "antd";
+import { LoadPage } from "../../../core/ui/pages/load_page";
+import { createPipelineStore } from "./create_pipeline_store";
+import { observer } from "mobx-react-lite";
+import { List } from "../../../core/ui/list/list";
+
+export const CreatePipelineScreenPath = "/create_pipeline";
+
+export const CreatePipelineScreen: React.FunctionComponent = observer(() => {
+  return (
+    <>
+      <LoadPage
+        largeText={"Create pipeline"}
+        isError={createPipelineStore.isError}
+        isLoading={createPipelineStore.isLoading}
+        children={
+          <>
+            <Row>
+              <List
+                headers={"process"}
+                values={createPipelineStore.processModels.map((el) => {
+                  return { text: el.description };
+                })}
+                onClick={(e) => createPipelineStore.addProcess(e)}
+              />
+              <div style={{ flexGrow: "1" }}>
+                <Input style={{ width: "300px" }} placeholder="description" />
+                <Button onClick={() => createPipelineStore.createPipeline()}>
+                  Save result
+                </Button>
+                <List
+                  headers="new pipeline"
+                  values={createPipelineStore.pipelineViewModel }
+                />
+              </div>
+
+              <List
+                headers="triggers"
+                values={createPipelineStore.triggersModels.map((el) => {
+                  return { text: el.description };
+                })}
+                onClick={(e) => createPipelineStore.addTrigger(e)}
+              />
+            </Row>
+          </>
+        }
+      />
+    </>
+  );
+});

ui/src/features/create_pipeline/presentation/create_pipeline_store.ts

@@ -0,0 +1,95 @@
+import { makeAutoObservable } from "mobx";
+import { CreatePipelineRepository } from "../data/create_pipeline_repository";
+import { ITriggerModel } from "../../../core/model/trigger_model";
+import { IProcess } from "../../create_process/model/process_model";
+// TODO:()rename
+
+enum Direction {
+  PROCESS,
+  TRIGGER,
+}
+interface CommonView {
+  text: string;
+  color: string;
+  type: Direction;
+}
+export class CreatePipelineStore {
+  repository: CreatePipelineRepository;
+  triggersModels: ITriggerModel[] = [];
+  processModels: IProcess[] = [];
+  pipelineViewModel: CommonView[] = [];
+
+  isLoading = false;
+  isError = false;
+  page = 1;
+
+  constructor(repository: CreatePipelineRepository) {
+    this.repository = repository;
+    makeAutoObservable(this);
+    this.loadTriggers();
+    this.loadProcess();
+  }
+
+  addProcess(e: string): void {
+    const lastElement = this.pipelineViewModel.lastElement()
+
+    if(lastElement  !== undefined){
+      if(lastElement.type !== Direction.TRIGGER){
+        // need UI say 
+        return
+      }
+    }
+ 
+    this.pipelineViewModel.push({
+      text: e,
+      color: "activeborder",
+      type: Direction.PROCESS,
+    });
+  }
+
+  addTrigger(e: string): void {
+    const lastElement = this.pipelineViewModel.lastElement()
+
+    if(lastElement  !== undefined){
+      if(lastElement.type !== Direction.PROCESS){
+        // need UI say 
+        return
+      }
+    }
+    this.pipelineViewModel.push({
+      text: e,
+      color: "blanchedalmond",
+      type: Direction.TRIGGER,
+    });
+  }
+  createPipeline(): void {}
+  async loadProcess() {
+    this.isLoading = true;
+    const result = await this.repository.getProcessed();
+    result.fold(
+      (s) => {
+        this.processModels = s;
+      },
+      (_e) => {
+        this.isError = true;
+      }
+    );
+    this.isLoading = false;
+  }
+  async loadTriggers() {
+    this.isLoading = true;
+    const result = await this.repository.getTriggers(this.page);
+    result.fold(
+      (s) => {
+        this.triggersModels = s;
+      },
+      (_e) => {
+        this.isError = true;
+      }
+    );
+    this.isLoading = false;
+  }
+}
+export const createPipelineStore = new CreatePipelineStore(
+  new CreatePipelineRepository()
+);