From 61e8668899051e1df738093d1700564fbc22a428 Mon Sep 17 00:00:00 2001 From: "andre.schmid" Date: Thu, 12 May 2022 17:37:43 +0100 Subject: Support list of map properties in composition Supports editing list properties in the edit properties dialog in the composition screen. Fixes entry schema of type map not being shown. Change-Id: Iea1732f51148ae88dedd2242b3b19d19c4548eb4 Issue-ID: SDC-4001 Signed-off-by: andre.schmid --- .../type-list/type-list-directive.html | 28 +++++++++--- .../type-list/type-list-directive.less | 1 - .../type-list/type-list-directive.ts | 32 +++++++++---- .../type-map/type-map-directive.html | 8 ++-- .../property-types/type-map/type-map-directive.ts | 53 +++++++++++++--------- .../select-type-list-directive.less | 1 - .../property-form-view.html | 6 +-- catalog-ui/src/assets/languages/en_US.json | 5 ++ 8 files changed, 89 insertions(+), 45 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 661514f799..48e441599f 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 @@ -17,7 +17,8 @@
-
+
Add
+ data-ng-class="{'disabled': readOnly || !schemaProperty.type || parentFormObj['listNewItem'+fieldsPrefixName].$invalid || (!listNewItem.value && schemaProperty.type !== 'map')}" data-ng-click="addListItem()">Add
- - {{value}} - - + + +
+ + +
+
+ {{value}} +
+
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 71263f2642..99d8005fb1 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 @@ -21,7 +21,6 @@ display: inline-block; background-color: @tlv_color_v; margin: 10px 0 0 10px; - padding: 0 8px; .delete-list-item{ margin: 0 0 0 2px; .hand; 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 997e28dabc..76810040e6 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 @@ -37,21 +37,29 @@ export interface ITypeListScope extends ng.IScope { listDefaultValue:any; listNewItem:any; maxLength:number; - + stringSchema: SchemaProperty; + constraints:string[]; getValidationPattern(type:string):RegExp; validateIntRange(value:string):boolean; addListItem():void; - deleteListItem(listItemIndex:number):void + deleteListItem(listItemIndex:number):void; + getStringSchemaProperty():SchemaProperty; } export class TypeListDirective implements ng.IDirective { + private readonly stringSchema: SchemaProperty; + constructor(private DataTypesService:DataTypesService, private PropertyNameValidationPattern:RegExp, - private ValidationUtils:ValidationUtils) { + private ValidationUtils:ValidationUtils) { + this.stringSchema = new SchemaProperty(); + this.stringSchema.type = PROPERTY_TYPES.STRING; + this.stringSchema.isSimpleType = true; + this.stringSchema.isDataType = false; } scope = { @@ -73,6 +81,7 @@ export class TypeListDirective implements ng.IDirective { link = (scope:ITypeListScope, element:any, $attr:any) => { scope.propertyNameValidationPattern = this.PropertyNameValidationPattern; + scope.stringSchema = this.stringSchema; //reset valueObjRef when schema type is changed scope.$watchCollection('schemaProperty.type', (newData:any):void => { @@ -103,17 +112,22 @@ export class TypeListDirective implements ng.IDirective { scope.addListItem = ():void => { scope.valueObjRef = scope.valueObjRef || []; - let newVal = ((scope.schemaProperty.simpleType || scope.schemaProperty.type) == PROPERTY_TYPES.STRING ? scope.listNewItem.value : JSON.parse(scope.listNewItem.value)); + let newVal; + if (scope.schemaProperty.type === PROPERTY_TYPES.MAP) { + newVal = {"": ""}; + } else if ((scope.schemaProperty.simpleType || scope.schemaProperty.type) == PROPERTY_TYPES.STRING) { + newVal = scope.listNewItem.value; + } else { + newVal = JSON.parse(scope.listNewItem.value); + } scope.valueObjRef.push(newVal); scope.listNewItem.value = ""; }; - scope.deleteListItem = (listItemIndex:number):void => { + scope.deleteListItem = (listItemIndex: number): void => { scope.valueObjRef.splice(listItemIndex, 1); - if (!scope.valueObjRef.length) { - if (scope.listDefaultValue) { - angular.copy(scope.listDefaultValue, scope.valueObjRef); - } + if (!scope.valueObjRef.length && scope.listDefaultValue) { + angular.copy(scope.listDefaultValue, scope.valueObjRef); } }; }; 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 55a414e729..139f1f4220 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 @@ -99,11 +99,13 @@ read-only="readOnly" >
- +
-
+
Add
+ data-ng-class="{'disabled': readOnly || !schemaProperty.type || mapKeys.indexOf('')>-1 || !isMapKeysUnique}" + data-ng-click="addMapItemFields()" title="{{'PROPERTY_EDIT_MAP_ADD_ITEM' | translate}}">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 080c13b87f..ceb2fa0bb9 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 @@ -40,6 +40,7 @@ export interface ITypeMapScope extends ng.IScope { mapDefaultValue:any; maxLength:number; constraints:string[]; + showAddBtn: boolean; getValidationPattern(type:string):RegExp; validateIntRange(value:string):boolean; @@ -67,17 +68,18 @@ export class TypeMapDirective implements ng.IDirective { readOnly: '=',//is form read only defaultValue: '@',//this map default value maxLength: '=', - constraints: '=' - + constraints: '=', + showAddBtn: '=?' }; restrict = 'E'; replace = true; - template = ():string => { + template = (): string => { return require('./type-map-directive.html'); }; link = (scope:ITypeMapScope, element:any, $attr:any) => { + scope.showAddBtn = angular.isDefined(scope.showAddBtn) ? scope.showAddBtn : true; scope.MapKeyValidationPattern = this.MapKeyValidationPattern; scope.isMapKeysUnique = true; @@ -91,6 +93,11 @@ export class TypeMapDirective implements ng.IDirective { } }); + scope.$watchCollection('valueObjRef', (newData: any): void => { + scope.mapKeys = Object.keys(scope.valueObjRef); + scope.mapKeysStatic = Object.keys(scope.valueObjRef); + }); + //when user brows between properties in "edit property form" scope.$watchCollection('fieldsPrefixName', (newData:any):void => { if (!scope.valueObjRef) { @@ -119,27 +126,29 @@ export class TypeMapDirective implements ng.IDirective { }; scope.changeKeyOfMap = (newKey:string, index:number, fieldName:string):void => { - let oldKey = Object.keys(scope.valueObjRef)[index]; - let existsKeyIndex = Object.keys(scope.valueObjRef).indexOf(newKey); - if (existsKeyIndex > -1 && existsKeyIndex != index) { + const currentKeySet = Object.keys(scope.valueObjRef); + const currentKey = currentKeySet[index]; + const existingKeyIndex = currentKeySet.indexOf(newKey); + if (existingKeyIndex > -1 && existingKeyIndex != index) { scope.parentFormObj[fieldName].$setValidity('keyExist', false); scope.isMapKeysUnique = false; - } else { - 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 - let newObj = {}; - angular.copy(scope.valueObjRef , newObj); - angular.forEach(newObj,function(value:any,key:string){ - delete scope.valueObjRef[key]; - if(key == oldKey){ - scope.valueObjRef[newKey] = value; - }else{ - scope.valueObjRef[key] = value; - } - }); - } + 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 + let 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; + } + }); } }; 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 71263f2642..99d8005fb1 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 @@ -21,7 +21,6 @@ display: inline-block; background-color: @tlv_color_v; margin: 10px 0 0 10px; - padding: 0 8px; .delete-list-item{ margin: 0 0 0 2px; .hand; 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 7c29d98641..49ff38bb76 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 @@ -84,7 +84,7 @@
- +