diff options
Diffstat (limited to 'catalog-ui/src/app')
10 files changed, 145 insertions, 16 deletions
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 d84ec821de..5c895115e5 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 @@ -41,9 +41,14 @@ </div> <div data-ng-if="!isSchemaTypeDataType" class="i-sdc-form-item map-item-field" data-ng-class="{error:(parentFormObj['mapValue'+fieldsPrefixName+$index].$dirty && parentFormObj['mapValue'+fieldsPrefixName+$index].$invalid)}"> <label class="i-sdc-form-label required">Value</label> - + <form class="temp-form"> + <input type="radio" name="hasToscaFunction-{{fieldsPrefixName}}-{{$index}}" data-ng-checked="{{showToscaFunction[$index] == false}}" data-ng-click="onEnableTosca(false,$index)"/> + Value + <input type="radio" name="hasToscaFunction-{{fieldsPrefixName}}-{{$index}}" data-ng-checked="{{showToscaFunction[$index]}}" data-ng-click="onEnableTosca(true,$index)" ng-disabled="mapKeys[$index] == '' || mapKeys[$index] == null"/> + {{'TOSCA_FUNCTION_LABEL' | translate}} + </form> <input class="i-sdc-form-input" - ng-if="!constraints && !((schemaProperty.simpleType||schemaProperty.type) == 'boolean')" + ng-if="!constraints && !((schemaProperty.simpleType||schemaProperty.type) == 'boolean') && showToscaFunction[$index] == false" data-ng-readonly="readOnly" data-ng-model="valueObjRef[mapKeys[$index]]" type="text" @@ -58,7 +63,7 @@ autofocus /> <select class="i-sdc-form-select" data-tests-id="mapValue{{fieldsPrefixName}}{{$index}}" - ng-if="!constraints && (schemaProperty.simpleType||schemaProperty.type) == 'boolean'" + ng-if="!constraints && (schemaProperty.simpleType||schemaProperty.type) == 'boolean' && showToscaFunction[$index] == false" data-ng-disabled="readOnly" name="mapValue{{fieldsPrefixName}}{{$index}}" data-ng-model="valueObjRef[mapKeys[$index]]" @@ -66,6 +71,16 @@ <option value="true">true</option> <option value="false">false</option> </select> + <div data-ng-if="showToscaFunction[$index]" class="div-tosca-function"> + <tosca-function [property]="parentProperty" + [component-instance-map]="componentInstanceMap" + [allow-clear]="false" + [composition-map]="true" + [composition-map-key]="mapKeys[$index]" + (on-valid-function)="onGetToscaFunction($event,mapKeys[$index])" + > + </tosca-function> + </div> <select class="i-sdc-form-select" diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less index 9c2984e3ce..1714178c9f 100644 --- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less +++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.less @@ -90,3 +90,15 @@ .type-map { display: inline-block; } + +.tosca-function { + max-width: 165px; +} + +.tosca-error { + max-width: 165px; +} + +.temp-form { + all: unset; +}
\ No newline at end of file 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 ceb2fa0bb9..ce8b997035 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 @@ -24,11 +24,16 @@ 'use strict'; import {ValidationUtils, PROPERTY_TYPES} from "app/utils"; import {DataTypesService} from "app/services"; -import {SchemaProperty} from "app/models"; +import {SchemaProperty, PropertyModel} from "app/models"; +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 ITypeMapScope extends ng.IScope { parentFormObj:ng.IFormController; schemaProperty:SchemaProperty; + parentProperty:PropertyModel; + componentInstanceMap: Map<string, InstanceFeDetails>; isMapKeysUnique:boolean; isSchemaTypeDataType:boolean; valueObjRef:any; @@ -41,6 +46,7 @@ export interface ITypeMapScope extends ng.IScope { maxLength:number; constraints:string[]; showAddBtn: boolean; + showToscaFunction: Array<boolean>; getValidationPattern(type:string):RegExp; validateIntRange(value:string):boolean; @@ -49,6 +55,9 @@ export interface ITypeMapScope extends ng.IScope { addMapItemFields():void; parseToCorrectType(objectOfValues:any, locationInObj:string, type:string):void; getNumber(num:number):Array<any>; + validateSubToscaFunction(key:string):boolean; + onEnableTosca(toscaFlag:boolean,index:number); + onGetToscaFunction(toscaGetFunction: ToscaGetFunction, key:string); } @@ -62,6 +71,7 @@ export class TypeMapDirective implements ng.IDirective { scope = { valueObjRef: '=',//ref to map object in the parent value object + componentInstanceMap: '=', schemaProperty: '=',//get the schema.property object parentFormObj: '=',//ref to parent form (get angular form object) fieldsPrefixName: '=',//prefix for form fields names @@ -69,7 +79,8 @@ export class TypeMapDirective implements ng.IDirective { defaultValue: '@',//this map default value maxLength: '=', constraints: '=', - showAddBtn: '=?' + showAddBtn: '=?', + parentProperty: '=' }; restrict = 'E'; @@ -82,6 +93,20 @@ export class TypeMapDirective implements ng.IDirective { scope.showAddBtn = angular.isDefined(scope.showAddBtn) ? scope.showAddBtn : true; scope.MapKeyValidationPattern = this.MapKeyValidationPattern; scope.isMapKeysUnique = true; + if (scope.mapKeys === undefined) { + scope.mapKeys = Object.keys(scope.valueObjRef); + } + scope.showToscaFunction = new Array(scope.mapKeys.length); + scope.mapKeys.forEach((key, index) => { + scope.showToscaFunction[index] = false; + if (scope.parentProperty.subPropertyToscaFunctions != null) { + scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => { + if (SubPropertyToscaFunction.subPropertyPath.indexOf(key) != -1) { + scope.showToscaFunction[index] = true; + } + }); + } + }); //reset valueObjRef and mapKeys when schema type is changed scope.$watchCollection('schemaProperty.type', (newData:any):void => { @@ -153,8 +178,19 @@ export class TypeMapDirective implements ng.IDirective { }; scope.deleteMapItem = (index:number):void=> { + const keyToChange = scope.mapKeys[index]; delete scope.valueObjRef[scope.mapKeys[index]]; scope.mapKeys.splice(index, 1); + scope.showToscaFunction.splice(index, 1); + if (scope.parentProperty.subPropertyToscaFunctions != null) { + let subToscaFunctionList : Array<SubPropertyToscaFunction> = []; + scope.parentProperty.subPropertyToscaFunctions.forEach((SubPropertyToscaFunction, index) => { + if (SubPropertyToscaFunction.subPropertyPath.indexOf(keyToChange) == -1) { + subToscaFunctionList.push(SubPropertyToscaFunction); + } + }); + scope.parentProperty.subPropertyToscaFunctions = subToscaFunctionList; + } if (!scope.mapKeys.length) {//only when user removes all pairs of key-value fields - put the default if (scope.mapDefaultValue) { angular.copy(scope.mapDefaultValue, scope.valueObjRef); @@ -163,9 +199,45 @@ export class TypeMapDirective implements ng.IDirective { } }; + scope.onEnableTosca = (toscaFlag:boolean,flagIndex:number):void => { + scope.showToscaFunction[flagIndex] = toscaFlag; + scope.valueObjRef[scope.mapKeys[flagIndex]] = null; + if (!toscaFlag) { + if (scope.parentProperty.subPropertyToscaFunctions != null) { + let subToscaFunctionList : Array<SubPropertyToscaFunction> = []; + scope.parentProperty.subPropertyToscaFunctions.forEach((SubPropertyToscaFunction, index) => { + if (SubPropertyToscaFunction.subPropertyPath.indexOf(scope.mapKeys[flagIndex]) == -1) { + subToscaFunctionList.push(SubPropertyToscaFunction); + } + }); + scope.parentProperty.subPropertyToscaFunctions = subToscaFunctionList; + } + } + }; + + scope.onGetToscaFunction = (toscaGetFunction: ToscaGetFunction, key:string): void => { + 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); + } + scope.addMapItemFields = ():void => { scope.valueObjRef[''] = null; scope.mapKeys = Object.keys(scope.valueObjRef); + scope.showToscaFunction.push(false); }; scope.parseToCorrectType = (objectOfValues:any, locationInObj:string, type:string):void => { @@ -173,6 +245,17 @@ export class TypeMapDirective implements ng.IDirective { objectOfValues[locationInObj] = JSON.parse(objectOfValues[locationInObj]); } } + + scope.validateSubToscaFunction = (key:string):boolean => { + if (scope.parentProperty.subPropertyToscaFunctions != null) { + scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => { + if (SubPropertyToscaFunction.subPropertyPath.indexOf(key) != -1) { + return true; + } + }); + } + return false; + } }; public static factory = (DataTypesService:DataTypesService, diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html index 8ee253e5dc..74a06baa53 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.html @@ -34,6 +34,8 @@ <app-tosca-get-function [property]="property" [toscaGetFunction]="toscaFunction" [componentInstanceMap]="componentInstanceMap" [functionType]="toscaFunctionTypeForm.value" + [compositionMap]="compositionMap" + [compositionMapKey]="compositionMapKey" (onValidityChange)="onGetFunctionValidityChange($event)"></app-tosca-get-function> </div> <div *ngIf="isYamlFunctionSelected()"> diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts index 6b43cb014d..f697eed027 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-function.component.ts @@ -44,6 +44,8 @@ export class ToscaFunctionComponent implements OnInit, OnChanges { @Input() property: PropertyBEModel; @Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>(); @Input() allowClear: boolean = true; + @Input() compositionMap: boolean = false; + @Input() compositionMapKey: string = ""; @Output() onValidFunction: EventEmitter<ToscaGetFunction> = new EventEmitter<ToscaGetFunction>(); @Output() onValidityChange: EventEmitter<ToscaFunctionValidationEvent> = new EventEmitter<ToscaFunctionValidationEvent>(); @@ -98,6 +100,17 @@ export class ToscaFunctionComponent implements OnInit, OnChanges { } private initToscaFunction(): void { + if (this.compositionMap && this.property.subPropertyToscaFunctions) { + let keyToFind = [this.compositionMapKey]; + let subPropertyToscaFunction = this.property.subPropertyToscaFunctions.find(subPropertyToscaFunction => this.areEqual(subPropertyToscaFunction.subPropertyPath, keyToFind)); + + if (subPropertyToscaFunction){ + this.toscaFunction = subPropertyToscaFunction.toscaFunction; + this.toscaFunctionForm.setValue(this.toscaFunction); + this.toscaFunctionTypeForm.setValue(this.toscaFunction.type); + } + return; + } if (this.property instanceof PropertyDeclareAPIModel && this.property.subPropertyToscaFunctions && (<PropertyDeclareAPIModel> this.property).propertiesName){ let propertiesPath = (<PropertyDeclareAPIModel> this.property).propertiesName.split("#"); if (propertiesPath.length > 1){ diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html index 6f19d5eff4..62cd697f8c 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.html @@ -32,7 +32,7 @@ <option *ngFor="let value of propertyDropdownList" [ngValue]="value">{{value.propertyLabel}}</option> </select> </div> - <div *ngIf="dropDownErrorMsg">{{dropDownErrorMsg}}</div> + <div *ngIf="dropDownErrorMsg" class="tosca-error">{{dropDownErrorMsg}}</div> </form> <loader [display]="isLoading" [size]="'medium'" [relative]="true"></loader> </div> diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts index 84018fd546..9fdc8c19aa 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/tosca-function/tosca-get-function/tosca-get-function.component.ts @@ -45,6 +45,8 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges { @Input() toscaGetFunction: ToscaGetFunction; @Input() componentInstanceMap: Map<string, InstanceFeDetails> = new Map<string, InstanceFeDetails>(); @Input() functionType: ToscaGetFunctionType; + @Input() compositionMap: boolean; + @Input() compositionMapKey: string; @Output() onValidFunction: EventEmitter<ToscaGetFunction> = new EventEmitter<ToscaGetFunction>(); @Output() onValidityChange: EventEmitter<ToscaGetFunctionValidationEvent> = new EventEmitter<ToscaGetFunctionValidationEvent>(); @@ -262,10 +264,10 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges { private propertyTypeToString() { if (this.isSubProperty()){ - if (this.typeHasSchema(this.property.type) && this.property instanceof PropertyDeclareAPIModel && - (<PropertyDeclareAPIModel> this.property).input instanceof DerivedFEProperty) { - if(this.isComplexType(this.property.schemaType)){ - return this.property.input.type; + if ((this.typeHasSchema(this.property.type) && this.property instanceof PropertyDeclareAPIModel && + (<PropertyDeclareAPIModel> this.property).input instanceof DerivedFEProperty) || this.compositionMap) { + if(this.isComplexType(this.property.schemaType) && !this.compositionMap){ + return (<PropertyDeclareAPIModel> this.property).input.type; }else{ return this.property.schema.property.type; } @@ -375,9 +377,9 @@ export class ToscaGetFunctionComponent implements OnInit, OnChanges { private hasSameType(property: PropertyBEModel | AttributeBEModel): boolean { if (this.typeHasSchema(this.property.type)) { - if (this.property instanceof PropertyDeclareAPIModel && (<PropertyDeclareAPIModel> this.property).input instanceof DerivedFEProperty) { - if(this.isComplexType(this.property.schemaType)){ - return property.type === this.property.input.type; + if ((this.property instanceof PropertyDeclareAPIModel && (<PropertyDeclareAPIModel> this.property).input instanceof DerivedFEProperty) || this.compositionMap) { + if(this.isComplexType(this.property.schemaType) && !this.compositionMap){ + return property.type === (<PropertyDeclareAPIModel> this.property).input.type; }else{ return property.type === this.property.schema.property.type; } diff --git a/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base.less b/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base.less index 8682dd79fe..1c1c0c9c52 100644 --- a/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base.less +++ b/catalog-ui/src/app/view-models/forms/property-forms/base-property-form/property-form-base.less @@ -1,6 +1,6 @@ .sdc-edit-property-container { .scrollbar-container{ - height: 415px; + height: 475px; width: 830px; .perfect-scrollbar; } 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 d605cb95e8..48a85e4fcc 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 @@ <input type="radio" name="hasGetFunctionValue" ng-model="editPropertyModel.hasGetFunctionValue" ng-value="false" - ng-change="onValueTypeChange()"/> Value + ng-change="onValueTypeChange()"/> Entries <input type="radio" name="hasGetFunctionValue" ng-model="editPropertyModel.hasGetFunctionValue" ng-value="true" @@ -176,6 +176,8 @@ <div ng-switch-when="map"> <type-map value-obj-ref="myValue" schema-property="editPropertyModel.property.schema.property" + parent-property="editPropertyModel.property" + component-instance-map="componentInstanceMap" parent-form-obj="forms.editForm" fields-prefix-name="currentPropertyIndex" read-only="(editPropertyModel.property.readonly && !isPropertyValueOwner) || isVnfConfiguration" diff --git a/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal.less b/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal.less index 15e30af4ee..02b7612671 100644 --- a/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal.less +++ b/catalog-ui/src/app/view-models/forms/property-forms/select-datatype-modal/select-datatype-modal.less @@ -1,6 +1,6 @@ .sdc-edit-property-container { .scrollbar-container{ - height: 415px; + height: 475px; width: 830px; .perfect-scrollbar; } |