aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app
diff options
context:
space:
mode:
authorandre.schmid <andre.schmid@est.tech>2022-05-12 17:37:43 +0100
committerMichael Morris <michael.morris@est.tech>2022-05-17 08:23:38 +0000
commit61e8668899051e1df738093d1700564fbc22a428 (patch)
tree0076471bed9a3fee8e5a565ed63c6027a5c76b30 /catalog-ui/src/app
parent69bc5bdb7d464fa38705191f1495fb09474277a8 (diff)
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>
Diffstat (limited to 'catalog-ui/src/app')
-rw-r--r--catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html28
-rw-r--r--catalog-ui/src/app/directives/property-types/type-list/type-list-directive.less1
-rw-r--r--catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts32
-rw-r--r--catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html8
-rw-r--r--catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts53
-rw-r--r--catalog-ui/src/app/directives/select-property-types/select-type-list/select-type-list-directive.less1
-rw-r--r--catalog-ui/src/app/view-models/forms/property-forms/component-property-form/property-form-view.html6
7 files changed, 84 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 @@
<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;
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 @@
<div class="w-sdc-form-column" data-ng-if="showSchema()">
<!-- Entry Schema -->
<div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.schemaType.$dirty && forms.editForm.schemaType.$invalid)}">
- <label class="i-sdc-form-label required">Entry Schema</label>
+ <label class="i-sdc-form-label required">{{'PROPERTY_ENTRY_SCHEMA' | translate}}</label>
<select class="i-sdc-form-select"
data-required
data-tests-id="schema-type"
@@ -92,8 +92,8 @@
name="schemaType"
data-ng-change="onSchemaTypeChange()"
data-ng-model="editPropertyModel.property.schema.property.type">
- <option value="">Choose Schema Type</option>
- <option data-ng-repeat="type in editPropertyModel.simpleTypes"
+ <option value="">{{'PROPERTY_ENTRY_SCHEMA_CHOOSE_OPTION' | translate}}</option>
+ <option data-ng-repeat="type in editPropertyModel.types"
value="{{type}}">{{type}}</option>
<option data-ng-repeat="type in nonPrimitiveTypes"
value="{{type}}">{{type.replace("org.openecomp.datatypes.heat.","")}}</option>