Support complex types in interface operation inputs

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

diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.html
new file mode 100644 (file)
index 0000000..0449da7
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.html
@@ -0,0 +1,119 @@
+<!--
+  ~ -
+  ~  ============LICENSE_START=======================================================
+  ~  Copyright (C) 2022 Nordix Foundation.
+  ~  ================================================================================
+  ~  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.
+  ~
+  ~  SPDX-License-Identifier: Apache-2.0
+  ~  ============LICENSE_END=========================================================
+  -->
+
+<li [class.root]="isRoot()">
+  <span class="input-info">
+    <em class="sprite-new round-expand-icon" [class.open]="isExpanded" (click)="expandAndCollapse()"></em>
+    <label class="input-label">{{name}}:</label> <em data-tests-id="input-type">{{resolveType()}}</em>
+    <span class="sprite-new delete-btn" *ngIf="showInputDelete()" (click)="onInputDelete()"></span>
+    <span class="sprite-new delete-btn" *ngIf="showListItemDelete()" (click)="onChildListItemDelete()"></span>
+  </span>
+  <ng-container *ngIf="isTypeSimple(type.name)">
+    <ul *ngIf="isExpanded">
+      <li class="input-value">
+        <ng-container *ngIf="isViewOnly">
+          {{valueObjRef}}<em class="empty-value" *ngIf="!valueObjRef">empty</em>
+        </ng-container>
+        <input *ngIf="!isViewOnly" [type]="getSimpleValueInputType()" name="value"
+               [(ngModel)]="valueObjRef"
+               (ngModelChange)="onValueChange($event)"
+        />
+      </li>
+    </ul>
+  </ng-container>
+  <ng-container *ngIf="isTypeComplex(type.name)" >
+      <ul *ngIf="isExpanded">
+        <ng-container *ngFor="let property of this.type.properties">
+          <app-input-list-item
+              [name]="property.name"
+              [type]="getDataType(property.type)"
+              [dataTypeMap]="dataTypeMap"
+              [valueObjRef]="valueObjRef[property.name]"
+              [schema]="property.schema"
+              [nestingLevel]="nestingLevel + 1"
+              [isViewOnly]="isViewOnly"
+              (onValueChange)="onPropertyValueChange($event)">
+          </app-input-list-item>
+        </ng-container>
+      </ul>
+  </ng-container>
+  <ng-container *ngIf="isTypeList(type.name)">
+    <ul *ngIf="isExpanded">
+      <ng-container *ngFor="let value1 of valueObjRef; index as i; trackBy: trackByIndex">
+        <li class="input-value" *ngIf="isTypeSimple(schema.property.type)">
+          <ng-container *ngIf="isViewOnly">
+            {{valueObjRef[i]}}
+          </ng-container>
+          <input type="text" *ngIf="!isViewOnly"
+                 [(ngModel)]="valueObjRef[i]" (ngModelChange)="onListValueChange()" />
+          <span class="sprite-new delete-btn" *ngIf="!isViewOnly" (click)="onListItemDelete(i)"></span>
+        </li>
+        <app-input-list-item *ngIf="!isTypeSimple(schema.property.type)"
+            [name]="i+''"
+            [type]="getDataType(schema.property.type)"
+            [dataTypeMap]="dataTypeMap"
+            [valueObjRef]="valueObjRef[i]"
+            [schema]="schema"
+            [nestingLevel]="nestingLevel + 1"
+            [listIndex]="i"
+            [isListChild]="true"
+            [isViewOnly]="isViewOnly"
+            (onValueChange)="onPropertyValueChange($event)"
+            (onChildListItemDelete)="onListItemDelete($event)">
+        </app-input-list-item>
+      </ng-container>
+      <li class="input-value" *ngIf="!isViewOnly">
+        <a class="add-btn" (click)="addListElement()">{{'INPUT_LIST_ADD_LIST_ENTRY' | translate}}</a>
+      </li>
+    </ul>
+  </ng-container>
+  <ng-container *ngIf="isTypeMap(type.name)">
+    <ul *ngIf="isExpanded">
+      <ng-container *ngFor="let key of getObjectEntries(valueObjRef); index as i">
+        <li class="input-value" *ngIf="isTypeSimple(schema.property.type)">
+          <label class="input-label">{{key}}:</label>
+          <ng-container *ngIf="isViewOnly">
+            {{valueObjRef[key]}}
+          </ng-container>
+          <input type="text" *ngIf="!isViewOnly" [(ngModel)]="valueObjRef[key]" (ngModelChange)="onMapValueChange()"/>
+          <span class="sprite-new delete-btn" *ngIf="!isViewOnly" (click)="onMapKeyDelete(key)"></span>
+        </li>
+        <app-input-list-item
+            *ngIf="!isTypeSimple(schema.property.type)"
+            [name]="key"
+            [type]="getDataType(schema.property.type)"
+            [dataTypeMap]="dataTypeMap"
+            [valueObjRef]="valueObjRef[key]"
+            [schema]="schema"
+            [isMapChild]="true"
+            [nestingLevel]="nestingLevel + 1"
+            [isViewOnly]="isViewOnly"
+            (onValueChange)="onPropertyValueChange($event)"
+            (onDelete)="onMapKeyDelete($event)">
+        </app-input-list-item>
+      </ng-container>
+      <li class="input-value" *ngIf="!isViewOnly">
+        <input type="text" [(ngModel)]="mapEntryName" placeholder="{{ 'INPUT_LIST_MAP_KEY_PLACEHOLDER' | translate }}"/>
+        <a class="add-btn" (click)="addMapEntry()">{{ 'INPUT_LIST_ADD_MAP_ENTRY' | translate }}</a>
+      </li>
+    </ul>
+  </ng-container>
+</li>
\ No newline at end of file