Provide tosca function as map primitive type entry values in composition view 03/132903/3
authorimamSidero <imam.hussain@est.tech>
Wed, 11 Jan 2023 18:13:25 +0000 (18:13 +0000)
committerMichael Morris <michael.morris@est.tech>
Fri, 13 Jan 2023 13:22:26 +0000 (13:22 +0000)
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

catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less
catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html
catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts
catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html
catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts
catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base.less
catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html
catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal.less

index d84ec82..5c89511 100644 (file)
         </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]]"
                 <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"
index 9c2984e..1714178 100644 (file)
 .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
index ceb2fa0..ce8b997 100644 (file)
 '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,
index 8ee253e..74a06ba 100644 (file)
@@ -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()">
index 6b43cb0..f697eed 100644 (file)
@@ -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){
index 6f19d5e..62cd697 100644 (file)
@@ -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>
index 84018fd..9fdc8c1 100644 (file)
@@ -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;
                 }
index 8682dd7..1c1c0c9 100644 (file)
@@ -1,6 +1,6 @@
 .sdc-edit-property-container {
     .scrollbar-container{
-        height: 415px;
+        height: 475px;
         width: 830px;
         .perfect-scrollbar;
     }
index d605cb9..48a85e4 100644 (file)
                         <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"
                             <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"