Support list of map properties in composition

Supports editing list<map<string, string> 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 <andre.schmid@est.tech>

1 files changed, 31 insertions, 22 deletions

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;
+                    }
+                });
             }
         };