diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/logic/properties-table')
4 files changed, 81 insertions, 59 deletions
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html index 14b6c7d4c0..4805875d83 100644 --- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html @@ -10,7 +10,16 @@ </div> <div class="table-cell" *ngIf="!canBeDeclared && !property.isChildOfListOrMap">{{property.name}}</div> <!-- simple children of complex type within map or list --> <div class="table-cell map-entry" *ngIf="property.isChildOfListOrMap && propType == derivedPropertyTypes.MAP"><!-- map left cell --> - <input [value]="property.mapKey" #mapKey (change)="mapKeyChanged.emit(mapKey)" [readonly]="readonly" type="text" [ngClass]="{'disabled':readonly, 'error':!mapKey.validity.valid}" required/> + <!--<input [value]="property.mapKey" [placeholder]="property.name" (input)="mapKeyChanged.emit($event.target.value)" [readonly]="readonly" type="text" [ngClass]="{'disabled':readonly, 'error':property.mapKeyError}" required/>--> + <dynamic-element #mapKeyInput + class="value-input" + pattern="validationUtils.getValidationPattern(string)" + [value]="property.mapKey" + type="string" + [name]="property.name" + (elementChanged)="mapKeyChanged.emit($event.value)" + [readonly]="readonly" + ></dynamic-element> </div> </ng-container> <!-- RIGHT CELL OR FULL WIDTH CELL--> @@ -18,11 +27,11 @@ <div class="table-cell"> <dynamic-element class="value-input" pattern="validationUtils.getValidationPattern(property.type)" - [(value)]="property.valueObj" + [value]="property.valueObj" [type]="property.isDeclared ? 'string' : property.type" [name]="property.name" [path]="property.propertiesName" - (valueChange)="valueChanged.emit();" + (elementChanged)="onElementChanged($event)" [readonly]="readonly || property.isDeclared || property.isDisabled" ></dynamic-element> </div> @@ -54,8 +63,8 @@ [propertyNameSearchText]="propertyNameSearchText" [readonly]="readonly" [hasChildren]="getHasChildren(prop)" - (valueChanged)="childValueChanged(prop)" - (mapKeyChanged)="removeValueFromParent(prop, $event)" + (propertyChanged)="childValueChanged(prop)" + (mapKeyChanged)="updateChildKeyInParent(prop, $event)" (expandChild)="expandChildById($event)" (deleteItem)="deleteListOrMapItem($event)" (clickOnPropertyRow)="onClickPropertyRow($event)" diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts index 04cb26d030..6f7e57b643 100644 --- a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts @@ -18,13 +18,15 @@ * ============LICENSE_END========================================================= */ -import {Component, Input, Output, EventEmitter} from "@angular/core"; +import * as _ from "lodash"; +import {Component, Input, Output, EventEmitter, ViewChild, ComponentRef} from "@angular/core"; import { PropertyFEModel, DerivedFEProperty, DerivedPropertyType } from "app/models"; import { PROPERTY_TYPES } from 'app/utils'; import { DataTypeService } from "../../../../services/data-type.service"; import { trigger, state, style, transition, animate } from '@angular/core'; import {PropertiesUtils} from "../../../../pages/properties-assignment/services/properties.utils"; - +import {IUiElementChangeEvent} from "../../../ui/form-components/ui-element-base.component"; +import {DynamicElementComponent} from "../../../ui/dynamic-element/dynamic-element.component"; @Component({ selector: 'dynamic-property', @@ -49,7 +51,7 @@ export class DynamicPropertyComponent { @Input() hasChildren: boolean; @Input() hasDeclareOption:boolean; - @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>(); + @Output('propertyChanged') emitter: EventEmitter<void> = new EventEmitter<void>(); @Output() expandChild: EventEmitter<string> = new EventEmitter<string>(); @Output() checkProperty: EventEmitter<string> = new EventEmitter<string>(); @Output() deleteItem: EventEmitter<string> = new EventEmitter<string>(); @@ -57,6 +59,7 @@ export class DynamicPropertyComponent { @Output() mapKeyChanged: EventEmitter<string> = new EventEmitter<string>(); @Output() addChildPropsToParent: EventEmitter<Array<DerivedFEProperty>> = new EventEmitter<Array<DerivedFEProperty>>(); + @ViewChild('mapKeyInput') public mapKeyInput: DynamicElementComponent; constructor(private propertiesUtils: PropertiesUtils, private dataTypeService: DataTypeService) { } @@ -68,6 +71,17 @@ export class DynamicPropertyComponent { this.nestedLevel = (this.property.propertiesName.match(/#/g) || []).length; } + ngDoCheck() { + // set custom error for mapKeyInput + if (this.mapKeyInput) { + const mapKeyInputControl = this.mapKeyInput.cmpRef.instance.control; + const mapKeyError = (<DerivedFEProperty>this.property).mapKeyError; + if (mapKeyInputControl.getError('mapKeyError') !== mapKeyError) { + mapKeyInputControl.setErrors({mapKeyError}); + } + } + } + onClickPropertyRow = (property, event) => { // Because DynamicPropertyComponent is recrusive second time the event is fire event.stopPropagation = undefined @@ -91,9 +105,15 @@ export class DynamicPropertyComponent { }).length > 1; } + onElementChanged = (event: IUiElementChangeEvent) => { + this.property.updateValueObj(event.value, event.isValid); + this.emitter.emit(); + }; + createNewChildProperty = (): void => { - let newProps: Array<DerivedFEProperty> = this.propertiesUtils.createListOrMapChildren(this.property, "", undefined); + let newProps: Array<DerivedFEProperty> = this.propertiesUtils.createListOrMapChildren(this.property, "", null); + this.propertiesUtils.assignFlattenedChildrenValues(this.property.valueObj, [newProps[0]], this.property.propertiesName); if (this.property instanceof PropertyFEModel) { this.addChildProps(newProps, this.property.name); } else { @@ -108,28 +128,25 @@ export class DynamicPropertyComponent { this.property.flattenedChildren.splice(insertIndex, 0, ...newProps); //using ES6 spread operator this.expandChildById(newProps[0].propertiesName); - - if(!newProps[0].schema.property.isSimpleType){ - if ( newProps[0].mapKey ) {//prevent update the new item value on parent property valueObj and saving on BE if it is map item, it will be updated and saved only after user enter key (when it is list item- the map key is the es type) - this.updateMapKeyValueOnMainParent(newProps); - if (this.property.getParentNamesArray(newProps[0].propertiesName, []).indexOf('') === -1) { - this.valueChanged.emit(this.property.name); - } - } - } + this.updateMapKeyValueOnMainParent(newProps); + this.emitter.emit(); } } updateMapKeyValueOnMainParent(childrenProps: Array<DerivedFEProperty>){ if (this.property instanceof PropertyFEModel) { + const property: PropertyFEModel = <PropertyFEModel>this.property; //Update only if all this property parents has key name - if (this.property.getParentNamesArray(childrenProps[0].propertiesName, []).indexOf('') === -1){ + if (property.getParentNamesArray(childrenProps[0].propertiesName, []).indexOf('') === -1){ angular.forEach(childrenProps, (prop:DerivedFEProperty):void => { //Update parent PropertyFEModel with value for each child, including nested props - (<PropertyFEModel>this.property).childPropUpdated(prop); + property.childPropUpdated(prop); + if (prop.isChildOfListOrMap && prop.mapKey !== undefined) { + property.childPropMapKeyUpdated(prop, prop.mapKey, true); + } },this); //grab the cumulative value for the new item from parent PropertyFEModel and assign that value to DerivedFEProp[0] (which is the list or map parent with UUID of the set we just added) - let parentNames = (<PropertyFEModel>this.property).getParentNamesArray(childrenProps[0].propertiesName, []); - childrenProps[0].valueObj = _.get(this.property.valueObj, parentNames.join('.')); + let parentNames = (<PropertyFEModel>property).getParentNamesArray(childrenProps[0].propertiesName, []); + childrenProps[0].valueObj = _.get(property.valueObj, parentNames.join('.'), null); } } } @@ -140,7 +157,7 @@ export class DynamicPropertyComponent { if (this.property.getParentNamesArray(property.propertiesName, []).indexOf('') === -1) {//If one of the parents is empty key -don't save this.property.childPropUpdated(property); this.dataTypeService.checkForCustomBehavior(this.property); - this.valueChanged.emit(this.property.name); + this.emitter.emit(); } } } @@ -153,46 +170,42 @@ export class DynamicPropertyComponent { } } - removeValueFromParent = (item: DerivedFEProperty, target?: any) => { + removeValueFromParent = (item: DerivedFEProperty) => { if (this.property instanceof PropertyFEModel) { - let itemParent = (item.parentName == this.property.name) ? this.property : this.property.flattenedChildren.find(prop => prop.propertiesName == item.parentName); + let itemParent = (item.parentName == this.property.name) + ? this.property : this.property.flattenedChildren.find(prop => prop.propertiesName == item.parentName); + if (!itemParent) { + return; + } if (item.derivedDataType == DerivedPropertyType.MAP) { - let oldKey = item.mapKey; - if (target && typeof target.value == 'string') { //allow saving empty string - let replaceKey:string = target.value; - if (!replaceKey) {//prevent delete map key - return; - } - if(Object.keys(itemParent.valueObj).indexOf(replaceKey) > -1){//the key is exists - target.setCustomValidity('This key is already exists.'); - return; - }else { - target.setCustomValidity(''); - _.set(itemParent.valueObj, replaceKey, itemParent.valueObj[oldKey]); - item.mapKey = replaceKey; - //If the map key was empty its valueObj was not updated on its prent property valueObj, and now we should update it. - if(!oldKey && !item.schema.property.isSimpleType){ - //Search this map item children and update these value on parent property valueOBj - let mapKeyFlattenChildren:Array<DerivedFEProperty> = _.filter(this.property.flattenedChildren, (prop:DerivedFEProperty) => { - return _.startsWith(prop.propertiesName, item.propertiesName); - }); - this.updateMapKeyValueOnMainParent(mapKeyFlattenChildren); - } - } - } + const oldKey = item.getActualMapKey(); delete itemParent.valueObj[oldKey]; + if (itemParent instanceof PropertyFEModel) { + delete itemParent.valueObjValidation[oldKey]; + itemParent.valueObjIsValid = itemParent.calculateValueObjIsValid(); + } + this.property.childPropMapKeyUpdated(item, null); // remove map key } else { - let itemIndex: number = this.property.flattenedChildren.filter(prop => prop.parentName == item.parentName).map(prop => prop.propertiesName).indexOf(item.propertiesName); + const itemIndex: number = this.property.flattenedChildren.filter(prop => prop.parentName == item.parentName).map(prop => prop.propertiesName).indexOf(item.propertiesName); itemParent.valueObj.splice(itemIndex, 1); - } - if (item.mapKey) {//prevent going to BE if user tries to delete map item without key (it was not saved in BE) - if (itemParent instanceof PropertyFEModel) { //direct child - this.valueChanged.emit(this.property.name); - } else { //nested child - need to update parent prop by getting flattened name (recurse through parents and replace map/list keys, etc) - this.childValueChanged(itemParent); + if (itemParent instanceof PropertyFEModel) { + itemParent.valueObjValidation.splice(itemIndex, 1); + itemParent.valueObjIsValid = itemParent.calculateValueObjIsValid(); } } + if (itemParent instanceof PropertyFEModel) { //direct child + this.emitter.emit(); + } else { //nested child - need to update parent prop by getting flattened name (recurse through parents and replace map/list keys, etc) + this.childValueChanged(itemParent); + } + } + } + + updateChildKeyInParent(childProp: DerivedFEProperty, newMapKey: string) { + if (this.property instanceof PropertyFEModel) { + this.property.childPropMapKeyUpdated(childProp, newMapKey); + this.emitter.emit(); } } diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html index 933b80f577..ecfa7e7c5e 100644 --- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html @@ -48,7 +48,7 @@ [expandedChildId]="property.expandedChildPropertyId" [propertyNameSearchText]="propertyNameSearchText" [readonly]="readonly" - (valueChanged)="propValueChanged(property);" + (propertyChanged)="onPropertyChanged(property)" (expandChild)="property.updateExpandedChildPropertyId($event)" (clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceId)" (checkProperty)="propertyChecked(property, $event)" diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts index 32bbb1b3a0..093fae1684 100644 --- a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts @@ -39,7 +39,7 @@ export class PropertiesTableComponent { @Input() hasDeclareOption:boolean; @Input() hidePropertyType:boolean; - @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>(); + @Output('propertyChanged') emitter: EventEmitter<PropertyFEModel> = new EventEmitter<PropertyFEModel>(); @Output() selectPropertyRow: EventEmitter<PropertyRowSelectedEvent> = new EventEmitter<PropertyRowSelectedEvent>(); @Output() updateCheckedPropertyCount: EventEmitter<boolean> = new EventEmitter<boolean>();//only for hasDeclareOption @@ -49,8 +49,8 @@ export class PropertiesTableComponent { ngOnInit() { } - propValueChanged = (property) => { - this.valueChanged.emit(property); + onPropertyChanged = (property) => { + this.emitter.emit(property); }; // Click on main row (row of propertyFEModel) |