progress

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

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { Row, Input, Button } from "antd";
+import { Row, 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";
+import { Icon, List } from "../../../core/ui/list/list";
 
 export const CreatePipelineScreenPath = "/create_pipeline";
 
@@ -20,27 +20,32 @@ export const CreatePipelineScreen: React.FunctionComponent = observer(() => {
               <List
                 headers={"process"}
                 values={createPipelineStore.processModels.map((el) => {
-                  return { text: el.description };
+                  return { text: el.description, id: el._id };
                 })}
-                onClick={(e) => createPipelineStore.addProcess(e)}
+                onClick={(e) => createPipelineStore.addProcess(e.text, e.id!)}
+                icon={Icon.add}
               />
               <div style={{ flexGrow: "1" }}>
-                <Input style={{ width: "300px" }} placeholder="description" />
                 <Button onClick={() => createPipelineStore.createPipeline()}>
                   Save result
                 </Button>
                 <List
                   headers="new pipeline"
-                  values={createPipelineStore.pipelineViewModel }
+                  values={createPipelineStore.pipelineViewModels}
+                  icon={Icon.delete}
+                  onClick={(_e, index) => {
+                    createPipelineStore.filterPipelineViewModel(index);
+                  }}
                 />
               </div>
 
               <List
                 headers="triggers"
                 values={createPipelineStore.triggersModels.map((el) => {
-                  return { text: el.description };
+                  return { text: el.description, id: el._id };
                 })}
-                onClick={(e) => createPipelineStore.addTrigger(e)}
+                onClick={(e) => createPipelineStore.addTrigger(e.text, e.id!)}
+                icon={Icon.add}
               />
             </Row>
           </>

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

@@ -2,26 +2,26 @@ 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 {
+import { message } from "antd";
+ 
+enum Type {
   PROCESS,
   TRIGGER,
 }
-interface CommonView {
+export interface UnionView {
   text: string;
   color: string;
-  type: Direction;
+  type: Type;
+  uuid?: string;
 }
+
 export class CreatePipelineStore {
   repository: CreatePipelineRepository;
   triggersModels: ITriggerModel[] = [];
   processModels: IProcess[] = [];
-  pipelineViewModel: CommonView[] = [];
-
+  pipelineViewModels: UnionView[] = [];
   isLoading = false;
   isError = false;
-  page = 1;
 
   constructor(repository: CreatePipelineRepository) {
     this.repository = repository;
@@ -29,40 +29,68 @@ export class CreatePipelineStore {
     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,
-    });
+  filterPipelineViewModel(index: number): void {
+    this.pipelineViewModels = this.pipelineViewModels.filter(
+      (_el, i) => i !== index
+    );
   }
+  addTrigger(e: string, id: string): void {
+    const lastElement = this.pipelineViewModels.lastElement();
+    if (this.pipelineViewModels.length === 2) {
+      return;
+    }
+    if (lastElement !== undefined) {
+      if (lastElement.type !== Type.PROCESS) {
+        message.error("Need process");
 
-  addTrigger(e: string): void {
-    const lastElement = this.pipelineViewModel.lastElement()
-
-    if(lastElement  !== undefined){
-      if(lastElement.type !== Direction.PROCESS){
-        // need UI say 
-        return
+        return;
       }
     }
-    this.pipelineViewModel.push({
+    this.pipelineViewModels.push({
+      uuid: id,
       text: e,
       color: "blanchedalmond",
-      type: Direction.TRIGGER,
+      type: Type.TRIGGER,
     });
   }
-  createPipeline(): void {}
+  addProcess(e: string, id: string): void {
+    const lastElement = this.pipelineViewModels.lastElement();
+    if (this.pipelineViewModels.length === 2) {
+      return;
+    }
+    if (lastElement !== undefined) {
+      if (lastElement.type !== Type.TRIGGER) {
+        message.error("Need trigger");
+        return;
+      }
+    }
+
+    this.pipelineViewModels.push({
+      uuid: id,
+      text: e,
+      color: "activeborder",
+      type: Type.PROCESS,
+    });
+  }
+
+  async createPipeline(): Promise<void> {
+    if (this.pipelineViewModels.isEmpty()) {
+      message.error("not found pipelines process");
+      return;
+    }
+    const triggerId = this.pipelineViewModels.find(
+      (el) => el.type === Type.TRIGGER
+    )!.uuid as string;
+    const processId = this.pipelineViewModels.find(
+      (el) => el.type === Type.PROCESS
+    )!.uuid as string;
+
+    this.repository.savePipeline({
+      process: processId,
+      trigger: triggerId,
+    });
+  }
+
   async loadProcess() {
     this.isLoading = true;
     const result = await this.repository.getProcessed();
@@ -76,9 +104,10 @@ export class CreatePipelineStore {
     );
     this.isLoading = false;
   }
+
   async loadTriggers() {
     this.isLoading = true;
-    const result = await this.repository.getTriggers(this.page);
+    const result = await this.repository.getTriggers(1);
     result.fold(
       (s) => {
         this.triggersModels = s;