diff options
Diffstat (limited to 'catalog-ui/src/app/directives')
6 files changed, 81 insertions, 42 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 @@ <div> <div data-ng-if="!isSchemaTypeDataType"> - <div class="i-sdc-form-item list-new-item" data-ng-class="{error:(parentFormObj['listNewItem'+fieldsPrefixName].$dirty && parentFormObj['listNewItem'+fieldsPrefixName].$invalid)}"> + <div class="i-sdc-form-item list-new-item" data-ng-class="{error:(parentFormObj['listNewItem'+fieldsPrefixName].$dirty && parentFormObj['listNewItem'+fieldsPrefixName].$invalid)}" + ng-if="schemaProperty.type !== 'map'"> <input class="i-sdc-form-input" data-tests-id="listNewItem{{fieldsPrefixName}}" ng-if="!constraints && !((schemaProperty.simpleType||schemaProperty.type) == 'boolean')" @@ -66,12 +67,27 @@ </div> </div> <div class="add-btn add-list-item" data-tests-id="add-list-item{{fieldsPrefixName}}" - data-ng-class="{'disabled': readOnly || !schemaProperty.type || parentFormObj['listNewItem'+fieldsPrefixName].$invalid || !listNewItem.value}" data-ng-click="addListItem()">Add</div> + data-ng-class="{'disabled': readOnly || !schemaProperty.type || parentFormObj['listNewItem'+fieldsPrefixName].$invalid || (!listNewItem.value && schemaProperty.type !== 'map')}" data-ng-click="addListItem()">Add</div> <div class="list-value-items"> - <span class="list-value-item" data-ng-repeat="value in valueObjRef track by $index"> - {{value}} - <span ng-if="!readOnly" class="delete-list-item sprite-new small-x-button" data-ng-click="deleteListItem($index)"></span> - </span> + <span class="list-value-item" data-ng-repeat="value in valueObjRef track by $index"> + <span ng-if="!readOnly" class="delete-list-item sprite-new small-x-button" data-ng-click="deleteListItem($index)" + title="{{'PROPERTY_EDIT_LIST_DELETE_ITEM' | translate}}"></span> + <div ng-if="schemaProperty.type === 'map'"> + <type-map value-obj-ref="value" + schema-property="stringSchema" + parent-form-obj="parentFormObj" + fields-prefix-name="fieldsPrefixName+''+$index" + read-only="readOnly" + default-value="{{undefined}}" + max-length="maxLength" + show-add-btn="true" + constraints="constraints"> + </type-map> + </div> + <div ng-if="schemaProperty.type !== 'map'"> + {{value}} + </div> + </span> </div> </div> <div data-ng-if="isSchemaTypeDataType"> 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" ></fields-structure> </div> - <span ng-click="deleteMapItem($index)" class="delete-map-item" data-tests-id="delete-map-item{{fieldsPrefixName}}{{$index}}" data-ng-class="{'disabled': readOnly}"></span> + <span ng-click="deleteMapItem($index)" class="delete-map-item" data-tests-id="delete-map-item{{fieldsPrefixName}}{{$index}}" + data-ng-class="{'disabled': readOnly}" title="{{'PROPERTY_EDIT_MAP_DELETE_ITEM' | translate}}"></span> </div> - <div class="add-map-item" data-ng-class="{'schema-data-type':isSchemaTypeDataType}"> + <div class="add-map-item" data-ng-class="{'schema-data-type':isSchemaTypeDataType}" data-ng-if="showAddBtn"> <div class="add-btn" data-tests-id="add-map-item" - data-ng-class="{'disabled': readOnly || !schemaProperty.type || mapKeys.indexOf('')>-1 || !isMapKeysUnique}" data-ng-click="addMapItemFields()">Add</div> + data-ng-class="{'disabled': readOnly || !schemaProperty.type || mapKeys.indexOf('')>-1 || !isMapKeysUnique}" + data-ng-click="addMapItemFields()" title="{{'PROPERTY_EDIT_MAP_ADD_ITEM' | translate}}">Add</div> </div> </div> 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; |