catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/capabilities/capabilities.component.html

   1 <div class="capabilities-table">
   2     <div class="expand-collapse-all-rows">
   3         <svg-icon class="selected-all-capabilities"
   4             [mode]="'primary'"  [clickable]="true" [name]="'expand-o'"
   5                 [size]="'medium'" (click)="capabilitiesTable.rowDetail.expandAllRows()">
   6         </svg-icon>
   7          <svg-icon class="unselected-all-capabilities"
   8             [mode]="'primary'"  [clickable]="true" [name]="'minimize-o'"
   9                 [size]="'medium'" (click)="capabilitiesTable.rowDetail.collapseAllRows()">
  10         </svg-icon>
  11     </div>
  12     <ngx-datatable #capabilitiesTable
  13         columnMode="flex"
  14         [headerHeight]="40"
  15         [rowHeight]="35"
  16         [rows]="capabilities"
  17         (select)="onSelectCapabilities($event)"
  18         [selectionType]="'single'">
  19         <ngx-datatable-row-detail [rowHeight]="undefiend">
  20             <ng-template let-row="row"  ngx-datatable-row-detail-template>
  21                 <div class="properties-title">Properties</div>
  22                 <capabilities-properties [capabilitiesProperties]="row.properties"></capabilities-properties>
  23             </ng-template>
  24         </ngx-datatable-row-detail>
  25         <ngx-datatable-column  name="Name" [flexGrow]="1" [resizeable]="false">
  26             <ng-template ngx-datatable-cell-template let-row="row" let-expanded="expanded">
  27                 <div class="expand-collapse-cell">
  28                     <svg-icon [clickable]="true" class="expand-collapse-icon"
  29                                 [name]="expanded ? 'caret1-up-o': 'caret1-down-o'" [mode]="'primary'"
  30                                 [size]="'medium'" (click)="expendRow(row)"></svg-icon>
  31                     <span data-tests-id="row.name" sdc-tooltip [tooltip-text]="row.name" [tooltip-placement]="3" (click)="editCapability(row)">{{row.name}}</span>
  32                 </div>
  33             </ng-template>
  34         </ngx-datatable-column>
  35         <ngx-datatable-column  name="Type" [flexGrow]="1" [resizeable]="false">
  36             <ng-template ngx-datatable-cell-template let-row="row">
  37                 <span data-tests-id="row.type" sdc-tooltip [tooltip-text]="row.type" [tooltip-placement]="3">{{row.type ? row.type.replace("tosca.capabilities.",""): ''}}</span>
  38             </ng-template>
  39         </ngx-datatable-column>
  40         <ngx-datatable-column  name="Description" [flexGrow]="1" [resizeable]="false">
  41             <ng-template ngx-datatable-cell-template let-row="row">
  42                 <span data-tests-id="row.description" sdc-tooltip [tooltip-text]="row.description" [tooltip-placement]="3">{{row.description}}</span>
  43             </ng-template>
  44         </ngx-datatable-column>
  45         <ngx-datatable-column  name="Valid Source" [flexGrow]="1" [resizeable]="false">
  46             <ng-template ngx-datatable-cell-template let-row="row">
  47                 <span data-tests-id="row.validSourceTypes.join(',')" sdc-tooltip [tooltip-text]="row.validSourceTypes ? row.validSourceTypes.join(',') : null" [tooltip-placement]="3">
  48                     {{row.validSourceTypes ? row.validSourceTypes.join(','): ''}}</span>
  49             </ng-template>
  50         </ngx-datatable-column>
  51         <ngx-datatable-column  name="Occurrences" [flexGrow]="1" [prop]="'minOccurrences'" [resizeable]="false">
  52             <ng-template ngx-datatable-cell-template let-row="row">
  53                 <span data-tests-id="row.minOccurrences+','+row.maxOccurrences" sdc-tooltip
  54                     [tooltip-text]="row.minOccurrences+','+row.maxOccurrences" [tooltip-placement]="3">
  55                     {{row.minOccurrences}},{{row.maxOccurrences}}</span>
  56             </ng-template>
  57         </ngx-datatable-column>
  58     </ngx-datatable>
  59 </div>