pipeline-builder-demo/src/app/right-editor/tool-panel/tool-panel.component.html

Pipeline Builder

<div class="tool-panel">

  <div class="error" *ngIf="errorMessage">{{errorMessage}}</div>

  <div class="search-block">
    <div class="search-field">
      <label></label>
      <input class="search-input" placeholder="search..." [(ngModel)]="searchTool" (keyup)="filterTools(searchTool)">
    </div>
  </div>

  <div class="group" [class.group--active]="group.isShow" (click)="group.isShow = !group.isShow" *ngFor="let group of filteredTools "> <!-- todo | orderBy: 'groupName' -->
    <span class="show-tools" >
      {{group.groupName }} ({{group.tools.length}})
      <i [ngClass]="group.isShow ? 'fa fa-chevron-up' : 'fa fa-chevron-down'"></i>
    </span>

    <div class="tool-wrapper" *ngIf="group.isShow" (click)="$event.stopPropagation()">
      <div class="tool" *ngFor="let tool of group.tools"  (click)="addTool(tool)"> <!-- todo | orderBy: 'name' -->
        <span>{{tool.name}}</span>
      </div>
    </div>
  </div>
</div>