catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html

   1 <div class="properties-table">
   2     <loader [display]="isLoading" size="large" [relative]="false"></loader>
   3     <div class="table-header">
   4         <div class="table-cell col1">Property Name</div>
   5         <div class="table-cell col2">Type</div>
   6         <div class="table-cell col3">ES</div>
   7         <div class="table-cell valueCol">Value</div>
   8     </div>
   9     <div class="table-body">
  10         <div class="no-data" *ngIf="!feInstancesNames || !feInstancesNames.length">No data to display</div>
  11
  12         <ng-container *ngFor="let instanceName of feInstancesNames; trackBy:instanceName">
  13             <div class="table-rows-header white-sub-header">{{instanceName | contentAfterLastDot}}</div>
  14
  15             <div class="table-row"
  16                 *ngFor="let property of fePropertiesMap[instanceName] | searchFilter:'name':searchTerm; trackBy:property?.name"
  17                 (click)="onClickPropertyRow(property, instanceName, $event)"
  18                 [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.name }">
  19
  20                 <div class="table-cell col1" [ngClass]="{'filtered':property.name === propertyNameSearchText}">
  21                 <div class="property-name cut-inner-long-text">
  22                     <checkbox [(checked)]="property.isSelected"
  23                           [disabled]="property.isDisabled || property.isDeclared || readonly"
  24                           (checkedChange)="propertyChecked(property)"></checkbox>
  25                     <div class="inner-cell-div" tooltip="{{property.name}}">
  26                         <span>{{property.name}}</span>
  27                     </div>
  28                 </div>
  29                 <span *ngIf="property.description" class="property-description-icon sprite-new show-desc" tooltip="{{property.description}}" tooltipDelay="0"></span>
  30                 </div>
  31                 <div class="table-cell col2">
  32                     <div class="inner-cell-div" tooltip="{{property.type | contentAfterLastDot}}">
  33                         <span>{{property.type | contentAfterLastDot}}</span>
  34                     </div>
  35                 </div>
  36                 <div class="table-cell col3">
  37                     <div *ngIf="property.schema && property.schema.property && property.schema.property.type" class="inner-cell-div" tooltip="{{property.schema.property.type | contentAfterLastDot}}">
  38                         <span>{{property.schema.property.type | contentAfterLastDot}}</span>
  39                     </div>
  40                 </div>
  41                 <div class="table-cell valueCol">
  42                     <!-- [ngClass]="{'filtered':property.name === propertyNameSearchText}" (selectProperty)="propertySelected(property, $event, flatProperty.propertiesName)" [propType]="property.type" [propSchema]="property.schema" [propKey]="" [propValue]="property.value"-->
  43                     <dynamic-property
  44                         [selectedPropertyId]="selectedPropertyId"
  45                         [canBeDeclared]="true"
  46                         [property]="property"
  47                         [expandedChildId]="property.expandedChildPropertyId"
  48                         [propertyNameSearchText]="propertyNameSearchText"
  49                         [readonly]="readonly"
  50                         (valueChanged)="propValueChanged(property);"
  51                         (expandChild)="property.updateExpandedChildPropertyId($event)"
  52                         (clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceName)"
  53                         (checkProperty)="propertyChecked(property, $event)"
  54                         >
  55                     </dynamic-property>
  56
  57                 </div>
  58             </div>
  59
  60         </ng-container>
  61
  62     </div>
  63 </div>