Support Tosca Function For Operation Implmentation Properties

Issue-ID: SDC-4170
Signed-off-by: JvD_Ericsson <jeff.van.dam@est.tech>
Change-Id: Ie90626e11885e522fba91e7604c0ed15cc0c7d3a

7 files changed, 209 insertions, 91 deletions

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
index 1441a9e85b..fce8e7ea4f 100644
--- 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
@@ -26,97 +26,136 @@
     <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 !== false && !valueObjRef">empty</em>
-        </ng-container>
-        <input *ngIf="!isViewOnly" [type]="getSimpleValueInputType()" name="value"
-               [(ngModel)]="valueObjRef"
-               (ngModelChange)="onValueChange($event)"
-        />
-      </li>
-    </ul>
+
+  <ng-container *ngIf="isExpanded && showToscaFunctionOption">
+    <form>
+      <fieldset [disabled]="isViewOnly" >
+        <input type="radio" name="hasGetFunctionValue"
+              [(ngModel)]="isToscaFunction"
+              [value]="false"
+              (change)="onValueTypeChange()"/> Value
+        <input type="radio" name="hasGetFunctionValue"
+              [(ngModel)]="isToscaFunction"
+              [value]="true"/> {{'TOSCA_FUNCTION_LABEL' | translate}}
+      </fieldset>
+    </form>
+    <div *ngIf="isToscaFunction">
+      <ul>
+        <li>
+          <div *ngIf="componentInstanceMap">
+            <tosca-function
+                            [property]="property"
+                            [allowClear]="false"
+                            [componentInstanceMap]="componentInstanceMap"
+                            (onValidityChange)="onToscaFunctionValidityChange($event)">
+            </tosca-function>
+          </div>
+          <div *ngIf="!componentInstanceMap">
+            <tosca-function
+                            [property]="property"
+                            [allowClear]="false"
+                            (onValidityChange)="onToscaFunctionValidityChange($event)">
+            </tosca-function>
+          </div>
+        </li>
+      </ul>
+    </div>
   </ng-container>
-  <ng-container *ngIf="isTypeComplex(type.name)" >
+
+  <div *ngIf="!isToscaFunction">
+    <ng-container *ngIf="isTypeSimple(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)"
+        <li class="input-value">
+          <ng-container *ngIf="isViewOnly">
+            {{valueObjRef}}<em class="empty-value" *ngIf="valueObjRef !== false && !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"
+                [showToscaFunctionOption]="showToscaFunctionOption"
+                [allowDeletion]="allowDeletion"
+                (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[property.name]"
-              [schema]="property.schema"
+              [valueObjRef]="valueObjRef[i]"
+              [schema]="schema"
               [nestingLevel]="nestingLevel + 1"
+              [listIndex]="i"
+              [isListChild]="true"
               [isViewOnly]="isViewOnly"
               [allowDeletion]="allowDeletion"
-              (onValueChange)="onPropertyValueChange($event)">
+              (onValueChange)="onPropertyValueChange($event)"
+              (onChildListItemDelete)="onListItemDelete($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 class="input-value" *ngIf="!isViewOnly">
+          <a class="add-btn" (click)="addListElement()">{{'INPUT_LIST_ADD_LIST_ENTRY' | translate}}</a>
         </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"
-            [allowDeletion]="allowDeletion"
-            (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>
+      </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"
+              [allowDeletion]="allowDeletion"
+              (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>
-        <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"
-            [allowDeletion]="allowDeletion"
-            (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>
+      </ul>
+    </ng-container>
+  </div>
 </li>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.spec.ts
index b7e34e5c32..0c7cf4d672 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.spec.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.spec.ts
@@ -25,6 +25,7 @@ import {InputListItemComponent} from './input-list-item.component';
 import {TranslateModule} from '../../../../../../shared/translator/translate.module';
 import {FormsModule} from '@angular/forms';
 import {DataTypeModel} from '../../../../../../../models/data-types';
+import {ToscaFunctionModule} from '../../../../../properties-assignment/tosca-function/tosca-function.module';
 
 describe('InputListItemComponent', () => {
   let component: InputListItemComponent;
@@ -35,7 +36,8 @@ describe('InputListItemComponent', () => {
       declarations: [ InputListItemComponent ],
       imports: [
         TranslateModule,
-        FormsModule
+        FormsModule,
+        ToscaFunctionModule
       ]
     })
     .compileComponents();
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts
index 7fed5d9e88..4612ca6d60 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.ts
@@ -24,6 +24,9 @@ import {DataTypeModel} from '../../../../../../../models/data-types';
 import {SchemaPropertyGroupModel} from '../../../../../../../models/schema-property';
 import {DerivedPropertyType, PropertyBEModel} from '../../../../../../../models/properties-inputs/property-be-model';
 import {PROPERTY_DATA, PROPERTY_TYPES} from '../../../../../../../utils/constants';
+import {ToscaFunction} from '../../../../../../../models/tosca-function';
+import {ToscaFunctionValidationEvent} from "../../../../../../../ng2/pages/properties-assignment/tosca-function/tosca-function.component";
+import {InstanceFeDetails} from "../../../../../../../models/instance-fe-details";
 
 @Component({
   selector: 'app-input-list-item',
@@ -40,15 +43,20 @@ export class InputListItemComponent implements OnInit {
   @Input() nestingLevel: number;
   @Input() isListChild: boolean = false;
   @Input() isMapChild: boolean = false;
+  @Input() showToscaFunctionOption: boolean = false;
   @Input() listIndex: number;
   @Input() isViewOnly: boolean;
   @Input() allowDeletion: boolean = false;
+  @Input() toscaFunction: ToscaFunction;
+  @Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map();
   @Output('onValueChange') onValueChangeEvent: EventEmitter<any> = new EventEmitter<any>();
   @Output('onDelete') onDeleteEvent: EventEmitter<string> = new EventEmitter<string>();
   @Output('onChildListItemDelete') onChildListItemDeleteEvent: EventEmitter<number> = new EventEmitter<number>();
 
   isExpanded: boolean = false;
   mapEntryName: string;
+  isToscaFunction: boolean = false;
+  property: PropertyBEModel;
 
   ngOnInit() {
     if (!this.nestingLevel) {
@@ -59,6 +67,18 @@ export class InputListItemComponent implements OnInit {
         this.initEmptyPropertyInValueObjRef(property);
       });
     }
+
+    this.property = new PropertyBEModel();
+    this.property.type = this.type.name;
+    if (this.schema) {
+      this.property.schema = this.schema;
+      this.property.schemaType = this.schema.property.type;
+    }
+    if (this.toscaFunction) {
+      this.property.toscaFunction = this.toscaFunction;
+      this.valueObjRef = this.toscaFunction.value;
+      this.isToscaFunction = true;
+    }
   }
 
   private initEmptyPropertyInValueObjRef(property: PropertyBEModel) {
@@ -109,7 +129,29 @@ export class InputListItemComponent implements OnInit {
     return this.dataTypeMap.get(type);
   }
 
+  onValueTypeChange () {
+    if ( !this.isToscaFunction ) {
+      this.onValueChange(this.valueObjRef);
+    }
+  }
+
+  onToscaFunctionValidityChange(validationEvent: ToscaFunctionValidationEvent):void {
+    if (validationEvent.isValid) {
+      this.emitValueChangeEvent(validationEvent.toscaFunction, true);
+      return;
+    }
+    this.emitValueChangeEvent(undefined, true);
+  }
+
   onValueChange(value: any): void {
+    if (this.isNumber(this.type.name)) {
+      this.emitValueChangeEvent(this.parseNumber(value));
+      return;
+    }
+    if (this.type.name == PROPERTY_TYPES.BOOLEAN) {
+      this.emitValueChangeEvent(this.parseBoolean(value));
+      return;
+    }
     this.emitValueChangeEvent(value);
   }
 
@@ -122,11 +164,13 @@ export class InputListItemComponent implements OnInit {
     this.emitValueChangeEvent(this.valueObjRef);
   }
 
-  private emitValueChangeEvent(value: any) {
-    this.onValueChangeEvent.emit({
+  private emitValueChangeEvent(value: any, isToscaFunction=false) {
+    let emitValue = {
       name: this.name,
-      value: value
-    });
+      value: value,
+      isToscaFunction:isToscaFunction
+    };
+    this.onValueChangeEvent.emit(emitValue);
   }
 
   isRoot(): boolean {
@@ -161,6 +205,9 @@ export class InputListItemComponent implements OnInit {
   }
 
   addListElement() {
+    if (!this.valueObjRef) {
+      this.valueObjRef = [];
+    }
     if (this.isTypeSimple(this.schema.property.type)) {
       this.valueObjRef.push('');
     } else if (this.isTypeComplex(this.schema.property.type) || this.isTypeMap(this.schema.property.type)) {
@@ -214,9 +261,16 @@ export class InputListItemComponent implements OnInit {
   }
 
   getSimpleValueInputType() {
+    if (this.isNumber(this.type.name)){
+      return 'number';
+    }
     return 'text';
   }
 
+  isNumber(type: string): boolean {
+    return type === PROPERTY_TYPES.INTEGER || type === PROPERTY_TYPES.FLOAT;
+  }
+
   private parseBoolean(value: any) {
     if (value === 'true') {
       return true;
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html
index 273fc7eac1..9a2d1f3936 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.html
@@ -31,8 +31,11 @@
         [dataTypeMap]="dataTypeMap"
         [valueObjRef]="input.value"
         [schema]="input.schema"
+        [toscaFunction]="input.toscaFunction"
+        [showToscaFunctionOption]="showToscaFunctionOption"
         [isViewOnly]="isViewOnly"
         [allowDeletion]="allowDeletion"
+        [componentInstanceMap]="componentInstanceMap"
         (onValueChange)="onValueChange($event)"
         (onDelete)="onDelete($event)">
     </app-input-list-item>
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.less b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.less
index b9784f9564..31eee568df 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.less
@@ -21,7 +21,6 @@
 
 .input-tree {
     overflow: scroll;
-    max-height: 300px;
     max-width: 100%;
 
     ul {
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts
index 99cfd21566..c98f2bb9af 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.spec.ts
@@ -26,6 +26,8 @@ import {TranslateModule} from '../../../../../shared/translator/translate.module
 import {Component, Input} from '@angular/core';
 import {DataTypeModel} from '../../../../../../models/data-types';
 import {TranslateService} from '../../../../../shared/translator/translate.service';
+import {ToscaFunction} from '../../../../../../models/tosca-function';
+import {InstanceFeDetails} from "../../../../../../models/instance-fe-details";
 
 @Component({selector: 'app-input-list-item', template: ''})
 class InputListItemStubComponent {
@@ -36,6 +38,9 @@ class InputListItemStubComponent {
   @Input() schema: any;
   @Input() allowDeletion: any;
   @Input() isViewOnly: boolean;
+  @Input() toscaFunction: ToscaFunction;
+  @Input() showToscaFunctionOption: boolean;
+  @Input() componentInstanceMap: Map<string, InstanceFeDetails> = null;
 }
 
 const translateServiceMock: Partial<TranslateService> = {
@@ -50,7 +55,9 @@ describe('InputListComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ InputListComponent, InputListItemStubComponent ],
-      imports: [ TranslateModule ],
+      imports: [
+        TranslateModule
+      ],
       providers: [
         { provide: TranslateService, useValue: translateServiceMock }
       ]
diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts
index 832a40e841..fa06c3eabc 100644
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list.component.ts
@@ -24,6 +24,7 @@ import {InputOperationParameter} from "../../../../../../models/interfaceOperati
 import {DataTypeModel} from "../../../../../../models/data-types";
 import {DerivedPropertyType} from "../../../../../../models/properties-inputs/property-be-model";
 import {PROPERTY_DATA, PROPERTY_TYPES} from "../../../../../../utils/constants";
+import {InstanceFeDetails} from "../../../../../../models/instance-fe-details";
 
 @Component({
   selector: 'input-list',
@@ -47,7 +48,10 @@ export class InputListComponent {
   @Input() isViewOnly: boolean;
   @Input() title: string;
   @Input() emptyMessage: string;
+  @Input() showToscaFunctionOption: boolean = false;
   @Input() allowDeletion: boolean = false;
+  @Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map();
+  @Output('onInputsValidityChange') inputsValidityChangeEvent: EventEmitter<boolean> = new EventEmitter<boolean>();
   @Output('onValueChange') inputValueChangeEvent: EventEmitter<InputOperationParameter> = new EventEmitter<InputOperationParameter>();
   @Output('onDelete') inputDeleteEvent: EventEmitter<string> = new EventEmitter<string>();
 
@@ -116,7 +120,17 @@ export class InputListComponent {
   onValueChange($event: any) {
     const inputOperationParameter = this._inputs.find(input => input.name == $event.name);
     if (inputOperationParameter) {
-      inputOperationParameter.value = $event.value;
+      inputOperationParameter.valid = true;
+      if ($event.isToscaFunction) {
+        inputOperationParameter.toscaFunction = $event.value;
+        if (!inputOperationParameter.toscaFunction) {
+          inputOperationParameter.valid = false;
+        }
+      } else {
+        inputOperationParameter.value = $event.value;
+        inputOperationParameter.toscaFunction = null;
+      }
+      this.inputsValidityChangeEvent.emit(this._inputs.every(input => input.valid === true));
       this.inputValueChangeEvent.emit(new InputOperationParameter(inputOperationParameter));
     }
   }