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

   1 <div *ngIf="!property.hidden" class="dynamic-property-row nested-level-{{nestedLevel}}" [@fadeIn]
   2     [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.propertiesName }"
   3     [class.with-top-border]="property.isChildOfListOrMap"
   4     (click)="onClickPropertyRow(property, $event)">
   5     <!-- LEFT CELL -->
   6     <ng-container *ngIf="!isPropertyFEModel">
   7         <div class="table-cell" *ngIf="canBeDeclared" [ngClass]="{'filtered':property.name === propertyNameSearchText}"> <!-- simple children of complex type -->
   8             <checkbox [(checked)]="property.isSelected" [disabled]="property.isDisabled ||property.isDeclared || readonly" (checkedChange)="checkProperty.emit(property.propertiesName)"></checkbox>
   9             <div class="inner-cell-div" tooltip="{{property.name}}"><span>{{property.name}}</span></div>
  10         </div>
  11         <div class="table-cell" *ngIf="!canBeDeclared && !property.isChildOfListOrMap">{{property.name}}</div> <!-- simple children of complex type within map or list -->
  12         <div class="table-cell map-entry" *ngIf="property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP"><!-- map left cell -->
  13             <input [value]="property.mapKey" #mapKey (change)="mapKeyChanged.emit(mapKey.value)" [readonly]="readonly" type="text" [ngClass]="{'disabled':readonly}" />
  14         </div>
  15     </ng-container>
  16     <!-- RIGHT CELL OR FULL WIDTH CELL-->
  17     <ng-container *ngIf="propType == derivedPropertyTypes.SIMPLE || property.isDeclared || (property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP && property.schema.property.isSimpleType)">
  18         <div class="table-cell">
  19             <dynamic-element class="value-input"
  20                 pattern="validationUtils.getValidationPattern(property.type)"
  21                 [(value)]="property.valueObj"
  22                 [type]="property.isDeclared ? 'string' : property.type"
  23                 [name]="property.name"
  24                 [path]="property.propertiesName"
  25                 (valueChange)="valueChanged.emit();"
  26                 [readonly]="readonly||property.isDeclared||property.isDisabled"
  27             ></dynamic-element>
  28         </div>
  29     </ng-container>
  30     <ng-container *ngIf="!isPropertyFEModel && propType != derivedPropertyTypes.SIMPLE && !property.isDeclared"> <!-- right cell for complex elements, or list complex -->
  31         <div class="table-cell" *ngIf="propType == derivedPropertyTypes.COMPLEX">{{property.type | contentAfterLastDot }}</div>
  32         <div class="table-cell" *ngIf="propType == derivedPropertyTypes.MAP && !property.schema.property.isSimpleType">{{property.schema.property.type | contentAfterLastDot }}</div>
  33     </ng-container>
  34     <ng-container *ngIf="isPropertyFEModel && (propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isDeclared"><!-- empty, full-width table cell - for PropertyFEModel of type list or map -->
  35         <div class="table-cell empty"></div>
  36     </ng-container>
  37     <!-- ICONS: add, delete, and expand -->
  38     <ng-container *ngIf="!property.isDeclared">
  39             <a *ngIf="(propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isChildOfListOrMap" class="property-icon add-item" (click)="createNewChildProperty();" [ngClass]="{'disabled':readonly}">Add value to list</a>
  40             <span *ngIf="property.isChildOfListOrMap" (click)="deleteItem.emit(property);" class="property-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}"></span>
  41             <span *ngIf="!isPropertyFEModel && (propType == derivedPropertyTypes.COMPLEX || ((propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && hasChildren()))" (click)="expandChildById(propPath)" class="property-icon sprite-new round-expand-icon" [class.open]="propPath == expandedChildId"></span>
  42     </ng-container>
  43
  44 </div>
  45 <!-- FLAT CHILDREN -->
  46 <div class="flat-children-container" *ngIf="isPropertyFEModel && !property.isDeclared">
  47     <ng-container *ngFor="let prop of property.flattenedChildren | filterChildProperties: expandedChildId; trackBy:prop?.propertiesName">
  48         <dynamic-property
  49             [selectedPropertyId]="selectedPropertyId"
  50             [canBeDeclared]="prop.canBeDeclared"
  51             [property]="prop"
  52             [expandedChildId]="expandedChildId"
  53             [propertyNameSearchText]="propertyNameSearchText"
  54             [readonly]="readonly"
  55             (valueChanged)="childValueChanged(prop)"
  56             (mapKeyChanged)="removeValueFromParent(prop, $event)"
  57             (expandChild)="expandChildById($event)"
  58             (deleteItem)="deleteListOrMapItem($event)"
  59             (clickOnPropertyRow)="onClickPropertyRow($event)"
  60             (checkProperty)="checkedChange($event)"
  61             (addChildPropsToParent)="addChildProps($event, prop.propertiesName)"
  62             >
  63         </dynamic-property>
  64     </ng-container>
  65 </div>