vid-webpack-master/src/app/drawingBoard/available-models-tree/available-models-tree.component.html

   1 <div class="available-models-tree">
   2   <h5>
   3     <span>SERVICE MODEL:</span>
   4     <span id="service-model-name">{{service | serviceInfo: _store: serviceModelId : 'name'}}</span>
   5   </h5>
   6   <div class="available-models-content-wrapper">
   7     <div class="search-container">
   8       <input [attr.data-tests-id]="'search-left-tree'"  #filter (keyup)="searchTree(filter.value, $event)" placeholder="Filter..."/>
   9       <span class="icon-search"></span>
  10     </div>
  11
  12     <tree-root #tree [attr.data-tests-id]="'available-models-tree'" [nodes]="nodes" [options]="options">
  13       <ng-template #treeNodeTemplate let-node let-index="index">
  14         <div [attr.data-tests-id]="'node-'+node.data.name" (click)="selectNode(node)" [ngClass]="{'selected': index , 'isParent': node.data.type !== 'VFmodule' , 'isChild': node.data.type === 'VFmodule' }">
  15           <span class="vf-type">{{node.data.type.substring(0,1)}}</span>
  16           <span class="span-name" [innerHTML]=" isFilterEnabled ? (node.data.name | highlight : filter.value) : (node.data.name)"></span>
  17           <span class="actions">
  18             <span class="number-button" *ngIf="isShowNodeCount(node)">
  19               <span>{{getNodeCount(node)}}</span>
  20             </span>
  21             <span class="icon-v" *ngIf="isShowIconV(node)">
  22               <span ></span>
  23             </span>
  24             <span class="icon-plus" *ngIf="isShowIconAdd(node)">
  25               <span tooltip="Add" [attr.data-tests-id]="'node-'+node.data.name+'-add-btn'" (click)="onClickAdd($event,node)">
  26                 <i class="fa fa-plus-circle" aria-hidden="true"></i>
  27               </span>
  28             </span>
  29           </span>
  30        </div>
  31       </ng-template>
  32     </tree-root>
  33
  34   </div>
  35 </div>