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

   1 <div class="properties-table">
   2     <loader [display]="isLoading" [size]="'large'" [relative]="true" [loaderDelay]="500"></loader>
   3     <div class="table-header">
   4         <div class="table-cell col1">Property Name</div>
   5         <div class="table-cell col2" *ngIf="!hidePropertyType">Type</div>
   6         <div class="table-cell col3" *ngIf="!hidePropertyType">ES</div>
   7         <div class="table-cell valueCol">Value</div>
   8     </div>
   9     <div class="table-body" [ngClass]="{'view-mode': readonly}">
  10         <div class="no-data" *ngIf="!fePropertiesMap || !(fePropertiesMap | keys).length">No data to display</div>
  11
  12         <ng-container *ngFor="let instanceId of fePropertiesMap | keys; trackBy:instanceId">
  13             <div class="table-rows-header white-sub-header" *ngIf="feInstanceNamesMap">{{feInstanceNamesMap[instanceId]}}</div>
  14
  15             <div class="table-row"
  16                 *ngFor="let property of fePropertiesMap[instanceId] | searchFilter:'name':searchTerm; trackBy:property?.name"
  17                 (click)="onClickPropertyRow(property, instanceId, $event)"
  18                 [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.name, 'readonly': property.isDisabled || property.isDeclared}">
  19
  20                 <div class="table-cell col1" [ngClass]="{'filtered':property.name === propertyNameSearchText}" [class.round-checkbox]="property.isDeclared">
  21                 <div class="property-name">
  22                     <checkbox *ngIf="hasDeclareOption" [(checked)]="property.isSelected"
  23                           [disabled]="property.isDisabled || property.isDeclared || readonly"
  24                           (checkedChange)="propertyChecked(property)" [attr.data-tests-id]="property.name"></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" *ngIf="!hidePropertyType">
  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" *ngIf="!hidePropertyType">
  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                         [hasDeclareOption]="hasDeclareOption"
  46                         [canBeDeclared]="hasDeclareOption && true"
  47                         [property]="property"
  48                         [expandedChildId]="property.expandedChildPropertyId"
  49                         [propertyNameSearchText]="propertyNameSearchText"
  50                         [readonly]="readonly"
  51                         (propertyChanged)="onPropertyChanged(property)"
  52                         (expandChild)="property.updateExpandedChildPropertyId($event)"
  53                         (clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceId)"
  54                         (checkProperty)="propertyChecked(property, $event)"
  55                         >
  56                     </dynamic-property>
  57
  58                 </div>
  59             </div>
  60         </ng-container>
  61
  62     </div>
  63 </div>