RackHD/on-web-ui

<div class="app-graph">

  <inventory-header [allItems]="allWorkflows" [name]="'Workflow Defintion'"
    (action)="onAction($event)" (filter)="onFilter($event)">
  </inventory-header>

  <div class="inventory">
    <clr-datagrid [clrDgLoading]="dgDataLoading" [(clrDgSelected)]="selectedWorkflows">
      <clr-dg-placeholder>{{ dgPlaceholder }}</clr-dg-placeholder>
      <clr-dg-column [clrDgSortBy]="friendlyNameComparator">
        <ng-container *clrDgHideableColumn="{hidden: false}">FriendlyName</ng-container>
        <clr-dg-string-filter [clrDgStringFilter]="friendlyNameFilter"> </clr-dg-string-filter>
      </clr-dg-column>
      <clr-dg-column [clrDgSortBy]="injectableNameComparator">
        <ng-container *clrDgHideableColumn="{hidden: false}">InjectableName</ng-container>
        <clr-dg-string-filter [clrDgStringFilter]="injectableNameFilter">
        </clr-dg-string-filter>
      </clr-dg-column>
      <clr-dg-column>
        <ng-container *clrDgHideableColumn="{hidden: false}">Options</ng-container>
        <clr-dg-string-filter [clrDgStringFilter]="optionsFilter">
        </clr-dg-string-filter>
      </clr-dg-column>
      <clr-dg-column >
        <ng-container *clrDgHideableColumn="{hidden: false}">Tasks</ng-container>
        <clr-dg-string-filter [clrDgStringFilter]="tasksFilter">
        </clr-dg-string-filter>
      </clr-dg-column>
      <clr-dg-column>Viewer</clr-dg-column>

      <clr-dg-row *clrDgItems="let workflow of workflowsStore" [clrDgItem]="workflow">
        <clr-dg-action-overflow>
          <button class="action-item" (click)="onUpdate(workflow)">Update</button>
          <button class="action-item" (click)="onDelete(workflow)">Delete</button>
          <button class="action-item" (click)="onGetDetails(workflow)">Detail</button>
        </clr-dg-action-overflow>
        <clr-dg-cell>{{workflow.friendlyName}}</clr-dg-cell>
        <clr-dg-cell >{{workflow.injectableName}}</clr-dg-cell>
        <clr-dg-cell (click)="getChild('options', workflow)">
          <u *ngIf="workflow.options" class="grid-item">Options</u>
        </clr-dg-cell>
        <clr-dg-cell (click)="getChild('tasks', workflow)">
          <u *ngIf="workflow.tasks && workflow.tasks.length > 0" class="grid-item">{{workflow.tasks.length}} tasks</u>
        </clr-dg-cell>
        <clr-dg-cell (click)="gotoCanvas(workflow)">
          <u class="grid-item">GraphViewer</u>
        </clr-dg-cell>
      </clr-dg-row>

      <clr-dg-footer>
        <inventory-footer></inventory-footer>
      </clr-dg-footer>
    </clr-datagrid>

    <div class="selected">
      Selected Workflows:
      <span *ngFor="let workflow of selectedWorkflows; let isLast = last">{{workflow? workflow.injectableName : null}}{{isLast ? '' : ', '}}</span>
    </div>
  </div>

  <details-modal *ngIf="modalTypes.detailActions.indexOf(action) !== -1"
    [(isPop)]="isShowModal" [data]="rawData"
    [dataType]="action" [title]="selectedWorkflow.injectableName">
  </details-modal>

  <clr-modal *ngIf="action === 'Delete'" [(clrModalOpen)]="isShowModal" [clrModalSize]="'xl'">
    <h3 class="modal-title">Are you sure you want to delete below workflows</h3>
    <div class="modal-body">
      <span *ngFor="let workflow of selectedWorkflows; let isLast = last">
        {{workflow? workflow.injectableName : null}}{{isLast ? '' : ', '}}
      </span>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="button" (click)="onDeleteSubmit()">Confirm</button>
    </div>
  </clr-modal>

  <clr-modal *ngIf="modalTypes.formActions.indexOf(action) !== -1"
    [(clrModalOpen)]="isShowModal"
    [clrModalSize]="'lg'">
    <h3 class="modal-title">{{action}} workflow</h3>
    <div class="modal-body">
      <form [formGroup]="modalFormGroup" novalidate>
        <section class="form-block compact">
          <div class="form-group">
            <label for="injectableName">injectableName: </label>
            <input type="text" id="injectableName" class="input-size" formControlName="injectableName">
          </div>
          <div class="form-group">
            <label for="friendlyName">friendlyName: </label>
            <input type="text" id="friendlyName" class="input-size"
              formControlName="friendlyName">
          </div>
          <div class="form-group">
            <label for="options">options: </label>
            <textarea id="options" rows='3' formControlName="options">
            </textarea>
            <div class="alertMessage" *ngIf="!optionsJsonValid">
                Invalid JSON payload.
            </div>
          </div>
          <div class="form-group">
            <label for="tasks">tasks: </label>
            <textarea id="tasks" rows='8' formControlName="tasks">
            </textarea>
            <div class="alertMessage" *ngIf="!tasksJsonValid">
                Invalid JSON payload.
            </div>
          </div>
        </section>
      </form>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="button" (click)="onCancel()">Cancel</button>
      <button class="btn btn-primary" type="button" (click)="onSubmit()">Confirm</button>
    </div>
  </clr-modal>

</div>