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

Pipeline Builder

<pb-dialog >
  <header class="tool-option-header">
    <span class="tool-option-header-name">{{options.name}}</span>
    <i class="fa fa-times" (click)="closeDialog()"></i>
  </header>
  <div class="tool-option-content" >

      <div class="left-col">
        <div class="name-wrapper" >
          <span>Tool name</span>
          <input type="text" [ngModel]="options.name" [disabled]="true">
        </div>
        <div class="name-wrapper" >
          <span>Alias</span>
          <input type="text" [(ngModel)]="options.alias" placeholder="Type the alias">
        </div>
        <div class="command-wrapper" >
          <span>Command</span>
          <div class="command-area">
            <codemirror [(ngModel)]="options.command" [config]="commandAreaOptions"></codemirror>
          </div>
        </div>
      </div>

      <div class="right-col">
        <pb-table-editor [config]="variableTableConfig" (add)="addVariable()" (delete)="deleteVariable($event)" [source]="options.variables"></pb-table-editor>
        <pb-table-editor [config]="outputTableConfig" (add)="addOutput()" (delete)="deleteOutput($event)" [source]="options.outputs"></pb-table-editor>
      </div>
  </div>
  <div class="tool-option-footer">
    <div class="tool-option-footer-errs" *ngIf="errorMessages.length > 0">
      <span  class="has-error" (click)="showErrors()" >
        <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>{{errorMessages.length}}
      </span>
      <div class="error-trace">
        <div class="error-cell"  *ngFor="let eMessage of errorMessages" >
          {{eMessage}}
        </div>
      </div>
    </div>
    <div>&nbsp;</div>
    <div class="tool-option-footer-btns">
      <button class="uui-button transparent" (click)="closeDialog()">Cancel</button>
      <button class="uui-button lime-green" (click)="saveOptions(options)">Save</button>
    </div>
  </div>

</pb-dialog>