1e0804eb04a3223bf97226b7fb77f6624c8b3161
[sdc.git] /
1 <!--
2   ~ -
3   ~  ============LICENSE_START=======================================================
4   ~  Copyright (C) 2022 Nordix Foundation.
5   ~  ================================================================================
6   ~  Licensed under the Apache License, Version 2.0 (the "License");
7   ~  you may not use this file except in compliance with the License.
8   ~  You may obtain a copy of the License at
9   ~
10   ~       http://www.apache.org/licenses/LICENSE-2.0
11   ~
12   ~  Unless required by applicable law or agreed to in writing, software
13   ~  distributed under the License is distributed on an "AS IS" BASIS,
14   ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15   ~  See the License for the specific language governing permissions and
16   ~  limitations under the License.
17   ~
18   ~  SPDX-License-Identifier: Apache-2.0
19   ~  ============LICENSE_END=========================================================
20   -->
21
22 <li [class.root]="isRoot()">
23   <span class="input-info">
24     <em class="sprite-new round-expand-icon" [class.open]="isExpanded" (click)="expandAndCollapse()"></em>
25     <label class="input-label">{{name}}:</label> <em data-tests-id="input-type">{{resolveType()}}</em>
26     <span class="sprite-new delete-btn" *ngIf="showInputDelete()" (click)="onInputDelete()"></span>
27     <span class="sprite-new delete-btn" *ngIf="showListItemDelete()" (click)="onChildListItemDelete()"></span>
28   </span>
29
30   <ng-container *ngIf="isExpanded && showToscaFunctionOption">
31     <form>
32       <fieldset [disabled]="isViewOnly" >
33         <input type="radio" name="hasGetFunctionValue"
34               [(ngModel)]="isToscaFunction"
35               [value]="false"
36               (change)="onValueTypeChange()"/> Value
37         <input type="radio" name="hasGetFunctionValue"
38               [(ngModel)]="isToscaFunction"
39               [value]="true"/> {{'TOSCA_FUNCTION_LABEL' | translate}}
40       </fieldset>
41     </form>
42     <div *ngIf="isToscaFunction">
43       <ul>
44         <li>
45           <div *ngIf="componentInstanceMap">
46             <tosca-function
47                             [property]="property"
48                             [allowClear]="false"
49                             [componentInstanceMap]="componentInstanceMap"
50                             (onValidityChange)="onToscaFunctionValidityChange($event)">
51             </tosca-function>
52           </div>
53           <div *ngIf="!componentInstanceMap">
54             <tosca-function
55                             [property]="property"
56                             [allowClear]="false"
57                             (onValidityChange)="onToscaFunctionValidityChange($event)">
58             </tosca-function>
59           </div>
60         </li>
61       </ul>
62     </div>
63   </ng-container>
64
65   <div *ngIf="!isToscaFunction">
66     <ng-container *ngIf="isTypeSimple(type.name)">
67       <ul *ngIf="isExpanded">
68         <li class="input-value">
69           <ng-container *ngIf="isViewOnly">
70             {{valueObjRef}}<em class="empty-value" *ngIf="valueObjRef !== false && !valueObjRef">empty</em>
71           </ng-container>
72           <input *ngIf="!isViewOnly" [type]="getSimpleValueInputType()" name="value"
73                 [(ngModel)]="valueObjRef"
74                 (ngModelChange)="onValueChange($event)"
75           />
76         </li>
77       </ul>
78     </ng-container>
79     <ng-container *ngIf="isTypeRange(type.name)">
80         <ul *ngIf="isExpanded">
81             <ng-container *ngFor="let value1 of [0, 1]; index as i">
82                 <li class="input-value">
83                     <ng-container *ngIf="isViewOnly">
84                         {{valueObjRef[i]}}
85                     </ng-container>
86                     <input type="text" *ngIf="!isViewOnly"
87                     [(ngModel)]="valueObjRef[i]" (ngModelChange)="onListValueChange()" />
88                 </li>
89             </ng-container>
90         </ul>
91     </ng-container>
92     <ng-container *ngIf="isTypeComplex(type.name)" >
93         <ul *ngIf="isExpanded">
94           <ng-container *ngFor="let property of this.type.properties">
95             <app-input-list-item
96                 [name]="property.name"
97                 [type]="getDataType(property.type)"
98                 [dataTypeMap]="dataTypeMap"
99                 [valueObjRef]="valueObjRef[property.name]"
100                 [schema]="property.schema"
101                 [nestingLevel]="nestingLevel + 1"
102                 [isViewOnly]="isViewOnly"
103                 [showToscaFunctionOption]="showToscaFunctionOption"
104                 [allowDeletion]="allowDeletion"
105                 (onValueChange)="onPropertyValueChange($event)">
106             </app-input-list-item>
107           </ng-container>
108         </ul>
109     </ng-container>
110     <ng-container *ngIf="isTypeList(type.name)">
111       <ul *ngIf="isExpanded">
112         <ng-container *ngFor="let value1 of valueObjRef; index as i; trackBy: trackByIndex">
113           <li class="input-value" *ngIf="isTypeSimple(schema.property.type)">
114             <ng-container *ngIf="isViewOnly">
115               {{valueObjRef[i]}}
116             </ng-container>
117             <input type="text" *ngIf="!isViewOnly"
118                   [(ngModel)]="valueObjRef[i]" (ngModelChange)="onListValueChange()" />
119             <span class="sprite-new delete-btn" *ngIf="!isViewOnly" (click)="onListItemDelete(i)"></span>
120           </li>
121           <app-input-list-item *ngIf="!isTypeSimple(schema.property.type)"
122               [name]="i+''"
123               [type]="getDataType(schema.property.type)"
124               [dataTypeMap]="dataTypeMap"
125               [valueObjRef]="valueObjRef[i]"
126               [schema]="schema"
127               [nestingLevel]="nestingLevel + 1"
128               [listIndex]="i"
129               [isListChild]="true"
130               [isViewOnly]="isViewOnly"
131               [allowDeletion]="allowDeletion"
132               (onValueChange)="onPropertyValueChange($event)"
133               (onChildListItemDelete)="onListItemDelete($event)">
134           </app-input-list-item>
135         </ng-container>
136         <li class="input-value" *ngIf="!isViewOnly">
137           <a class="add-btn" (click)="addListElement()">{{'INPUT_LIST_ADD_LIST_ENTRY' | translate}}</a>
138         </li>
139       </ul>
140     </ng-container>
141     <ng-container *ngIf="isTypeMap(type.name)">
142       <ul *ngIf="isExpanded">
143         <ng-container *ngFor="let key of getObjectEntries(valueObjRef); index as i">
144           <li class="input-value" *ngIf="isTypeSimple(schema.property.type)">
145             <label class="input-label">{{key}}:</label>
146             <ng-container *ngIf="isViewOnly">
147               {{valueObjRef[key]}}
148             </ng-container>
149             <input type="text" *ngIf="!isViewOnly" [(ngModel)]="valueObjRef[key]" (ngModelChange)="onMapValueChange()"/>
150             <span class="sprite-new delete-btn" *ngIf="!isViewOnly" (click)="onMapKeyDelete(key)"></span>
151           </li>
152           <app-input-list-item
153               *ngIf="!isTypeSimple(schema.property.type)"
154               [name]="key"
155               [type]="getDataType(schema.property.type)"
156               [dataTypeMap]="dataTypeMap"
157               [valueObjRef]="valueObjRef[key]"
158               [schema]="schema"
159               [isMapChild]="true"
160               [nestingLevel]="nestingLevel + 1"
161               [isViewOnly]="isViewOnly"
162               [allowDeletion]="allowDeletion"
163               (onValueChange)="onPropertyValueChange($event)"
164               (onDelete)="onMapKeyDelete($event)">
165           </app-input-list-item>
166         </ng-container>
167         <li class="input-value" *ngIf="!isViewOnly">
168           <input type="text" [(ngModel)]="mapEntryName" placeholder="{{ 'INPUT_LIST_MAP_KEY_PLACEHOLDER' | translate }}"/>
169           <a class="add-btn" (click)="addMapEntry()">{{ 'INPUT_LIST_ADD_MAP_ENTRY' | translate }}</a>
170         </li>
171       </ul>
172     </ng-container>
173   </div>
174 </li>