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

   1 <!--
   2   ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
   3  * Licensed under the Apache License, Version 2.0 (the "License");
   4  * you may not use this file except in compliance with the License.
   5  * You may obtain a copy of the License at
   6  *
   7  *      http://www.apache.org/licenses/LICENSE-2.0
   8  *
   9  * Unless required by applicable law or agreed to in writing, software
  10  * distributed under the License is distributed on an "AS IS" BASIS,
  11  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12  * See the License for the specific language governing permissions and
  13  * limitations under the License.
  14  -->
  15
  16
  17 <div *ngIf="!property.hidden" class="dynamic-property-row nested-level-{{nestedLevel}}" [@fadeIn]
  18     [ngClass]="{'selected': selectedPropertyId && selectedPropertyId === property.propertiesName, 'readonly':  property.isDisabled || property.isDeclared || property.isToscaFunction()}"
  19     [class.with-top-border]="property.isChildOfListOrMap"
  20     (click)="onClickPropertyRow(property, $event)">
  21     <!-- LEFT CELL -->
  22     <ng-container *ngIf="!isPropertyFEModel">
  23         <div class="table-cell" *ngIf="canBeDeclared" [ngClass]="{'filtered':property.name === propertyNameSearchText}" [class.round-checkbox]="property.isDeclared"> <!-- simple children of complex type [@checkEffect]="property.isDeclared"-->
  24             <checkbox *ngIf="hasDeclareOption" [(checked)]="property.isSelected" [disabled]="property.isDisabled || property.isDeclared || readonly || checkboxDisabled" (checkedChange)="checkProperty.emit(property.propertiesName)" ></checkbox>
  25             <div class="inner-cell-div" tooltip="{{property.name}}"><span>{{property.name}}</span></div>
  26         </div>
  27         <div class="table-cell" *ngIf="!canBeDeclared && !property.isChildOfListOrMap">
  28             <checkbox *ngIf="nestedLevel >= 2" [(checked)]="property.isSelected" [disabled]="property.isDisabled || readonly || checkboxDisabled" (checkedChange)="toggleTosca.emit(property)" ></checkbox>
  29             <div class="inner-cell-div" tooltip="{{property.name}}"><span>{{property.name}}</span></div>
  30         </div> <!-- simple children of complex type within map or list -->
  31         <div class="table-cell map-entry" *ngIf="property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP && !property.mapInlist"><!-- map left cell -->
  32             <dynamic-element #mapKeyInput
  33                 class="value-input"
  34                 pattern="validationUtils.getValidationPattern(string)"
  35                 [value]="property.mapKey"
  36                 type="string"
  37                 [name]="property.name"
  38                 (elementChanged)="mapKeyChanged.emit($event.value)"
  39                 [readonly]="readonly"
  40                 [testId]="'prop-key-' + propertyTestsId"
  41             ></dynamic-element>
  42         </div>
  43     </ng-container>
  44     <!-- RIGHT CELL OR FULL WIDTH CELL-->
  45     <ng-container *ngIf="propType == derivedPropertyTypes.SIMPLE || property.isDeclared || (property.isToscaFunction() && !property.isChildOfListOrMap) || (property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP && property.schema.property.isSimpleType)">
  46         <div class="table-cell">
  47             <checkbox class="{{propType == derivedPropertyTypes.MAP ? 'inline-checkBox' : 'inline-checkBox-List'}}" *ngIf="hideCheckBox === false && (property.isChildOfListOrMap && property.schema.property.isSimpleType)" [(checked)]="property.isSelected" [disabled]="property.isDisabled || readonly || property.mapKey == '' || checkboxDisabled" (checkedChange)="toggleTosca.emit(property)" ></checkbox>
  48             <dynamic-element class="value-input"
  49                 pattern="validationUtils.getValidationPattern(property.type)"
  50                 [value]="(property.isDeclared || property.isToscaFunction()) ? property.value : property.valueObj"
  51                 [type]="property.isDeclared || property.isToscaFunction() ? 'string' : property.type"
  52                 [name]="property.name"
  53                 [path]="property.propertiesName"
  54                 (elementChanged)="onElementChanged($event)"
  55                 [readonly]="readonly || property.isDeclared || property.isDisabled || property.isToscaFunction() || disablePropertyValue"
  56                 [testId]="'prop-' + propertyTestsId"
  57                 [declared] = "property.isDeclared"
  58                 [constraints] = "constraints"
  59             ></dynamic-element>
  60         </div>
  61     </ng-container>
  62
  63     <ng-container *ngIf="!isPropertyFEModel && propType != derivedPropertyTypes.SIMPLE && !property.isDeclared && (!property.isToscaFunction() || (property.isToscaFunction() && property.isChildOfListOrMap && propType != derivedPropertyTypes.SIMPLE))"> <!-- right cell for complex elements, or list complex -->
  64         <div class="table-cell" *ngIf="propType == derivedPropertyTypes.COMPLEX">{{property.type | contentAfterLastDot }}</div>
  65         <div class="table-cell" *ngIf="propType == derivedPropertyTypes.MAP && !property.schema.property.isSimpleType">{{property.schema.property.type | contentAfterLastDot }}</div>
  66     </ng-container>
  67     <ng-container *ngIf="isPropertyFEModel && (propType == derivedPropertyTypes.LIST || propType == derivedPropertyTypes.MAP) && !property.isDeclared && (!property.isToscaFunction() || (property.isToscaFunction() && property.isChildOfListOrMap && propType != derivedPropertyTypes.SIMPLE))"><!-- empty, full-width table cell - for PropertyFEModel of type list or map -->
  68         <div class="table-cell empty"></div>
  69     </ng-container>
  70     <!-- ICONS: add, delete, and expand -->
  71     <ng-container *ngIf="(!property.isDeclared && !property.isToscaFunction()) || (property.isToscaFunction() && property.isChildOfListOrMap)">
  72             <a *ngIf="(propType == derivedPropertyTypes.LIST) && (!property.isChildOfListOrMap || property.mapInlist)" class="property-icon add-item" (click)="createNewChildProperty();" [class.disabled]="property.isSelected" [ngClass]="{'disabled':readonly || preventInsertItem(property)}" [attr.data-tests-id]="'add-to-list-' + propertyTestsId">Add value to list</a>
  73             <a *ngIf="(propType == derivedPropertyTypes.MAP) && (!property.isChildOfListOrMap || property.mapInlist)" class="property-icon add-item" (click)="createNewChildProperty();" [class.disabled]="property.isSelected" [ngClass]="{'disabled':readonly || preventInsertItem(property)}" [attr.data-tests-id]="'add-to-list-' + propertyTestsId">Add value to map</a>
  74             <span *ngIf="property.isChildOfListOrMap" (click)="deleteItem.emit(property);" class="property-icon sprite-new delete-item-icon" [ngClass]="{'disabled':readonly}" [attr.data-tests-id]="'delete-from-list-' + propertyTestsId"></span>
  75             <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]="expandedChildId.indexOf(propPath) == 0" [attr.data-tests-id]="'expand-' + propertyTestsId" ></span>
  76     </ng-container>
  77
  78 </div>
  79 <!-- FLAT CHILDREN -->
  80 <div class="flat-children-container" *ngIf="isPropertyFEModel && !property.isDeclared && (!property.isToscaFunction() || (property.isToscaFunction() && property.isChildOfListOrMap && propType != derivedPropertyTypes.SIMPLE))">
  81     <ng-container *ngFor="let prop of property.flattenedChildren | filterChildProperties: expandedChildId; trackBy:prop?.propertiesName">
  82         <dynamic-property
  83             [selectedPropertyId]="selectedPropertyId"
  84             [hasDeclareOption]="hasDeclareOption"
  85             [disablePropertyValue]="disablePropertyValue"
  86             [canBeDeclared]="hasDeclareOption && prop.canBeDeclared"
  87             [property]="prop"
  88             [rootProperty]="rootProperty || property"
  89             [expandedChildId]="expandedChildId"
  90             [propertyNameSearchText]="propertyNameSearchText"
  91             [readonly]="readonly"
  92             [hasChildren]="getHasChildren(prop)"
  93             (propertyChanged)="childValueChanged(prop)"
  94             (mapKeyChanged)="updateChildKeyInParent(prop, $event)"
  95             (expandChild)="expandChildById($event)"
  96             (deleteItem)="deleteListOrMapItem($event)"
  97             (clickOnPropertyRow)="onClickPropertyRow($event)"
  98             (checkProperty)="checkedChange($event)"
  99             (addChildPropsToParent)="addChildProps($event, prop.propertiesName)"
 100             (toggleTosca)="toggleToscaFunction($event)"
 101             >
 102         </dynamic-property>
 103     </ng-container>
 104 </div>