pipeline-builder-demo/src/app/graphical-editor/tool-option-dialog/tool-option-dialog.component.ts

Pipeline Builder

import {Component, OnInit, ViewChild, Output, EventEmitter, AfterViewInit} from '@angular/core';
import "../../../../node_modules/codemirror/addon/display/autorefresh.js";
import '../../../../node_modules/codemirror/mode/shell/shell.js';
import  '../../../../node_modules/codemirror/addon/edit/matchbrackets.js';

import {DialogComponent} from '../../shared/dialog/dialog.component';
import {ITableConfig} from './table-editor/table-config';
import {PipelineDataService} from '../../pipeline-data.service';
import {IToolOptions} from './tool-option';
import {ToolOptionService} from './tool-option.service';

@Component({
  selector: 'pb-tool-option-dialog',
  templateUrl: './tool-option-dialog.component.html',
  styleUrls: ['./tool-option-dialog.component.scss'],
  providers: [ToolOptionService]
})
export class ToolOptionDialogComponent implements OnInit, AfterViewInit {
  @ViewChild(DialogComponent) private dialog: DialogComponent;
  @Output() save = new EventEmitter<IToolOptions>();

  private _diagram: any;
  private _selectedCall: any;
  private _delVariableHistory: string[];
  private _delOutputHistory: string[];
  errorMessages: string[] = [];

  commandAreaOptions: any;
  variableTableConfig: ITableConfig;
  outputTableConfig: ITableConfig;

  options: IToolOptions;

  constructor(private _pipelineDataService: PipelineDataService, private _toolOptionService: ToolOptionService) {
    this.variableTableConfig = {
      tableTitle: 'The variables',
      columns: [
        {key: 'name', title: 'Name'},
        {key: 'value', title: 'Value'},
        {key: 'type', title: 'Type'}
      ],
      addBtnLabel: 'Add variable'
    };

    this.outputTableConfig = {
      tableTitle: 'The outputs',
      columns: [
        {key: 'name', title: 'Name'},
        {key: 'value', title: 'Value'},
        {key: 'type', title: 'Type'}
      ],
      addBtnLabel: 'Add output'
    };
  }
  ngOnInit() {
    this._getDefaultData();

    this._diagram = this._pipelineDataService.getDiagram();
    this._delVariableHistory = [];
    this._delOutputHistory = [];

    this.commandAreaOptions = {
      value: '',
      lineWrapping: false,
      lineNumbers: true,
      autoRefresh: true,
      mode: 'text/x-sh',
      matchBrackets: true,
      theme: 'icecoder'
    };

    this.dialog.open();
  }

  ngAfterViewInit(){
    setTimeout(() => this.dialog.close(), 1);
  }

  openDialog = (): void => {
    this.dialog.open();
    this._initData();
  };

  closeDialog = (): void => {
    this.errorMessages = [];
    this.dialog.close();
  };

  saveOptions = (options: IToolOptions): void => {
    if(!this._isValidData(options)) return;

    try {
      this._toolOptionService.changeAlias(this._pipelineDataService.workflow, this._selectedCall.name, options.alias);
      this._toolOptionService.updateCommand(this._pipelineDataService.workflow, options.name, options.command);
      this._toolOptionService.updatePorts(this._pipelineDataService.workflow, this._selectedCall, options, this._delVariableHistory, this._delOutputHistory);
    }
    catch(e) {
      this.errorMessages.push(e);
      return;
    }
    this.save.emit(options);
    this.closeDialog();
  };

  deleteVariable = (name: string) => {

    let indexToDelete = 0;
    this.options.variables.forEach((item, index) => {
      if (item.name === name) {
        if(item._name){ this._delVariableHistory.push(item._name); }
        return indexToDelete = index;
      }
    });
    this.options.variables.splice(indexToDelete, 1);

  };

  addVariable = () => {
    this.options.variables.push({name: '', _name: ''});
  };

  deleteOutput = (name: string) => {
    let indexToDelete = 0;
    this.options.outputs.forEach((item, index) => {
      if (item.name === name) {
        if(item._name){ this._delOutputHistory.push(item._name); }
        return indexToDelete = index;
      }
    });
    this.options.outputs.splice(indexToDelete, 1);

  };

  addOutput = () => {
    this.options.outputs.push({name: '', _name: ''});
  };

  private _getDefaultData(){
    this.options = {
      command: '',
      name:'',
      variables: [],
      outputs: []
    };

  }
  private _initData() {
    if(!this._diagram.selection[0].step) return;

    this._selectedCall = this._diagram.selection[0].step; //todo create input source

    this.options = {
      command: this._selectedCall.action.data.command,
      name: this._selectedCall.action.name,
      alias: this._selectedCall.name,
      variables: this._toolOptionService.getPorts(this._selectedCall.i),
      outputs: this._toolOptionService.getPorts(this._selectedCall.o)
    };
  }

  private _isValidData(options: IToolOptions): boolean {
    this.errorMessages = [];
    if(!options.alias){
      this.errorMessages.push('Alias is required');
    }
    // todo if(this._pipelineDataService.existCallSuffix(options.alias)){
    //   this.errorMessages.push('The Alias is already exist');
    // }

    let noNameError = true;
    let noTypeError = true;
    options.variables.forEach(portObj => {
      if(noNameError && !portObj.name) {
        this.errorMessages.push('Variable name is required');
        noNameError = false;
      }
      if(noTypeError && !portObj.type){
        this.errorMessages.push('Variable type is required');
        noTypeError = false;
      }
    });

    noNameError = true;
    noTypeError = true;
    let noValueError = true;
    options.outputs.forEach(portObj => {
      if(noNameError && !portObj.name) {
        this.errorMessages.push('Output name is required');
        noNameError = false;
      }
      if(noValueError && !portObj.value) {
        this.errorMessages.push('Output value is required');
        noValueError = false;
      }
      if(noTypeError && !portObj.type){
        this.errorMessages.push('Output type is required');
        noTypeError = false;
      }
    });

    return this.errorMessages.length === 0;
  }
}