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   <ng-container *ngIf="isTypeSimple(type.name)">
  30     <ul *ngIf="isExpanded">
  31       <li class="input-value">
  32         <ng-container *ngIf="isViewOnly">
  33           {{valueObjRef}}<em class="empty-value" *ngIf="valueObjRef !== false && !valueObjRef">empty</em>
  34         </ng-container>
  35         <input *ngIf="!isViewOnly" [type]="getSimpleValueInputType()" name="value"
  36                [(ngModel)]="valueObjRef"
  37                (ngModelChange)="onValueChange($event)"
  38         />
  39       </li>
  40     </ul>
  41   </ng-container>
  42   <ng-container *ngIf="isTypeComplex(type.name)" >
  43       <ul *ngIf="isExpanded">
  44         <ng-container *ngFor="let property of this.type.properties">
  45           <app-input-list-item
  46               [name]="property.name"
  47               [type]="getDataType(property.type)"
  48               [dataTypeMap]="dataTypeMap"
  49               [valueObjRef]="valueObjRef[property.name]"
  50               [schema]="property.schema"
  51               [nestingLevel]="nestingLevel + 1"
  52               [isViewOnly]="isViewOnly"
  53               [allowDeletion]="allowDeletion"
  54               (onValueChange)="onPropertyValueChange($event)">
  55           </app-input-list-item>
  56         </ng-container>
  57       </ul>
  58   </ng-container>
  59   <ng-container *ngIf="isTypeList(type.name)">
  60     <ul *ngIf="isExpanded">
  61       <ng-container *ngFor="let value1 of valueObjRef; index as i; trackBy: trackByIndex">
  62         <li class="input-value" *ngIf="isTypeSimple(schema.property.type)">
  63           <ng-container *ngIf="isViewOnly">
  64             {{valueObjRef[i]}}
  65           </ng-container>
  66           <input type="text" *ngIf="!isViewOnly"
  67                  [(ngModel)]="valueObjRef[i]" (ngModelChange)="onListValueChange()" />
  68           <span class="sprite-new delete-btn" *ngIf="!isViewOnly" (click)="onListItemDelete(i)"></span>
  69         </li>
  70         <app-input-list-item *ngIf="!isTypeSimple(schema.property.type)"
  71             [name]="i+''"
  72             [type]="getDataType(schema.property.type)"
  73             [dataTypeMap]="dataTypeMap"
  74             [valueObjRef]="valueObjRef[i]"
  75             [schema]="schema"
  76             [nestingLevel]="nestingLevel + 1"
  77             [listIndex]="i"
  78             [isListChild]="true"
  79             [isViewOnly]="isViewOnly"
  80             [allowDeletion]="allowDeletion"
  81             (onValueChange)="onPropertyValueChange($event)"
  82             (onChildListItemDelete)="onListItemDelete($event)">
  83         </app-input-list-item>
  84       </ng-container>
  85       <li class="input-value" *ngIf="!isViewOnly">
  86         <a class="add-btn" (click)="addListElement()">{{'INPUT_LIST_ADD_LIST_ENTRY' | translate}}</a>
  87       </li>
  88     </ul>
  89   </ng-container>
  90   <ng-container *ngIf="isTypeMap(type.name)">
  91     <ul *ngIf="isExpanded">
  92       <ng-container *ngFor="let key of getObjectEntries(valueObjRef); index as i">
  93         <li class="input-value" *ngIf="isTypeSimple(schema.property.type)">
  94           <label class="input-label">{{key}}:</label>
  95           <ng-container *ngIf="isViewOnly">
  96             {{valueObjRef[key]}}
  97           </ng-container>
  98           <input type="text" *ngIf="!isViewOnly" [(ngModel)]="valueObjRef[key]" (ngModelChange)="onMapValueChange()"/>
  99           <span class="sprite-new delete-btn" *ngIf="!isViewOnly" (click)="onMapKeyDelete(key)"></span>
 100         </li>
 101         <app-input-list-item
 102             *ngIf="!isTypeSimple(schema.property.type)"
 103             [name]="key"
 104             [type]="getDataType(schema.property.type)"
 105             [dataTypeMap]="dataTypeMap"
 106             [valueObjRef]="valueObjRef[key]"
 107             [schema]="schema"
 108             [isMapChild]="true"
 109             [nestingLevel]="nestingLevel + 1"
 110             [isViewOnly]="isViewOnly"
 111             [allowDeletion]="allowDeletion"
 112             (onValueChange)="onPropertyValueChange($event)"
 113             (onDelete)="onMapKeyDelete($event)">
 114         </app-input-list-item>
 115       </ng-container>
 116       <li class="input-value" *ngIf="!isViewOnly">
 117         <input type="text" [(ngModel)]="mapEntryName" placeholder="{{ 'INPUT_LIST_MAP_KEY_PLACEHOLDER' | translate }}"/>
 118         <a class="add-btn" (click)="addMapEntry()">{{ 'INPUT_LIST_ADD_MAP_ENTRY' | translate }}</a>
 119       </li>
 120     </ul>
 121   </ng-container>
 122 </li>