catalog-ui/src/app/ng2/components/logic/attributes-table/dynamic-attribute/dynamic-attribute.component.html

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