catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.html

   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                             [customToscaFunctions]="customToscaFunctions"
  51                             (onValidityChange)="onToscaFunctionValidityChange($event)">
  52             </tosca-function>
  53           </div>
  54           <div *ngIf="!componentInstanceMap">
  55             <tosca-function
  56                             [property]="property"
  57                             [allowClear]="false"
  58                             [customToscaFunctions]="customToscaFunctions"
  59                             (onValidityChange)="onToscaFunctionValidityChange($event)">
  60             </tosca-function>
  61           </div>
  62         </li>
  63       </ul>
  64     </div>
  65   </ng-container>
  66
  67   <div *ngIf="!isToscaFunction">
  68     <ng-container *ngIf="isTypeSimple(type.name)">
  69       <ul *ngIf="isExpanded">
  70         <li class="input-value">
  71           <ng-container *ngIf="isViewOnly">
  72             {{valueObjRef}}<em class="empty-value" *ngIf="valueObjRef !== false && !valueObjRef">{{'GENERAL_LABEL_EMPTY' | translate | lowercase}}</em>
  73           </ng-container>
  74           <input *ngIf="!isViewOnly && isTypeLiteral(type.name)" type="text" name="value"
  75                  [(ngModel)]="valueObjRef" (ngModelChange)="onValueChange($event)"/>
  76           <input *ngIf="!isViewOnly && isTypeNumber(type.name)" type="number"
  77                  [(ngModel)]="valueObjRef" (ngModelChange)="onValueChange($event)"/>
  78           <select *ngIf="!isViewOnly && isTypeBoolean(type.name)" [(ngModel)]="valueObjRef" (ngModelChange)="onValueChange($event)">
  79             <option [value]="true">{{'GENERAL_LABEL_TRUE' | translate}}</option>
  80             <option [value]="false">{{'GENERAL_LABEL_FALSE' | translate}}</option>
  81           </select>
  82         </li>
  83       </ul>
  84     </ng-container>
  85     <ng-container *ngIf="isTypeRange(type.name)">
  86         <ul *ngIf="isExpanded">
  87             <ng-container *ngFor="let value1 of [0, 1]; index as i">
  88                 <li class="input-value">
  89                     <ng-container *ngIf="isViewOnly">
  90                         {{valueObjRef[i]}}
  91                     </ng-container>
  92                     <input type="text" *ngIf="!isViewOnly"
  93                     [(ngModel)]="valueObjRef[i]" (ngModelChange)="onListValueChange()" />
  94                 </li>
  95             </ng-container>
  96         </ul>
  97     </ng-container>
  98     <ng-container *ngIf="isTypeComplex(type.name)" >
  99         <ul *ngIf="isExpanded">
 100           <ng-container *ngFor="let property of this.type.properties">
 101             <app-input-list-item
 102                 [name]="property.name"
 103                 [type]="getDataType(property.type)"
 104                 [dataTypeMap]="dataTypeMap"
 105                 [valueObjRef]="valueObjRef ? valueObjRef[property.name] : undefined"
 106                 [schema]="property.schema"
 107                 [toscaFunction]="getToscaFunction(property.name)"
 108                 [nestingLevel]="nestingLevel + 1"
 109                 [isViewOnly]="isViewOnly"
 110                 [showToscaFunctionOption]="showToscaFunctionOption"
 111                 [allowDeletion]="allowDeletion"
 112                 (onValueChange)="onPropertyValueChange($event)">
 113             </app-input-list-item>
 114           </ng-container>
 115         </ul>
 116     </ng-container>
 117     <ng-container *ngIf="isTypeList(type.name)">
 118       <ul *ngIf="isExpanded">
 119         <ng-container *ngFor="let value1 of valueObjRef; index as i; trackBy: trackByIndex">
 120           <li class="input-value" *ngIf="isTypeSimple(schema.property.type)">
 121             <ng-container *ngIf="isViewOnly">
 122               {{valueObjRef[i]}}
 123             </ng-container>
 124             <input type="text" *ngIf="!isViewOnly"
 125                   [(ngModel)]="valueObjRef[i]" (ngModelChange)="onListValueChange()" />
 126             <span class="sprite-new delete-btn" *ngIf="!isViewOnly" (click)="onListItemDelete(i)"></span>
 127           </li>
 128           <app-input-list-item *ngIf="!isTypeSimple(schema.property.type)"
 129               [name]="i+''"
 130               [type]="getDataType(schema.property.type)"
 131               [dataTypeMap]="dataTypeMap"
 132               [valueObjRef]="valueObjRef[i]"
 133               [schema]="buildSchemaGroupProperty()"
 134               [toscaFunction]="getToscaFunction(i)"
 135               [nestingLevel]="nestingLevel + 1"
 136               [listIndex]="i"
 137               [isListChild]="true"
 138               [isViewOnly]="isViewOnly"
 139               [allowDeletion]="allowDeletion"
 140               (onValueChange)="onPropertyValueChange($event)"
 141               (onChildListItemDelete)="onListItemDelete($event)">
 142           </app-input-list-item>
 143         </ng-container>
 144         <li class="input-value" *ngIf="!isViewOnly">
 145           <a class="add-btn" (click)="addListElement()">{{'INPUT_LIST_ADD_LIST_ENTRY' | translate}}</a>
 146         </li>
 147       </ul>
 148     </ng-container>
 149     <ng-container *ngIf="isTypeMap(type.name)">
 150       <ul *ngIf="isExpanded">
 151         <ng-container *ngFor="let key of getObjectEntries(valueObjRef); index as i">
 152           <li class="input-value" *ngIf="isTypeSimple(schema.property.type)">
 153             <label class="input-label">{{key}}:</label>
 154             <ng-container *ngIf="isViewOnly">
 155               {{valueObjRef[key]}}
 156             </ng-container>
 157             <input type="text" *ngIf="!isViewOnly" [(ngModel)]="valueObjRef[key]" (ngModelChange)="onMapValueChange()"/>
 158             <span class="sprite-new delete-btn" *ngIf="!isViewOnly" (click)="onMapKeyDelete(key)"></span>
 159           </li>
 160           <app-input-list-item
 161               *ngIf="!isTypeSimple(schema.property.type)"
 162               [name]="key"
 163               [type]="getDataType(schema.property.type)"
 164               [dataTypeMap]="dataTypeMap"
 165               [valueObjRef]="valueObjRef[key]"
 166               [schema]="buildSchemaGroupProperty()"
 167               [toscaFunction]="getToscaFunction(key)"
 168               [isMapChild]="true"
 169               [nestingLevel]="nestingLevel + 1"
 170               [isViewOnly]="isViewOnly"
 171               [allowDeletion]="allowDeletion"
 172               (onValueChange)="onPropertyValueChange($event)"
 173               (onDelete)="onMapKeyDelete($event)">
 174           </app-input-list-item>
 175         </ng-container>
 176         <li class="input-value" *ngIf="!isViewOnly">
 177           <input type="text" [(ngModel)]="mapEntryName" placeholder="{{ 'INPUT_LIST_MAP_KEY_PLACEHOLDER' | translate }}"/>
 178           <a class="add-btn" (click)="addMapEntry()">{{ 'INPUT_LIST_ADD_MAP_ENTRY' | translate }}</a>
 179         </li>
 180       </ul>
 181     </ng-container>
 182   </div>
 183 </li>