Provide tosca function as map primitive type entry values in composition view

Providing the capability to add tosca function as the primitive type entry values of map in composition view

Issue-ID: SDC-4319
Signed-off-by: Imam hussain <imam.hussain@est.tech>
Change-Id: I5cf67bc94ac5c72be6a962e07160329cd07d302c

10 files changed, 145 insertions, 16 deletions

diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
index d84ec821de..5c895115e5 100644
--- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
+++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
@@ -41,9 +41,14 @@
         </div>
         <div data-ng-if="!isSchemaTypeDataType" class="i-sdc-form-item map-item-field" data-ng-class="{error:(parentFormObj['mapValue'+fieldsPrefixName+$index].$dirty && parentFormObj['mapValue'+fieldsPrefixName+$index].$invalid)}">
             <label class="i-sdc-form-label required">Value</label>
-        
+            <form class="temp-form">
+                <input type="radio" name="hasToscaFunction-{{fieldsPrefixName}}-{{$index}}" data-ng-checked="{{showToscaFunction[$index] == false}}" data-ng-click="onEnableTosca(false,$index)"/> 
+                Value
+                <input type="radio" name="hasToscaFunction-{{fieldsPrefixName}}-{{$index}}" data-ng-checked="{{showToscaFunction[$index]}}" data-ng-click="onEnableTosca(true,$index)" ng-disabled="mapKeys[$index] == '' || mapKeys[$index] == null"/> 
+                {{'TOSCA_FUNCTION_LABEL' | translate}}
+            </form>
             <input class="i-sdc-form-input"
-                   ng-if="!constraints && !((schemaProperty.simpleType||schemaProperty.type) == 'boolean')"
+                   ng-if="!constraints && !((schemaProperty.simpleType||schemaProperty.type) == 'boolean') && showToscaFunction[$index] == false"
                    data-ng-readonly="readOnly"
                    data-ng-model="valueObjRef[mapKeys[$index]]"
                    type="text"
@@ -58,7 +63,7 @@
                    autofocus />
             <select class="i-sdc-form-select"
                     data-tests-id="mapValue{{fieldsPrefixName}}{{$index}}"
-                    ng-if="!constraints && (schemaProperty.simpleType||schemaProperty.type) == 'boolean'"
+                    ng-if="!constraints && (schemaProperty.simpleType||schemaProperty.type) == 'boolean' && showToscaFunction[$index] == false"
                     data-ng-disabled="readOnly"
                     name="mapValue{{fieldsPrefixName}}{{$index}}"
                     data-ng-model="valueObjRef[mapKeys[$index]]"
@@ -66,6 +71,16 @@
                 <option value="true">true</option>
                 <option value="false">false</option>
             </select>
+            <div data-ng-if="showToscaFunction[$index]" class="div-tosca-function">
+                <tosca-function [property]="parentProperty"
+                                [component-instance-map]="componentInstanceMap"
+                                [allow-clear]="false"
+                                [composition-map]="true"
+                                [composition-map-key]="mapKeys[$index]"
+                                (on-valid-function)="onGetToscaFunction($event,mapKeys[$index])"
+                >
+                </tosca-function>
+            </div>
 
 
             <select class="i-sdc-form-select"
diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less
index 9c2984e3ce..1714178c9f 100644
--- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less
+++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less
@@ -90,3 +90,15 @@
 .type-map {
     display: inline-block;
 }
+
+.tosca-function {
+    max-width: 165px;
+}
+
+.tosca-error {
+    max-width: 165px;
+}
+
+.temp-form {
+    all: unset;
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
index ceb2fa0bb9..ce8b997035 100644
--- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
+++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
@@ -24,11 +24,16 @@
 'use strict';
 import {ValidationUtils, PROPERTY_TYPES} from "app/utils";
 import {DataTypesService} from "app/services";
-import {SchemaProperty} from "app/models";
+import {SchemaProperty, PropertyModel} from "app/models";
+import {InstanceFeDetails} from "app/models/instance-fe-details";
+import {ToscaGetFunction} from "app/models/tosca-get-function";
+import {SubPropertyToscaFunction} from "app/models/sub-property-tosca-function";
 
 export interface ITypeMapScope extends ng.IScope {
     parentFormObj:ng.IFormController;
     schemaProperty:SchemaProperty;
+    parentProperty:PropertyModel;
+    componentInstanceMap: Map<string, InstanceFeDetails>;
     isMapKeysUnique:boolean;
     isSchemaTypeDataType:boolean;
     valueObjRef:any;
@@ -41,6 +46,7 @@ export interface ITypeMapScope extends ng.IScope {
     maxLength:number;
     constraints:string[];
     showAddBtn: boolean;
+    showToscaFunction: Array<boolean>;
 
     getValidationPattern(type:string):RegExp;
     validateIntRange(value:string):boolean;
@@ -49,6 +55,9 @@ export interface ITypeMapScope extends ng.IScope {
     addMapItemFields():void;
     parseToCorrectType(objectOfValues:any, locationInObj:string, type:string):void;
     getNumber(num:number):Array<any>;
+    validateSubToscaFunction(key:string):boolean;
+    onEnableTosca(toscaFlag:boolean,index:number);
+    onGetToscaFunction(toscaGetFunction: ToscaGetFunction, key:string);
 }
 
 
@@ -62,6 +71,7 @@ export class TypeMapDirective implements ng.IDirective {
 
     scope = {
         valueObjRef: '=',//ref to map object in the parent value object
+        componentInstanceMap: '=',
         schemaProperty: '=',//get the schema.property object
         parentFormObj: '=',//ref to parent form (get angular form object)
         fieldsPrefixName: '=',//prefix for form fields names
@@ -69,7 +79,8 @@ export class TypeMapDirective implements ng.IDirective {
         defaultValue: '@',//this map default value
         maxLength: '=',
         constraints: '=',
-        showAddBtn: '=?'
+        showAddBtn: '=?',
+        parentProperty: '='
     };
 
     restrict = 'E';
@@ -82,6 +93,20 @@ export class TypeMapDirective implements ng.IDirective {
         scope.showAddBtn = angular.isDefined(scope.showAddBtn) ? scope.showAddBtn : true;
         scope.MapKeyValidationPattern = this.MapKeyValidationPattern;
         scope.isMapKeysUnique = true;
+        if (scope.mapKeys === undefined) {
+            scope.mapKeys = Object.keys(scope.valueObjRef);
+        }
+        scope.showToscaFunction = new Array(scope.mapKeys.length);
+        scope.mapKeys.forEach((key, index) => {
+            scope.showToscaFunction[index] = false;
+            if (scope.parentProperty.subPropertyToscaFunctions != null) {
+                scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => {
+                    if (SubPropertyToscaFunction.subPropertyPath.indexOf(key) != -1) {
+                        scope.showToscaFunction[index] = true;
+                    }
+                });
+            }
+        });
 
         //reset valueObjRef and mapKeys when schema type is changed
         scope.$watchCollection('schemaProperty.type', (newData:any):void => {
@@ -153,8 +178,19 @@ export class TypeMapDirective implements ng.IDirective {
         };
 
         scope.deleteMapItem = (index:number):void=> {
+            const keyToChange = scope.mapKeys[index];
             delete scope.valueObjRef[scope.mapKeys[index]];
             scope.mapKeys.splice(index, 1);
+            scope.showToscaFunction.splice(index, 1);
+            if (scope.parentProperty.subPropertyToscaFunctions != null) {
+                let subToscaFunctionList : Array<SubPropertyToscaFunction> = [];
+                scope.parentProperty.subPropertyToscaFunctions.forEach((SubPropertyToscaFunction, index) => {
+                    if (SubPropertyToscaFunction.subPropertyPath.indexOf(keyToChange) == -1) {
+                        subToscaFunctionList.push(SubPropertyToscaFunction);
+                    }
+                });
+                scope.parentProperty.subPropertyToscaFunctions = subToscaFunctionList;
+            }
             if (!scope.mapKeys.length) {//only when user removes all pairs of key-value fields - put the default
                 if (scope.mapDefaultValue) {
                     angular.copy(scope.mapDefaultValue, scope.valueObjRef);
@@ -163,9 +199,45 @@ export class TypeMapDirective implements ng.IDirective {
             }
         };
 
+        scope.onEnableTosca = (toscaFlag:boolean,flagIndex:number):void => {
+            scope.showToscaFunction[flagIndex] = toscaFlag;
+            scope.valueObjRef[scope.mapKeys[flagIndex]] = null;
+            if (!toscaFlag) {
+                if (scope.parentProperty.subPropertyToscaFunctions != null) {
+                    let subToscaFunctionList : Array<SubPropertyToscaFunction> = [];
+                    scope.parentProperty.subPropertyToscaFunctions.forEach((SubPropertyToscaFunction, index) => {
+                        if (SubPropertyToscaFunction.subPropertyPath.indexOf(scope.mapKeys[flagIndex]) == -1) {
+                            subToscaFunctionList.push(SubPropertyToscaFunction);
+                        }
+                    });
+                    scope.parentProperty.subPropertyToscaFunctions = subToscaFunctionList;
+                }
+            }
+        };
+
+        scope.onGetToscaFunction = (toscaGetFunction: ToscaGetFunction, key:string): void => {
+            if (scope.parentProperty.subPropertyToscaFunctions != null) {
+                scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => {
+                    if (SubPropertyToscaFunction.subPropertyPath.indexOf(key) != -1) {
+                        SubPropertyToscaFunction.toscaFunction = toscaGetFunction;
+                        return;
+                    }
+                });
+
+            }
+            if (scope.parentProperty.subPropertyToscaFunctions == null){
+                scope.parentProperty.subPropertyToscaFunctions = [];
+            }
+            let subPropertyToscaFunction = new SubPropertyToscaFunction();
+            subPropertyToscaFunction.toscaFunction = toscaGetFunction;
+            subPropertyToscaFunction.subPropertyPath = [key];
+            scope.parentProperty.subPropertyToscaFunctions.push(subPropertyToscaFunction);
+        }
+
         scope.addMapItemFields = ():void => {
             scope.valueObjRef[''] = null;
             scope.mapKeys = Object.keys(scope.valueObjRef);
+            scope.showToscaFunction.push(false);
         };
 
         scope.parseToCorrectType = (objectOfValues:any, locationInObj:string, type:string):void => {
@@ -173,6 +245,17 @@ export class TypeMapDirective implements ng.IDirective {
                 objectOfValues[locationInObj] = JSON.parse(objectOfValues[locationInObj]);
             }
         }
+
+        scope.validateSubToscaFunction = (key:string):boolean => {
+            if (scope.parentProperty.subPropertyToscaFunctions != null) {
+                scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => {
+                    if (SubPropertyToscaFunction.subPropertyPath.indexOf(key) != -1) {
+                        return true;
+                    }
+                });
+            }
+            return false;
+        }
     };
 
     public static factory = (DataTypesService:DataTypesService,
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html
index 8ee253e5dc..74a06baa53 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html
@@ -34,6 +34,8 @@
       <app-tosca-get-function [property]="property" [toscaGetFunction]="toscaFunction"
                               [componentInstanceMap]="componentInstanceMap"
                               [functionType]="toscaFunctionTypeForm.value"
+                              [compositionMap]="compositionMap"
+                              [compositionMapKey]="compositionMapKey"
                               (onValidityChange)="onGetFunctionValidityChange($event)"></app-tosca-get-function>
     </div>
     <div *ngIf="isYamlFunctionSelected()">
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts
index 6b43cb014d..f697eed027 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts
@@ -44,6 +44,8 @@ export class ToscaFunctionComponent implements OnInit, OnChanges {
     @Input() property: PropertyBEModel;
     @Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>();
     @Input() allowClear: boolean = true;
+    @Input() compositionMap: boolean = false;
+    @Input() compositionMapKey: string = "";
     @Output() onValidFunction: EventEmitter<ToscaGetFunction> = new EventEmitter<ToscaGetFunction>();
     @Output() onValidityChange: EventEmitter<ToscaFunctionValidationEvent> = new EventEmitter<ToscaFunctionValidationEvent>();
 
@@ -98,6 +100,17 @@ export class ToscaFunctionComponent implements OnInit, OnChanges {
     }
 
     private initToscaFunction(): void {
+        if (this.compositionMap && this.property.subPropertyToscaFunctions) {
+            let keyToFind = [this.compositionMapKey];
+            let subPropertyToscaFunction = this.property.subPropertyToscaFunctions.find(subPropertyToscaFunction => this.areEqual(subPropertyToscaFunction.subPropertyPath, keyToFind));
+
+                if (subPropertyToscaFunction){
+	                this.toscaFunction = subPropertyToscaFunction.toscaFunction;
+                    this.toscaFunctionForm.setValue(this.toscaFunction);
+                    this.toscaFunctionTypeForm.setValue(this.toscaFunction.type);
+                }
+                return;
+        }
 	    if (this.property instanceof PropertyDeclareAPIModel && this.property.subPropertyToscaFunctions && (<PropertyDeclareAPIModel> this.property).propertiesName){
 	        let propertiesPath = (<PropertyDeclareAPIModel> this.property).propertiesName.split("#");
             if (propertiesPath.length > 1){
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html
index 6f19d5eff4..62cd697f8c 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html
@@ -32,7 +32,7 @@
         <option *ngFor="let value of propertyDropdownList" [ngValue]="value">{{value.propertyLabel}}</option>
       </select>
     </div>
-    <div *ngIf="dropDownErrorMsg">{{dropDownErrorMsg}}</div>
+    <div *ngIf="dropDownErrorMsg" class="tosca-error">{{dropDownErrorMsg}}</div>
   </form>
   <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader>
 </div>
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts
index 84018fd546..9fdc8c19aa 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts
@@ -45,6 +45,8 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges {
     @Input() toscaGetFunction: ToscaGetFunction;
     @Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>();
     @Input() functionType: ToscaGetFunctionType;
+    @Input() compositionMap: boolean;
+    @Input() compositionMapKey: string;
     @Output() onValidFunction: EventEmitter<ToscaGetFunction> = new EventEmitter<ToscaGetFunction>();
     @Output() onValidityChange: EventEmitter<ToscaGetFunctionValidationEvent> = new EventEmitter<ToscaGetFunctionValidationEvent>();
 
@@ -262,10 +264,10 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges {
 
     private propertyTypeToString() {
 	    if (this.isSubProperty()){
-            if (this.typeHasSchema(this.property.type) && this.property instanceof PropertyDeclareAPIModel && 
-                    (<PropertyDeclareAPIModel> this.property).input instanceof DerivedFEProperty) {
-                if(this.isComplexType(this.property.schemaType)){
-                    return this.property.input.type;
+            if ((this.typeHasSchema(this.property.type) && this.property instanceof PropertyDeclareAPIModel && 
+                    (<PropertyDeclareAPIModel> this.property).input instanceof DerivedFEProperty) || this.compositionMap) {
+                if(this.isComplexType(this.property.schemaType) && !this.compositionMap){
+                    return (<PropertyDeclareAPIModel> this.property).input.type;
                 }else{
                     return this.property.schema.property.type;
                 }
@@ -375,9 +377,9 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges {
 
     private hasSameType(property: PropertyBEModel | AttributeBEModel): boolean {
         if (this.typeHasSchema(this.property.type)) {
-            if (this.property instanceof PropertyDeclareAPIModel && (<PropertyDeclareAPIModel> this.property).input instanceof DerivedFEProperty) {
-                if(this.isComplexType(this.property.schemaType)){
-                    return property.type === this.property.input.type;
+            if ((this.property instanceof PropertyDeclareAPIModel && (<PropertyDeclareAPIModel> this.property).input instanceof DerivedFEProperty) || this.compositionMap) {
+                if(this.isComplexType(this.property.schemaType) && !this.compositionMap){
+                    return property.type === (<PropertyDeclareAPIModel> this.property).input.type;
                 }else{
                     return property.type === this.property.schema.property.type;
                 }
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base.less b/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base.less
index 8682dd79fe..1c1c0c9c52 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base.less
+++ b/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base.less
@@ -1,6 +1,6 @@
 .sdc-edit-property-container {
     .scrollbar-container{
-        height: 415px;
+        height: 475px;
         width: 830px;
         .perfect-scrollbar;
     }
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
index d605cb95e8..48a85e4fcc 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
+++ b/catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
@@ -146,7 +146,7 @@
                         <input type="radio" name="hasGetFunctionValue"
                                ng-model="editPropertyModel.hasGetFunctionValue"
                                ng-value="false"
-                               ng-change="onValueTypeChange()"/> Value
+                               ng-change="onValueTypeChange()"/> Entries
                         <input type="radio" name="hasGetFunctionValue"
                                ng-model="editPropertyModel.hasGetFunctionValue"
                                ng-value="true"
@@ -176,6 +176,8 @@
                             <div ng-switch-when="map">
                                 <type-map value-obj-ref="myValue"
                                           schema-property="editPropertyModel.property.schema.property"
+                                          parent-property="editPropertyModel.property"
+                                          component-instance-map="componentInstanceMap"
                                           parent-form-obj="forms.editForm"
                                           fields-prefix-name="currentPropertyIndex"
                                           read-only="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isVnfConfiguration"
diff --git a/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal.less b/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal.less
index 15e30af4ee..02b7612671 100644
--- a/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal.less
+++ b/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal.less
@@ -1,6 +1,6 @@
 .sdc-edit-property-container {
     .scrollbar-container{
-        height: 415px;
+        height: 475px;
         width: 830px;
         .perfect-scrollbar;
     }