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

   1 <div class="properties-table">
   2     <loader [display]="isLoading" size="large" [relative]="true"></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">No data to display</div>
  11
  12         <div *ngFor="let instanceName of feInstancesNames; trackBy:instanceName">
  13             <div class="table-rows-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}}"></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">{{property.schema && property.schema.property && property.schema.property.type ? (property.schema.property.type
  37                     | contentAfterLastDot) : ''}}</div>
  38                 <div class="table-cell valueCol">
  39                     <!-- [ngClass]="{'filtered':property.name === propertyNameSearchText}" (selectProperty)="propertySelected(property, $event, flatProperty.propertiesName)" [propType]="property.type" [propSchema]="property.schema" [propKey]="" [propValue]="property.value"-->
  40                     <dynamic-property
  41                         [selectedPropertyId]="selectedPropertyId"
  42                         [canBeDeclared]="true"
  43                         [property]="property"
  44                         [expandedChildId]="property.expandedChildPropertyId"
  45                         [propertyNameSearchText]="propertyNameSearchText"
  46                         [readonly]="readonly"
  47                         (valueChanged)="propValueChanged(property);"
  48                         (expandChild)="property.updateExpandedChildPropertyId($event)"
  49                         (clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceName)"
  50                         (checkProperty)="propertyChecked(property, $event)"
  51                         >
  52                     </dynamic-property>
  53
  54                 </div>
  55             </div>
  56
  57         </div>
  58
  59     </div>
  60 </div>