RackHD/on-web-ui

<div class="workflow-editor">
  <div class="workflow-json-operation clear">
    <div class="workflow-editor">
      <button class="btn btn-icon" (click)="saveConfirm()" title="Save">
        <clr-icon shape="floppy"></clr-icon>
      </button>
      <button class="btn btn-icon refresh" (click)="refreshWorkflow()" title="Restore">
        <clr-icon shape="sync"></clr-icon>
      </button>
      <p>
        Right-click to add a new task at canvas.
      </p>
      <app-canvas-graph [onWorkflowInput]='onWorkflowInput' (onWorkflowChanged)="onWorkflowChanged($event)">
      </app-canvas-graph>

    </div>

    <div class="editor">
      <div class="row filter-line">
        <button class="btn btn-icon" (click)="applyWorkflowJson()" title="Convert json to canvas">
          <clr-icon shape="arrow left"></clr-icon>
        </button>
        <div class="editor-dropdown">
          <dropdown-group [data]="workflowStore" [columns]="columns" [placeholders]="placeholders" [fields]="fields"
             needSearchIcon=true
             (selected)="onSelected($event)" (cleared)="onRefresh()">
            </dropdown-group>
        </div>
      </div>
      <div #jsoneditor id="jsoneditor"></div>
    </div>
  </div>

  <clr-modal [(clrModalOpen)]="isShowModal" [clrModalSize]="'xl'">

    <h3 class="modal-title" [ngClass]="{'red-title': !isWorkflowValid}">{{saveGraphInfo.status}}</h3>

    <div class="modal-body">
      <p>{{saveGraphInfo.notes}}</p>
    </div>

    <div class="modal-footer" *ngIf="isWorkflowValid && isShowModal && saveGraphInfo.type === 0">
      <button class="btn btn-outline" type="button" (click)="isShowModal = false;">No</button>
      <button class="btn btn-primary" type="button" (click)="saveWorkflow()">Yes</button>
    </div>

    <div class="modal-footer" *ngIf="isShowModal && saveGraphInfo.type === 1">
      <button class="btn btn-outline" type="button" (click)="isShowModal = false">No</button>
      <button class="btn btn-primary" type="button" (click)="jumpRunWorkflow()">Yes</button>
    </div>
  </clr-modal>

  <clr-modal [(clrModalOpen)]="isWaitOnMismatch" [clrModalSize]="'lg'">
    <h3 class="modal-title">Error Match Task Lable Waiton</h3>
    <div class="modal-body">
      <p>Please check workflow tasks wait on the correct task lable!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-primary btn-danger" (click)="isWaitOnMismatch = false;">OK</button>
    </div>
  </clr-modal>
</div>