diff options
Diffstat (limited to 'catalog-ui/src/app/directives/property-types/data-type-fields-structure')
3 files changed, 211 insertions, 90 deletions
diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html index 78aa7bc7f4..afbd520532 100644 --- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html +++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html @@ -30,93 +30,116 @@ </div> </div> <!--<div class="property-value">--> - <div data-ng-if="dataTypesService.isDataTypeForDataTypePropertyType(property)" class="inner-structure"> - <fields-structure value-obj-ref="(valueObjRef[property.name])" - type-name="property.type" - parent-property="parentProperty" - component-instance-map="componentInstanceMap" - parent-form-obj="parentFormObj" - fields-prefix-name="fieldsPrefixName+property.name" - read-only="readOnly" - is-service="isService" - default-value="{{currentTypeDefaultValue[property.name]}}"> - - </fields-structure> - </div> - <div data-ng-if="!dataTypesService.isDataTypeForDataTypePropertyType(property)" ng-switch="property.type"> - <div ng-switch-when="map"> - <type-map value-obj-ref="valueObjRef[property.name]" - schema-property="property.schema.property" - parent-property="property" - component-instance-map="componentInstanceMap" - parent-form-obj="parentFormObj" - fields-prefix-name="fieldsPrefixName+property.name" - read-only="readOnly" - default-value="{{currentTypeDefaultValue[property.name]}}" - is-service="isService" - types="types"></type-map> + <div class="inner-structure tosca-box tosca-parent"> + <div class="tosca-box" data-ng-if="complexToscapath == null"> + <form class="temp-form" data-ng-if="isService"> + <input type="radio" name="hasToscaFunction-{{fieldsPrefixName}}" data-ng-checked="verifyTosca(property.name) == false" data-ng-click="onEnableTosca(false,property.name)"/> + Value + <input type="radio" name="hasToscaFunction-{{fieldsPrefixName}}" data-ng-checked="verifyTosca(property.name)" data-ng-click="onEnableTosca(true,property.name)" /> + {{'TOSCA_FUNCTION_LABEL' | translate}} + </form> </div> - <div ng-switch-when="list"> - <type-list value-obj-ref="valueObjRef[property.name]" - schema-property="property.schema.property" - parent-property="parentProperty" - component-instance-map="componentInstanceMap" - parent-form-obj="parentFormObj" - fields-prefix-name="fieldsPrefixName+property.name" - read-only="readOnly" - default-value="{{currentTypeDefaultValue[property.name]}}" - is-service="isService" - types="types"></type-list> + <div data-ng-if="verifyTosca(property.name)" class="div-tosca-function"> + <tosca-function [property]="getSubProperty(property.name)" + [component-instance-map]="componentInstanceMap" + [allow-clear]="false" + [composition-map]="true" + [composition-map-key]="property.name" + (on-valid-function)="onGetToscaFunction($event,property.name)" + > + </tosca-function> + </div> + <div data-ng-if="dataTypesService.isDataTypeForDataTypePropertyType(property) && !verifyTosca(property.name)" class="tosca-box"> + <fields-structure value-obj-ref="(valueObjRef[property.name])" + type-name="property.type" + parent-property="parentProperty" + component-instance-map="componentInstanceMap" + parent-form-obj="parentFormObj" + fields-prefix-name="fieldsPrefixName+property.name" + read-only="readOnly" + is-service="isService" + complex-toscapath="property.name" + default-value="{{currentTypeDefaultValue[property.name]}}"> + + </fields-structure> </div> - <div ng-switch-default class="primitive-value-field"> - <div class="i-sdc-form-item" data-ng-class="{error:(parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid)}"> - <!-- Has Constraints --> + <div data-ng-if="!dataTypesService.isDataTypeForDataTypePropertyType(property) && !verifyTosca(property.name)" ng-switch="property.type" class="tosca-box"> + <div ng-switch-when="map"> + <type-map value-obj-ref="valueObjRef[property.name]" + schema-property="getSubProperty(property.name).schema.property" + parent-property="getSubProperty(property.name)" + component-instance-map="componentInstanceMap" + parent-form-obj="parentFormObj[fieldsPrefixName + property.name]" + fields-prefix-name="fieldsPrefixName+property.name" + read-only="readOnly" + default-value="{{currentTypeDefaultValue[property.name]}}" + is-service="isService" + complex-toscapath="property.name" + types="types"></type-map> + </div> + <div ng-switch-when="list"> + <type-list value-obj-ref="valueObjRef[property.name]" + schema-property="getSubProperty(property.name).schema.property" + parent-property="getSubProperty(property.name)" + component-instance-map="componentInstanceMap" + parent-form-obj="parentFormObj[fieldsPrefixName + property.name]" + fields-prefix-name="fieldsPrefixName+property.name" + read-only="readOnly" + default-value="{{currentTypeDefaultValue[property.name]}}" + is-service="isService" + complex-toscapath="property.name" + types="types"></type-list> + </div> + <div ng-switch-default class="primitive-value-field"> + <div class="i-sdc-form-item" data-ng-class="{error:(parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid)}"> + <!-- Has Constraints --> - <!--<select class="i-sdc-form-select"--> - <!--ng-if="(property.constraints)"--> - <!--data-ng-disabled="readOnly"--> - <!--name="{{fieldsPrefixName+property.name}}"--> - <!--data-ng-change="onValueChange(property.name,'constraintsChange')"--> - <!--data-ng-model="valueObjRef[property.name]"--> - <!-->--> - <!--<!– Get the default value in case exist –>--> - <!--<option value = "{{valueObjRef[property.name]}}" name = "{{valueObjRef[property.name]}}" hidden selected>--> - <!--{{valueObjRef[property.name]}}--> - <!--</option> --> - <!--<!– add all constratint to Select list –>--> - <!--<option ng-repeat='value in property.constraints[0].validValues' value="{{value}}" >--> - <!--{{value}}--> - <!--</option> --> - <!--</select>--> - <!-- Input without constraints --> - <input class="i-sdc-form-input" - data-tests-id="{{fieldsPrefixName+property.name}}" - ng-if="!((property.simpleType||property.type) == 'boolean')" - data-ng-maxlength="100" - data-ng-readonly="readOnly" - maxlength="{{(property.simpleType||property.type) == 'integer'? 10 : 100}}" - data-ng-model="valueObjRef[property.name]" - type="text" - name="{{fieldsPrefixName+property.name}}" - data-ng-pattern="getValidationPattern((property.simpleType||property.type))" - data-ng-model-options="{ debounce: 200 }" - data-ng-change="inputOnValueChange(property)" - autofocus - /> - <select class="i-sdc-form-select" + <!--<select class="i-sdc-form-select"--> + <!--ng-if="(property.constraints)"--> + <!--data-ng-disabled="readOnly"--> + <!--name="{{fieldsPrefixName+property.name}}"--> + <!--data-ng-change="onValueChange(property.name,'constraintsChange')"--> + <!--data-ng-model="valueObjRef[property.name]"--> + <!-->--> + <!--<!– Get the default value in case exist –>--> + <!--<option value = "{{valueObjRef[property.name]}}" name = "{{valueObjRef[property.name]}}" hidden selected>--> + <!--{{valueObjRef[property.name]}}--> + <!--</option> --> + <!--<!– add all constratint to Select list –>--> + <!--<option ng-repeat='value in property.constraints[0].validValues' value="{{value}}" >--> + <!--{{value}}--> + <!--</option> --> + <!--</select>--> + <!-- Input without constraints --> + <input class="i-sdc-form-input" data-tests-id="{{fieldsPrefixName+property.name}}" - ng-if="(property.simpleType||property.type) == 'boolean'" - data-ng-disabled="readOnly" - name="{{fieldsPrefixName+property.name}}" - data-ng-change="onValueChange(property.name,'boolean')" + ng-if="!((property.simpleType||property.type) == 'boolean')" + data-ng-maxlength="100" + data-ng-readonly="readOnly" + maxlength="{{(property.simpleType||property.type) == 'integer'? 10 : 100}}" data-ng-model="valueObjRef[property.name]" - data-ng-options="option.v as option.n for option in [{ n: '', v: undefined }, { n: 'false', v: false }, { n: 'true', v: true }]"> - </select> + type="text" + name="{{fieldsPrefixName+property.name}}" + data-ng-pattern="getValidationPattern((property.simpleType||property.type))" + data-ng-model-options="{ debounce: 200 }" + data-ng-change="inputOnValueChange(property,valueObjRef[property.name])" + autofocus + /> + <select class="i-sdc-form-select" + data-tests-id="{{fieldsPrefixName+property.name}}" + ng-if="(property.simpleType||property.type) == 'boolean'" + data-ng-disabled="readOnly" + name="{{fieldsPrefixName+property.name}}" + data-ng-change="onValueChange(property.name,'boolean')" + data-ng-model="valueObjRef[property.name]" + data-ng-options="option.v as option.n for option in [{ n: '', v: undefined }, { n: 'false', v: false }, { n: 'true', v: true }]"> + </select> - <div class="input-error" data-ng-show="parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid"> - <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span> - <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span> - <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.customValidation" translate="PROPERTY_EDIT_MAP_UNIQUE_KEYS"></span> + <div class="input-error" data-ng-show="parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid"> + <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span> + <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span> + <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.customValidation" translate="PROPERTY_EDIT_MAP_UNIQUE_KEYS"></span> + </div> </div> </div> </div> diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less index abca49d7a3..de1f423fcb 100644 --- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less +++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.less @@ -92,3 +92,15 @@ } } +.temp-form { + all: unset; + margin-left: 6px !important; +} +.tosca-box { + display: block !important; + all : unset; +} +.tosca-parent { + margin-left: 10px; +} + diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts index 30c7b06733..37ca36a371 100644 --- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts +++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts @@ -22,11 +22,14 @@ * Created by obarda on 1/27/2016. */ 'use strict'; -import { DataTypesMap, PropertyModel } from 'app/models'; +import { DataTypesMap, DerivedFEProperty, PropertyDeclareAPIModel, PropertyModel } from 'app/models'; import { DataTypePropertyModel } from 'app/models/data-type-properties'; import { DataTypesService } from 'app/services'; import { ValidationUtils } from 'app/utils'; -import {InstanceFeDetails} from "app/models/instance-fe-details"; +import { PropertiesUtils } from "../../../ng2/pages/properties-assignment/services/properties.utils"; +import { InstanceFeDetails } from "app/models/instance-fe-details"; +import { SubPropertyToscaFunction } from 'app/models/sub-property-tosca-function'; +import { ToscaGetFunction } from 'app/models/tosca-get-function'; import * as _ from 'lodash'; export interface IDataTypeFieldsStructureScope extends ng.IScope { @@ -47,12 +50,20 @@ export interface IDataTypeFieldsStructureScope extends ng.IScope { dataTypesService: DataTypesService; constraints: string[]; isService:boolean; + showToscaFunction: Map<string, boolean>; + subpropertyMap: Map<string, PropertyDeclareAPIModel>; + complexToscapath: string; expandAndCollapse(): void; getValidationPattern(type: string): RegExp; validateIntRange(value: string): boolean; onValueChange(propertyName: string, type: string): void; - inputOnValueChange(property: any): void; + inputOnValueChange(property: any, value: any): void; + onEnableTosca(toscaFlag:boolean,propertyName:string); + verifyTosca(propertyName: string) : boolean; + getSubProperty(propertyName: string) : PropertyDeclareAPIModel; + getToscaPathValue(propertyName: string) : Array<string>; + onGetToscaFunction(toscaGetFunction: ToscaGetFunction, propertyName:string); } export class DataTypeFieldsStructureDirective implements ng.IDirective { @@ -70,7 +81,8 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective { defaultValue: '@', types: '=', expandByDefault: '=', - isService: '=' + isService: '=', + complexToscapath: '=' }; restrict = 'E'; @@ -78,13 +90,15 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective { constructor(private DataTypesService: DataTypesService, private PropertyNameValidationPattern: RegExp, - private ValidationUtils: ValidationUtils) { + private ValidationUtils: ValidationUtils, + private PropertiesUtils: PropertiesUtils) { } public static factory = (DataTypesService: DataTypesService, PropertyNameValidationPattern: RegExp, - ValidationUtils: ValidationUtils) => { - return new DataTypeFieldsStructureDirective(DataTypesService, PropertyNameValidationPattern, ValidationUtils); + ValidationUtils: ValidationUtils, + PropertiesUtils: PropertiesUtils) => { + return new DataTypeFieldsStructureDirective(DataTypesService, PropertyNameValidationPattern, ValidationUtils, PropertiesUtils); } template = (): string => { return require('./data-type-fields-structure.html'); @@ -96,7 +110,20 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective { scope.$watchCollection('[typeName,fieldsPrefixName]', (newData: any): void => { this.rerender(scope); }); - + let childProp = this.PropertiesUtils.convertAddPropertyBAToPropertyFE(scope.parentProperty); + scope.subpropertyMap = new Map<string,PropertyDeclareAPIModel>(); + scope.showToscaFunction = new Map<string,boolean>(); + childProp.flattenedChildren.forEach(prop => { + scope.showToscaFunction.set(prop.name,false); + if (scope.parentProperty.subPropertyToscaFunctions != null) { + scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => { + if (SubPropertyToscaFunction.subPropertyPath.toString() == prop.name) { + scope.showToscaFunction.set(prop.name,true); + } + }); + } + scope.subpropertyMap.set(prop.name,new PropertyDeclareAPIModel(childProp, prop)); + }); scope.expandAndCollapse = (): void => { if (!scope.expanded) { this.initDataOnScope(scope, $attr); @@ -130,6 +157,65 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective { || scope.onValueChange(property.name, (property.simpleType || property.type))); return value; }; + + scope.onEnableTosca = (toscaFlag:boolean,key:string):void => { + scope.showToscaFunction.set(key,toscaFlag); + scope.valueObjRef[key] = ""; + if (!toscaFlag) { + if (scope.parentProperty.subPropertyToscaFunctions != null) { + let subToscaFunctionList : Array<SubPropertyToscaFunction> = []; + scope.parentProperty.subPropertyToscaFunctions.forEach((SubPropertyToscaFunction, index) => { + if (SubPropertyToscaFunction.subPropertyPath.toString() != key) { + subToscaFunctionList.push(SubPropertyToscaFunction); + } + }); + scope.parentProperty.subPropertyToscaFunctions = subToscaFunctionList; + } + } + }; + + scope.verifyTosca = (propName:string) : boolean => { + return scope.showToscaFunction.get(propName); + } + + scope.getSubProperty = (propertyName: string) : PropertyDeclareAPIModel => { + return scope.subpropertyMap.get(propertyName); + } + + scope.getToscaPathValue = (propertyName: string) : Array<string> => { + const parentObj : PropertyDeclareAPIModel = scope.subpropertyMap.get(propertyName); + if (parentObj.input instanceof DerivedFEProperty) { + return parentObj.input.toscaPath; + } + return [propertyName]; + } + + scope.onGetToscaFunction = (toscaGetFunction: ToscaGetFunction, key:string): void => { + let toscaPath = key; + scope.valueObjRef[key] = ""; + if (scope.parentProperty.subPropertyToscaFunctions != null) { + let toscaFlag : boolean = true + scope.parentProperty.subPropertyToscaFunctions.forEach(SubPropertyToscaFunction => { + if (SubPropertyToscaFunction.subPropertyPath.toString() == toscaPath) { + SubPropertyToscaFunction.toscaFunction = toscaGetFunction; + toscaFlag = false; + return; + } + }); + if (toscaFlag) { + let subPropertyToscaFunction = new SubPropertyToscaFunction(); + subPropertyToscaFunction.toscaFunction = toscaGetFunction; + subPropertyToscaFunction.subPropertyPath = [toscaPath]; + scope.parentProperty.subPropertyToscaFunctions.push(subPropertyToscaFunction); + } + } else { + let subPropertyToscaFunction = new SubPropertyToscaFunction(); + subPropertyToscaFunction.toscaFunction = toscaGetFunction; + subPropertyToscaFunction.subPropertyPath = [toscaPath]; + scope.parentProperty.subPropertyToscaFunctions = [subPropertyToscaFunction]; + } + } + } // public types=Utils.Constants.PROPERTY_DATA.TYPES; @@ -191,4 +277,4 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective { } } -DataTypeFieldsStructureDirective.factory.$inject = ['Sdc.Services.DataTypesService', 'PropertyNameValidationPattern', 'ValidationUtils']; +DataTypeFieldsStructureDirective.factory.$inject = ['Sdc.Services.DataTypesService', 'PropertyNameValidationPattern', 'ValidationUtils','PropertiesUtils']; |