diff options
Diffstat (limited to 'catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure')
3 files changed, 382 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.html b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.html new file mode 100644 index 0000000000..8560e66978 --- /dev/null +++ b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.html @@ -0,0 +1,81 @@ +<div class="data-type-fields-structure"> + <div class="open-close"> + <div class="open-close-button" data-ng-class="{'expand':expand,'collapse':!expand}" + data-ng-click="expandAndCollapse()"></div> + <span class="data-type-name">{{typeName.replace("org.openecomp.datatypes.heat.","")}}</span> + </div> + <div data-ng-show="expand" data-ng-repeat="property in dataTypeProperties" class="property" data-ng-init="property.isAlreadyInput = isAlreadyInput(property)"> + + <sdc-radio-button sdc-model="dataTypesService.selectedPropertiesName" value="{{path + '#' + property.name}}" data-ng-if="path && !property.isAlreadyInput" + disabled="false" elem-name="selectedPropertiesName" elem-id="{{path + '#' + property.name}}" class="selectPropertyType" + on-value-change="setSelectedType(property)" data-tests-id="propertyRadioButton_{{property.name}}"></sdc-radio-button> + <div class="existInputContainer" data-ng-if="property.isAlreadyInput"><span class="existInput"></span></div> + <div class="i-sdc-form-item property-name"> + <div tooltips tooltip-content="{{property.name}}"> + <input class="i-sdc-form-input" + type="text" + data-ng-disabled="true" + value="{{property.name}}"/> + </div> + </div> + <div data-ng-if="dataTypesService.isDataTypeForDataTypePropertyType(property)" class="inner-structure"> + <select-fields-structure value-obj-ref="(valueObjRef[property.name])" + type-name="property.type" + parent-form-obj="parentFormObj" + fields-prefix-name="fieldsPrefixName+property.name" + read-only="readOnly" + default-value="{{currentTypeDefaultValue[property.name]}}" + path="{{path + '#' + property.name}}" + is-parent-already-input="isParentAlreadyInput" + ></select-fields-structure> + + </div> + <div data-ng-if="!dataTypesService.isDataTypeForDataTypePropertyType(property)" ng-switch="property.type"> + <div ng-switch-when="map"> + <select-type-map value-obj-ref="valueObjRef[property.name]" + schema-property="property.schema.property" + parent-form-obj="parentFormObj" + fields-prefix-name="fieldsPrefixName+property.name" + read-only="readOnly" + default-value="{{currentTypeDefaultValue[property.name]}}" + ></select-type-map> + </div> + <div ng-switch-when="list"> + <select-type-list value-obj-ref="valueObjRef[property.name]" + schema-property="property.schema.property" + parent-form-obj="parentFormObj" + fields-prefix-name="fieldsPrefixName+property.name" + read-only="readOnly" + default-value="{{currentTypeDefaultValue[property.name]}}" + ></select-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)}"> + <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-disabled="readOnly" + maxlength="100" + data-ng-model="valueObjRef[property.name]" + type="text" + name="{{fieldsPrefixName+property.name}}" + data-ng-model-options="{ debounce: 200 }" + data-ng-change="!parentFormObj[fieldsPrefixName+property.name].$error.pattern && ('integer'==property.type && parentFormObj[fieldsPrefixName+property.name].$setValidity('pattern', validateIntRange(valueObjRef[property.name])) || onValueChange(property.name, (property.simpleType||property.type)))" + 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> + </div> + </div> + </div> +</div> diff --git a/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.less b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.less new file mode 100644 index 0000000000..43d2d646a1 --- /dev/null +++ b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.less @@ -0,0 +1,117 @@ + +.selectPropertyType { + .tlv-radio-label { + margin-top: -7px; + } +} + +.data-type-fields-structure { + background-color: @tlv_color_v; + padding: 10px; + display: table-caption; + .open-close { + position: relative; + .open-close-button { + position: absolute; + top: 50%; + margin-top: -7px; + &.expand { + .sprite-new; + .expand-collapse-minus-icon; + } + &.collapse { + .sprite-new; + .expand-collapse-plus-icon; + } + } + + } + + .existInputContainer { + height: 30px; + width: 20px; + position: relative; + } + .existInput { + .sprite-new; + .sdc-success; + position: absolute; + top: 18px; + left: 3px; + } + + .data-type-name { + .m_16_m; + margin-left: 22px; + } + + .i-sdc-form-input:disabled{ + .disabled; + &[type="text"]{ + opacity: 1 !important; + background-color: @tlv_color_t; + color:black; + } + } + + .property { + display: flex; + min-width: 365px; + min-height: 46px; + input[type="text"], select { + width: 170px; + } + .property-name { + float: left; + margin-top: 8px; + } + .primitive-value-field { + float: right; + margin-top: 8px; + margin-left: 10px; + } + .inner-structure { + display: -webkit-box; + } + } + + [ng-switch-when="map"] { + margin-top: 8px; + margin-left: 10px; + .map-item { + border: solid 1px @main_color_o; + min-width: 401px; + min-height: 69px; + float: none !important; + } + .add-map-item { + width: auto; + float: none; + &:nth-child(1) { + position: relative; + top: 6px; + } + .add-btn { + float: none; + } + } + + } + + [ng-switch-when="list"] { + float: left; + margin-top: 8px; + margin-left: 10px; + min-width: 280px; + .dt-list-item { + border: solid 1px @main_color_o; + } + .list-value-items { + width: 280px; + } + } +} + + + + diff --git a/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.ts b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.ts new file mode 100644 index 0000000000..aee4b3b6af --- /dev/null +++ b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.ts @@ -0,0 +1,184 @@ +/** + * Created by obarda on 1/27/2016. + */ +'use strict'; +import {ValidationUtils} from "app/utils"; +import { DataTypesService } from "app/services"; +import { DataTypePropertyModel } from "app/models/data-type-properties"; +import {DataTypesMap, PropertyModel} from "app/models"; + +export interface ISelectDataTypeFieldsStructureScope extends ng.IScope { + parentFormObj:ng.IFormController; + dataTypeProperties:Array<DataTypePropertyModel>; + typeName:string; + valueObjRef:any; + propertyNameValidationPattern:RegExp; + fieldsPrefixName:string; + readOnly:boolean; + currentTypeDefaultValue:any; + types:DataTypesMap; + expandByDefault:boolean; + expand:boolean; + expanded:boolean; + dataTypesService:DataTypesService; + path:string; + isParentAlreadyInput:boolean; + + expandAndCollapse():void; + getValidationPattern(type:string):RegExp; + validateIntRange(value:string):boolean; + isAlreadyInput(property:PropertyModel):boolean; + setSelectedType(property:PropertyModel):void; + onValueChange(propertyName:string, type:string):void; +} + + +export class SelectDataTypeFieldsStructureDirective implements ng.IDirective { + + constructor(private DataTypesService:DataTypesService, + private PropertyNameValidationPattern:RegExp, + private ValidationUtils:ValidationUtils) { + } + + scope = { + valueObjRef: '=', + typeName: '=', + parentFormObj: '=', + fieldsPrefixName: '=', + readOnly: '=', + defaultValue: '@', + expandByDefault: '=', + path: '@', + isParentAlreadyInput: '=' + }; + + restrict = 'E'; + replace = true; + template = ():string => { + return require('./select-data-type-fields-structure.html'); + }; + // public types=Utils.Constants.PROPERTY_DATA.TYPES; + + //get data type properties array and return object with the properties and their default value + //(for example: get: [{name:"prop1",defaultValue:1 ...},{name:"prop2", defaultValue:"bla bla" ...}] + // return: {prop1: 1, prop2: "bla bla"} + private getDefaultValue = (dataTypeProperties:Array<DataTypePropertyModel>):any => { + let defaultValue = {}; + for (let i = 0; i < dataTypeProperties.length; i++) { + if (dataTypeProperties[i].type != 'string') { + if (!angular.isUndefined(dataTypeProperties[i].defaultValue)) { + defaultValue[dataTypeProperties[i].name] = JSON.parse(dataTypeProperties[i].defaultValue); + } + } else { + defaultValue[dataTypeProperties[i].name] = dataTypeProperties[i].defaultValue; + } + } + return defaultValue; + }; + + private initDataOnScope = (scope:ISelectDataTypeFieldsStructureScope, $attr:any):void => { + scope.dataTypesService = this.DataTypesService; + scope.dataTypeProperties = angular.copy(this.DataTypesService.getFirsLevelOfDataTypeProperties(scope.typeName)); + if ($attr.defaultValue) { + scope.currentTypeDefaultValue = JSON.parse($attr.defaultValue); + } else { + scope.currentTypeDefaultValue = this.getDefaultValue(scope.dataTypeProperties); + } + + if (!scope.valueObjRef) { + scope.valueObjRef = {}; + } + + _.forEach(scope.currentTypeDefaultValue, (value, key)=> { + if (angular.isUndefined(scope.valueObjRef[key])) { + if (typeof scope.currentTypeDefaultValue[key] == 'object') { + angular.copy(scope.currentTypeDefaultValue[key], scope.valueObjRef[key]); + } else { + scope.valueObjRef[key] = scope.currentTypeDefaultValue[key]; + } + } + }); + }; + + private rerender = (scope:any):void => { + scope.expanded = false; + scope.expand = false; + if (scope.expandByDefault) { + scope.expandAndCollapse(); + } + }; + + link = (scope:ISelectDataTypeFieldsStructureScope, element:any, $attr:any) => { + scope.propertyNameValidationPattern = this.PropertyNameValidationPattern; + + scope.$watchCollection('[typeName,fieldsPrefixName]', (newData:any):void => { + this.rerender(scope); + }); + + + scope.expandAndCollapse = ():void => { + if (!scope.expanded) { + this.initDataOnScope(scope, $attr); + scope.expanded = true; + } + scope.expand = !scope.expand; + }; + + scope.getValidationPattern = (type:string):RegExp => { + return this.ValidationUtils.getValidationPattern(type); + }; + + scope.validateIntRange = (value:string):boolean => { + return !value || this.ValidationUtils.validateIntRange(value); + }; + + /* + check if property is alrady declered on the service by meatching the input name & the property name + + */ + scope.isAlreadyInput = (property:PropertyModel):boolean => { + if (scope.path) { + if (scope.isParentAlreadyInput) { + return true; + } + let parentInputName = this.DataTypesService.selectedInstance.normalizedName + '_' + scope.path.replace('#', '_');// set the input parent as he need to declared as input + let inputName = parentInputName + '_' + property.name;// set the input name as he need to declared as input + let selectedProperty = _.find(this.DataTypesService.selectedComponentInputs, (componentInput)=> { + if (componentInput.name == parentInputName) { //check if the parent(all the complex) is already declared + scope.isParentAlreadyInput = true; + return true; + } else if (componentInput.name.substring(0, inputName.length) == inputName) { //check if specific property inside the complex + return true; + } + //return componentInput.name == parentInputName || componentInput.name.substring(0,inputName.length) == inputName;//check if the parent(all the complex) is already declared or specific property inside the complex + }); + if (selectedProperty) { + return true; + } + } + return false; + }; + + scope.setSelectedType = (property:PropertyModel):void=> { + scope.dataTypesService.selectedInput = property; + scope.dataTypesService.selectedPropertiesName = scope.path + '#' + property.name; + }; + + scope.onValueChange = (propertyName:string, type:string):void => { + scope.valueObjRef[propertyName] = !angular.isUndefined(scope.valueObjRef[propertyName]) ? scope.valueObjRef[propertyName] : scope.currentTypeDefaultValue[propertyName]; + if (scope.valueObjRef[propertyName] && type != 'string') { + scope.valueObjRef[propertyName] = JSON.parse(scope.valueObjRef[propertyName]); + } + }; + + + }; + + public static factory = (DataTypesService:DataTypesService, + PropertyNameValidationPattern:RegExp, + ValidationUtils:ValidationUtils)=> { + return new SelectDataTypeFieldsStructureDirective(DataTypesService, PropertyNameValidationPattern, ValidationUtils); + }; +} + +SelectDataTypeFieldsStructureDirective.factory.$inject = ['Sdc.Services.DataTypesService', 'PropertyNameValidationPattern', 'ValidationUtils']; |