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