From b3a71f9ed5cc99a9d2104e1dba1278a44f087bb3 Mon Sep 17 00:00:00 2001 From: imamSidero Date: Tue, 17 Jan 2023 10:59:29 +0000 Subject: Provide tosca function as list primitive type entry values in composition view Providing the capability to add tosca function as the primitive type entry values of list in composition view Issue-ID: SDC-4333 Signed-off-by: Imam hussain Change-Id: Iba1c3e72a1f30c19f4cc136f2d725b738cca47b1 --- .../type-list/type-list-directive.html | 168 +++++++++++---------- .../type-list/type-list-directive.less | 84 +++++++---- .../type-list/type-list-directive.ts | 95 +++++++++++- .../select-type-list-directive.less | 5 +- .../property-form-view.html | 4 +- 5 files changed, 235 insertions(+), 121 deletions(-) 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 48e441599f..842b890d6e 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 @@ -13,96 +13,98 @@ ~ See the License for the specific language governing permissions and ~ limitations under the License. --> - - -
-
-
- - + Value + + {{'TOSCA_FUNCTION_LABEL' | translate}} + + - - - - - - + data-ng-pattern="getValidationPattern((schemaProperty.simpleType||schemaProperty.type))" + data-ng-change="addValueToList(valueObjRef[$index], $index);$event.stopPropagation();" + data-ng-model-options="{ debounce: 200 }" + data-ng-maxlength="maxLength" + maxlength="{{maxLength}}" + data-required + autofocus /> + -
- - -
-
-
Add
-
- - -
- - +
+ +
-
- {{value}} + + + +
+ +
- -
-
-
-
-
- -
-
Add
+
+ + +
-
+
Add
+ diff --git a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.less b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.less index 99d8005fb1..971ef3b007 100644 --- a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.less +++ b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.less @@ -1,13 +1,3 @@ -.list-new-item{ - float: left; - width: 50%; - min-width: 221px; - margin-right: 15px; - input{ - min-width: 221px; - } -} - .list-value-items{ -webkit-border-radius: 2px; -moz-border-radius: 2px; @@ -56,29 +46,65 @@ } -.dt-list{ - display: table-caption; - .dt-list-item { - border-radius: 3px; - background-color: @tlv_color_v; - display: inline-block; - .delete-dt-list-item{ - float: right; - position: relative; - top: 5px; - right: 5px; - .sprite-new; - .delete-icon; - &:hover{ - .delete-icon-hover; - } - } - .data-type-name{ - margin-right: 16px; +.dt-list-item { + min-width: 300px; + min-height: 65px; + background-color: @tlv_color_v; + border-radius: 3px; + margin: 8px; + float: left; + display: flex; + .delete-dt-list-item{ + float: right; + position: relative; + top: 5px; + right: 5px; + .sprite-new; + .delete-icon; + &:hover{ + .delete-icon-hover; } } + .list-new-item{ + margin: 7px 12px !important; + float: left; + min-height: 50px; + select{ + width:171px; + } + input[type="text"]{ + width: 170px; + } + &>.data-type-fields-structure{ + padding: 0; + } + + .i-sdc-form-input:read-only{ + opacity: 0.4; + cursor: auto; + } + } + .data-type-name{ + margin-right: 16px; + } +} + +.dt-list{ + display: inline-block; &>.add-list-item{ float:none; } } +.tosca-function { + max-width: 165px; +} + +.tosca-error { + max-width: 165px; +} + +.temp-form { + all: unset; +} + 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 857c62cc92..fe509416fa 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 @@ -22,13 +22,18 @@ * Created by rcohen on 9/15/2016. */ 'use strict'; -import {SchemaProperty} from "app/models"; +import {SchemaProperty, PropertyModel} from "app/models"; import {ValidationUtils, PROPERTY_TYPES} from "app/utils"; import {DataTypesService} from "app/services"; +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 ITypeListScope extends ng.IScope { parentFormObj:ng.IFormController; schemaProperty:SchemaProperty; + parentProperty:PropertyModel; + componentInstanceMap: Map; isSchemaTypeDataType:boolean; valueObjRef:any; propertyNameValidationPattern:RegExp; @@ -38,14 +43,18 @@ export interface ITypeListScope extends ng.IScope { listNewItem:any; maxLength:number; stringSchema: SchemaProperty; - + showToscaFunction: Array; constraints:string[]; getValidationPattern(type:string):RegExp; validateIntRange(value:string):boolean; addListItem():void; + addValueToList(value:string,index:number); deleteListItem(listItemIndex:number):void; getStringSchemaProperty():SchemaProperty; + getNumber(num:number):Array; + onEnableTosca(toscaFlag:boolean,index:number); + onGetToscaFunction(toscaGetFunction: ToscaGetFunction, index:number); } @@ -65,6 +74,8 @@ export class TypeListDirective implements ng.IDirective { scope = { valueObjRef: '=',//ref to list object in the parent value object schemaProperty: '=',//get the schema.property object + componentInstanceMap: '=', + parentProperty: '=', parentFormObj: '=',//ref to parent form (get angular form object) fieldsPrefixName: '=',//prefix for form fields names readOnly: '=',//is form read only @@ -82,7 +93,21 @@ export class TypeListDirective implements ng.IDirective { link = (scope:ITypeListScope, element:any, $attr:any) => { scope.propertyNameValidationPattern = this.PropertyNameValidationPattern; scope.stringSchema = this.stringSchema; - + if (scope.valueObjRef.length == 0) { + 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; + } + }); + } + }); //reset valueObjRef when schema type is changed scope.$watchCollection('schemaProperty.type', (newData:any):void => { scope.isSchemaTypeDataType = this.DataTypesService.isDataTypeForSchemaType(scope.schemaProperty); @@ -113,18 +138,80 @@ export class TypeListDirective implements ng.IDirective { } else if ((scope.schemaProperty.simpleType || scope.schemaProperty.type) == PROPERTY_TYPES.STRING) { newVal = scope.listNewItem.value; } else { - newVal = JSON.parse(scope.listNewItem.value); + if (scope.listNewItem.value != "") { + newVal = JSON.parse(scope.listNewItem.value); + } } scope.valueObjRef.push(newVal); + scope.showToscaFunction.push(false); scope.listNewItem.value = ""; }; + //return dummy array in order to prevent rendering map-keys ng-repeat again when a map key is changed + scope.getNumber = (num:number):Array => { + return new Array(num); + }; + + scope.addValueToList = (value:string,index:number):void => { + console.log("value : "+value+" , index : "+index); + scope.valueObjRef[index] = value; + scope.parentProperty.value = scope.valueObjRef; + } + scope.deleteListItem = (listItemIndex: number): void => { scope.valueObjRef.splice(listItemIndex, 1); + let key : string = listItemIndex.toString(); + if (scope.parentProperty.subPropertyToscaFunctions != null) { + let subToscaFunctionList : Array = []; + scope.parentProperty.subPropertyToscaFunctions.forEach((SubPropertyToscaFunction, index) => { + if (SubPropertyToscaFunction.subPropertyPath.indexOf(key) == -1) { + subToscaFunctionList.push(SubPropertyToscaFunction); + } + }); + scope.parentProperty.subPropertyToscaFunctions = subToscaFunctionList; + } if (!scope.valueObjRef.length && scope.listDefaultValue) { angular.copy(scope.listDefaultValue, scope.valueObjRef); } }; + + scope.onEnableTosca = (toscaFlag:boolean,flagIndex:number):void => { + scope.showToscaFunction[flagIndex] = toscaFlag; + scope.valueObjRef[flagIndex] = ""; + let key:string = flagIndex.toString(); + if (!toscaFlag) { + if (scope.parentProperty.subPropertyToscaFunctions != null) { + let subToscaFunctionList : Array = []; + scope.parentProperty.subPropertyToscaFunctions.forEach((SubPropertyToscaFunction, index) => { + if (SubPropertyToscaFunction.subPropertyPath.indexOf(key) == -1) { + subToscaFunctionList.push(SubPropertyToscaFunction); + } + }); + scope.parentProperty.subPropertyToscaFunctions = subToscaFunctionList; + } + } + }; + + scope.onGetToscaFunction = (toscaGetFunction: ToscaGetFunction, index:number): void => { + let key:string = index.toString(); + 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); + } + }; public static factory = (DataTypesService:DataTypesService, diff --git a/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.less b/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.less index 99d8005fb1..9111acabf8 100644 --- a/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.less +++ b/catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.less @@ -3,9 +3,6 @@ width: 50%; min-width: 221px; margin-right: 15px; - input{ - min-width: 221px; - } } .list-value-items{ @@ -57,7 +54,7 @@ } .dt-list{ - display: table-caption; + display: inline-block; .dt-list-item { border-radius: 3px; background-color: @tlv_color_v; 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 48a85e4fcc..6a9013cce6 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 @@ Entries + ng-change="onValueTypeChange()"/> {{(editPropertyModel.property.type == 'map' || editPropertyModel.property.type == 'list') ? 'Entries' : 'Value'}}