From 0977894d34b43eba0846b23dd5bc4f186ca7edc2 Mon Sep 17 00:00:00 2001 From: imamSidero Date: Thu, 8 Jun 2023 16:07:43 +0100 Subject: Provide tosca function capability to complex type fields in composition view Tosca function capability is provided to all complex type fields in composition view Issue-ID: SDC-4528 Signed-off-by: Imam hussain Change-Id: I4742c2a46ac7a9ed0fd47677aac5b4be9ad612a1 --- .../data-type-fields-structure.html | 185 ++++++++++++--------- .../data-type-fields-structure.less | 12 ++ .../data-type-fields-structure.ts | 104 +++++++++++- .../type-list/type-list-directive.html | 5 +- .../type-list/type-list-directive.ts | 60 ++++--- .../type-map/type-map-directive.html | 4 +- .../property-types/type-map/type-map-directive.ts | 72 ++++---- 7 files changed, 294 insertions(+), 148 deletions(-) (limited to 'catalog-ui/src/app/directives') diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html index 78aa7bc7f4..afbd520532 100644 --- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html +++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html @@ -30,93 +30,116 @@ -
- - - -
-
-
- +
+
+
+ + Value + + {{'TOSCA_FUNCTION_LABEL' | translate}} +
-
- +
+ + +
+
+ + +
-
-
- +
+
+ +
+
+ +
+
+
+ - - - - - - - - - - - - - - - - - - - - + type="text" + name="{{fieldsPrefixName+property.name}}" + data-ng-pattern="getValidationPattern((property.simpleType||property.type))" + data-ng-model-options="{ debounce: 200 }" + data-ng-change="inputOnValueChange(property,valueObjRef[property.name])" + autofocus + /> + -
- - - +
+ + + +
diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less index abca49d7a3..de1f423fcb 100644 --- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less +++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less @@ -92,3 +92,15 @@ } } +.temp-form { + all: unset; + margin-left: 6px !important; +} +.tosca-box { + display: block !important; + all : unset; +} +.tosca-parent { + margin-left: 10px; +} + diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts index 30c7b06733..37ca36a371 100644 --- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts +++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts @@ -22,11 +22,14 @@ * Created by obarda on 1/27/2016. */ 'use strict'; -import { DataTypesMap, PropertyModel } from 'app/models'; +import { DataTypesMap, DerivedFEProperty, PropertyDeclareAPIModel, PropertyModel } from 'app/models'; import { DataTypePropertyModel } from 'app/models/data-type-properties'; import { DataTypesService } from 'app/services'; import { ValidationUtils } from 'app/utils'; -import {InstanceFeDetails} from "app/models/instance-fe-details"; +import { PropertiesUtils } from "../../../ng2/pages/properties-assignment/services/properties.utils"; +import { InstanceFeDetails } from "app/models/instance-fe-details"; +import { SubPropertyToscaFunction } from 'app/models/sub-property-tosca-function'; +import { ToscaGetFunction } from 'app/models/tosca-get-function'; import * as _ from 'lodash'; export interface IDataTypeFieldsStructureScope extends ng.IScope { @@ -47,12 +50,20 @@ export interface IDataTypeFieldsStructureScope extends ng.IScope { dataTypesService: DataTypesService; constraints: string[]; isService:boolean; + showToscaFunction: Map; + subpropertyMap: Map; + complexToscapath: string; expandAndCollapse(): void; getValidationPattern(type: string): RegExp; validateIntRange(value: string): boolean; onValueChange(propertyName: string, type: string): void; - inputOnValueChange(property: any): void; + inputOnValueChange(property: any, value: any): void; + onEnableTosca(toscaFlag:boolean,propertyName:string); + verifyTosca(propertyName: string) : boolean; + getSubProperty(propertyName: string) : PropertyDeclareAPIModel; + getToscaPathValue(propertyName: string) : Array; + onGetToscaFunction(toscaGetFunction: ToscaGetFunction, propertyName:string); } export class DataTypeFieldsStructureDirective implements ng.IDirective { @@ -70,7 +81,8 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective { defaultValue: '@', types: '=', expandByDefault: '=', - isService: '=' + isService: '=', + complexToscapath: '=' }; restrict = 'E'; @@ -78,13 +90,15 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective { constructor(private DataTypesService: DataTypesService, private PropertyNameValidationPattern: RegExp, - private ValidationUtils: ValidationUtils) { + private ValidationUtils: ValidationUtils, + private PropertiesUtils: PropertiesUtils) { } public static factory = (DataTypesService: DataTypesService, PropertyNameValidationPattern: RegExp, - ValidationUtils: ValidationUtils) => { - return new DataTypeFieldsStructureDirective(DataTypesService, PropertyNameValidationPattern, ValidationUtils); + ValidationUtils: ValidationUtils, + PropertiesUtils: PropertiesUtils) => { + return new DataTypeFieldsStructureDirective(DataTypesService, PropertyNameValidationPattern, ValidationUtils, PropertiesUtils); } template = (): string => { return require('./data-type-fields-structure.html'); @@ -96,7 +110,20 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective { scope.$watchCollection('[typeName,fieldsPrefixName]', (newData: any): void => { this.rerender(scope); }); - + let childProp = this.PropertiesUtils.convertAddPropertyBAToPropertyFE(scope.parentProperty); + scope.subpropertyMap = new Map(); + scope.showToscaFunction = new Map(); + childProp.flattenedChildren.forEach(prop => { + scope.showToscaFunction.set(prop.name,false); + if (scope.parentProperty.subPropertyToscaFunctions != null) { + scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => { + if (SubPropertyToscaFunction.subPropertyPath.toString() == prop.name) { + scope.showToscaFunction.set(prop.name,true); + } + }); + } + scope.subpropertyMap.set(prop.name,new PropertyDeclareAPIModel(childProp, prop)); + }); scope.expandAndCollapse = (): void => { if (!scope.expanded) { this.initDataOnScope(scope, $attr); @@ -130,6 +157,65 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective { || scope.onValueChange(property.name, (property.simpleType || property.type))); return value; }; + + scope.onEnableTosca = (toscaFlag:boolean,key:string):void => { + scope.showToscaFunction.set(key,toscaFlag); + scope.valueObjRef[key] = ""; + if (!toscaFlag) { + if (scope.parentProperty.subPropertyToscaFunctions != null) { + let subToscaFunctionList : Array = []; + scope.parentProperty.subPropertyToscaFunctions.forEach((SubPropertyToscaFunction, index) => { + if (SubPropertyToscaFunction.subPropertyPath.toString() != key) { + subToscaFunctionList.push(SubPropertyToscaFunction); + } + }); + scope.parentProperty.subPropertyToscaFunctions = subToscaFunctionList; + } + } + }; + + scope.verifyTosca = (propName:string) : boolean => { + return scope.showToscaFunction.get(propName); + } + + scope.getSubProperty = (propertyName: string) : PropertyDeclareAPIModel => { + return scope.subpropertyMap.get(propertyName); + } + + scope.getToscaPathValue = (propertyName: string) : Array => { + const parentObj : PropertyDeclareAPIModel = scope.subpropertyMap.get(propertyName); + if (parentObj.input instanceof DerivedFEProperty) { + return parentObj.input.toscaPath; + } + return [propertyName]; + } + + scope.onGetToscaFunction = (toscaGetFunction: ToscaGetFunction, key:string): void => { + let toscaPath = key; + scope.valueObjRef[key] = ""; + if (scope.parentProperty.subPropertyToscaFunctions != null) { + let toscaFlag : boolean = true + scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => { + if (SubPropertyToscaFunction.subPropertyPath.toString() == toscaPath) { + SubPropertyToscaFunction.toscaFunction = toscaGetFunction; + toscaFlag = false; + return; + } + }); + if (toscaFlag) { + let subPropertyToscaFunction = new SubPropertyToscaFunction(); + subPropertyToscaFunction.toscaFunction = toscaGetFunction; + subPropertyToscaFunction.subPropertyPath = [toscaPath]; + scope.parentProperty.subPropertyToscaFunctions.push(subPropertyToscaFunction); + } + } else { + let subPropertyToscaFunction = new SubPropertyToscaFunction(); + subPropertyToscaFunction.toscaFunction = toscaGetFunction; + subPropertyToscaFunction.subPropertyPath = [toscaPath]; + scope.parentProperty.subPropertyToscaFunctions = [subPropertyToscaFunction]; + } + } + } // public types=Utils.Constants.PROPERTY_DATA.TYPES; @@ -191,4 +277,4 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective { } } -DataTypeFieldsStructureDirective.factory.$inject = ['Sdc.Services.DataTypesService', 'PropertyNameValidationPattern', 'ValidationUtils']; +DataTypeFieldsStructureDirective.factory.$inject = ['Sdc.Services.DataTypesService', 'PropertyNameValidationPattern', 'ValidationUtils','PropertiesUtils']; diff --git a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html index 1455f2742f..109c9a9ec9 100644 --- a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html +++ b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html @@ -15,12 +15,13 @@ -->
-
+
@@ -28,7 +29,7 @@
-
+ Value diff --git a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts index 40a29da5fb..18c46b4bac 100644 --- a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts +++ b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts @@ -47,6 +47,7 @@ export interface ITypeListScope extends ng.IScope { constraints:string[]; types:DataTypesMap; isService:boolean; + complexToscapath: string; getValidationPattern(type:string):RegExp; validateIntRange(value:string):boolean; @@ -85,7 +86,8 @@ export class TypeListDirective implements ng.IDirective { maxLength: '=', constraints: '=', types: '=', - isService: '=' + isService: '=', + complexToscapath: '=' }; restrict = 'E'; @@ -123,22 +125,26 @@ export class TypeListDirective implements ng.IDirective { link = (scope:ITypeListScope, element:any, $attr:any) => { scope.propertyNameValidationPattern = this.PropertyNameValidationPattern; scope.stringSchema = this.stringSchema; - if (scope.valueObjRef == null || scope.valueObjRef.length == 0) { + if ((scope.valueObjRef == null || scope.valueObjRef.length == 0) && scope.complexToscapath == null) { scope.valueObjRef = []; scope.valueObjRef.push(""); } - scope.showToscaFunction = new Array(scope.valueObjRef.length); - scope.valueObjRef.forEach((value, index) => { - scope.showToscaFunction[index] = false; - let key : string = index.toString(); - if (scope.parentProperty.subPropertyToscaFunctions != null) { - scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => { - if (SubPropertyToscaFunction.subPropertyPath.indexOf(key) != -1) { - scope.showToscaFunction[index] = true; - } - }); - } - }); + if (scope.valueObjRef != null && scope.valueObjRef.length > 0) { + scope.showToscaFunction = new Array(scope.valueObjRef.length); + scope.valueObjRef.forEach((value, index) => { + scope.showToscaFunction[index] = false; + if (scope.parentProperty.subPropertyToscaFunctions != null) { + let key : string = index.toString(); + scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => { + if (SubPropertyToscaFunction.subPropertyPath.toString() == key) { + scope.showToscaFunction[index] = true; + return; + } + }); + } + }); + } + //reset valueObjRef when schema type is changed scope.$watchCollection('schemaProperty.type', (newData:any):void => { scope.isSchemaTypeDataType = this.DataTypesService.isDataTypeForSchemaType(scope.schemaProperty); @@ -174,6 +180,7 @@ export class TypeListDirective implements ng.IDirective { } } scope.valueObjRef.push(newVal); + scope.showToscaFunction = scope.showToscaFunction || []; scope.showToscaFunction.push(false); scope.listNewItem.value = ""; }; @@ -214,7 +221,7 @@ export class TypeListDirective implements ng.IDirective { if (scope.parentProperty.subPropertyToscaFunctions != null) { let subToscaFunctionList : Array = []; scope.parentProperty.subPropertyToscaFunctions.forEach((SubPropertyToscaFunction, index) => { - if (SubPropertyToscaFunction.subPropertyPath.indexOf(key) == -1) { + if (SubPropertyToscaFunction.subPropertyPath.toString() != key) { subToscaFunctionList.push(SubPropertyToscaFunction); } }); @@ -226,21 +233,26 @@ export class TypeListDirective implements ng.IDirective { scope.onGetToscaFunction = (toscaGetFunction: ToscaGetFunction, index:number): void => { let key:string = index.toString(); if (scope.parentProperty.subPropertyToscaFunctions != null) { + let toscaFlag : boolean = true; scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => { - if (SubPropertyToscaFunction.subPropertyPath.indexOf(key) != -1) { + if (SubPropertyToscaFunction.subPropertyPath.toString() == key) { SubPropertyToscaFunction.toscaFunction = toscaGetFunction; + toscaFlag = false; return; } }); - - } - if (scope.parentProperty.subPropertyToscaFunctions == null){ - scope.parentProperty.subPropertyToscaFunctions = []; + if (toscaFlag) { + let subPropertyToscaFunction = new SubPropertyToscaFunction(); + subPropertyToscaFunction.toscaFunction = toscaGetFunction; + subPropertyToscaFunction.subPropertyPath = [key]; + scope.parentProperty.subPropertyToscaFunctions.push(subPropertyToscaFunction); + } + } else { + let subPropertyToscaFunction = new SubPropertyToscaFunction(); + subPropertyToscaFunction.toscaFunction = toscaGetFunction; + subPropertyToscaFunction.subPropertyPath = [key]; + scope.parentProperty.subPropertyToscaFunctions = [subPropertyToscaFunction]; } - let subPropertyToscaFunction = new SubPropertyToscaFunction(); - subPropertyToscaFunction.toscaFunction = toscaGetFunction; - subPropertyToscaFunction.subPropertyPath = [key]; - scope.parentProperty.subPropertyToscaFunctions.push(subPropertyToscaFunction); } }; 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 f53f5cf205..fad6838d01 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,7 +41,7 @@
- + Value @@ -120,7 +120,7 @@
Add
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 098b28936b..875a49cbd2 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 @@ -49,6 +49,7 @@ export interface ITypeMapScope extends ng.IScope { showToscaFunction: boolean[]; types: DataTypesMap; isService: boolean; + complexToscapath: string; getValidationPattern(type: string): RegExp; validateIntRange(value: string): boolean; @@ -77,7 +78,8 @@ export class TypeMapDirective implements ng.IDirective { showAddBtn: '=?', parentProperty: '=', types: '=', - isService: '=' + isService: '=', + complexToscapath: '=' }; restrict = 'E'; @@ -182,26 +184,30 @@ export class TypeMapDirective implements ng.IDirective { const currentKey = currentKeySet[index]; const existingKeyIndex = currentKeySet.indexOf(newKey); if (existingKeyIndex > -1 && existingKeyIndex != index) { - scope.parentFormObj[fieldName].$setValidity('keyExist', false); + if (scope.parentFormObj != null) { + scope.parentFormObj[fieldName].$setValidity('keyExist', false); + } scope.isMapKeysUnique = false; return; } - - scope.parentFormObj[fieldName].$setValidity('keyExist', true); - scope.isMapKeysUnique = true; - if (!scope.parentFormObj[fieldName].$invalid) { - // To preserve the order of the keys, delete each one and recreate - const newObj = {}; - angular.copy(scope.valueObjRef, newObj); - angular.forEach(newObj, function(value: any, key: string) { - delete scope.valueObjRef[key]; - if (key == currentKey) { - scope.valueObjRef[newKey] = value; - } else { - scope.valueObjRef[key] = value; - } - }); + if (scope.parentFormObj != null) { + scope.parentFormObj[fieldName].$setValidity('keyExist', true); + if (!scope.parentFormObj[fieldName].$invalid) { + // To preserve the order of the keys, delete each one and recreate + const newObj = {}; + angular.copy(scope.valueObjRef, newObj); + angular.forEach(newObj, function(value: any, key: string) { + delete scope.valueObjRef[key]; + if (key == currentKey) { + scope.valueObjRef[newKey] = value; + } else { + scope.valueObjRef[key] = value; + } + }); + } } + scope.isMapKeysUnique = true; + }; scope.deleteMapItem = (index: number): void => { @@ -233,7 +239,7 @@ export class TypeMapDirective implements ng.IDirective { if (scope.parentProperty.subPropertyToscaFunctions != null) { const subToscaFunctionList: SubPropertyToscaFunction[] = []; scope.parentProperty.subPropertyToscaFunctions.forEach((SubPropertyToscaFunction, index) => { - if (SubPropertyToscaFunction.subPropertyPath.indexOf(scope.mapKeys[flagIndex]) == -1) { + if (SubPropertyToscaFunction.subPropertyPath.toString() != scope.mapKeys[flagIndex]) { subToscaFunctionList.push(SubPropertyToscaFunction); } }); @@ -242,24 +248,30 @@ export class TypeMapDirective implements ng.IDirective { } }; - scope.onGetToscaFunction = (toscaGetFunction: ToscaGetFunction, key: string): void => { + scope.onGetToscaFunction = (toscaGetFunction: ToscaGetFunction, index:string): void => { + let key:string = index; if (scope.parentProperty.subPropertyToscaFunctions != null) { - scope.parentProperty.subPropertyToscaFunctions.forEach((SubPropertyToscaFunction) => { - if (SubPropertyToscaFunction.subPropertyPath.indexOf(key) != -1) { + let toscaFlag : boolean = true; + scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => { + if (SubPropertyToscaFunction.subPropertyPath.toString() == key) { SubPropertyToscaFunction.toscaFunction = toscaGetFunction; + toscaFlag = false; return; } }); - - } - if (scope.parentProperty.subPropertyToscaFunctions == null) { - scope.parentProperty.subPropertyToscaFunctions = []; + if (toscaFlag) { + let subPropertyToscaFunction = new SubPropertyToscaFunction(); + subPropertyToscaFunction.toscaFunction = toscaGetFunction; + subPropertyToscaFunction.subPropertyPath = [key]; + scope.parentProperty.subPropertyToscaFunctions.push(subPropertyToscaFunction); + } + } else { + let subPropertyToscaFunction = new SubPropertyToscaFunction(); + subPropertyToscaFunction.toscaFunction = toscaGetFunction; + subPropertyToscaFunction.subPropertyPath = [key]; + scope.parentProperty.subPropertyToscaFunctions = [subPropertyToscaFunction]; } - const subPropertyToscaFunction = new SubPropertyToscaFunction(); - subPropertyToscaFunction.toscaFunction = toscaGetFunction; - subPropertyToscaFunction.subPropertyPath = [key]; - scope.parentProperty.subPropertyToscaFunctions.push(subPropertyToscaFunction); - }; + } scope.addMapItemFields = (): void => { if (!scope.valueObjRef) { -- cgit 1.2.3-korg