diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/properties-table/map-property')
2 files changed, 159 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.html new file mode 100644 index 0000000000..e1975175a8 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.html @@ -0,0 +1,38 @@ +<div class="add-data-row"> + <div class="sprite-new add-item-icon" (click)="addMapItemFields()"></div> +</div> + +<!--the ngFor runs on dummy array in mapKey array length and not on maKeys array in order to prevent from page do the ngFor again when user changes a key--> +<template ngFor let-num [ngForOf]="getNumber(mapKeys.length)" let-i="index"> + <div class="table-inner-row" + [ngClass]="{'selected': property.schema.property.isDataType && selectedPropertyId === property.childrenProperties[i].treeNodeId}" + (click)="property.schema.property.isDataType && onChildPropertySelected(property.childrenProperties[i])"> + <div class="table-cell"> + <input class="value-input" (keyup)="changeKeyOfMap(mapKeys[i], i);$event.stopPropagation();" + [(ngModel)]="mapKeys[i]" + name="mapKey{{property.treeNodeId}}{{i}}" + (change)="propValueChanged()"/> + </div> + <div class="table-cell"> + <input class="value-input" *ngIf="property.schema.property.isSimpleType" + [(ngModel)]="property.valueObjectRef[mapKeys[i]]" + type="property.schema.property.derivedFromSimpleTypeName || property.schema.property.type" + (change)="propValueChanged()"/> + <div *ngIf="property.schema.property.isDataType"> + <div>{{ property.schema.property.type | contentAfterLastDot }}</div> + <span (click)="property.updateExpandedChildPropertyId(property.childrenProperties[i].treeNodeId)">V</span> + </div> + <span class="delete-span sprite-new delete-item-icon" (click)="deleteMapItem(i)"></span> + </div> + </div> + <div class="table-inner-row" *ngIf="property.schema.property.isDataType && property.expandedChildPropertyId == property.childrenProperties[i].treeNodeId"> + <div class="inner-table-container"> + <properties-value-inner-table [property]="property.childrenProperties[i]" + [selectedPropertyId]="selectedPropertyId" + [propertyNameSearchText]="propertyNameSearchText" + (selectChildProperty)="onChildPropertySelected($event)" + (valueChanged)="propValueChanged()"></properties-value-inner-table> + </div> + </div> +</template> + diff --git a/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.ts new file mode 100644 index 0000000000..d62d0b94e3 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.ts @@ -0,0 +1,121 @@ +/** + * Created by rc2122 on 4/24/2017. + */ +/** + * Created by rc2122 on 4/23/2017. + */ +import {Component, Input, Output, EventEmitter} from "@angular/core"; +import { PropertyFEModel} from "app/models"; +import { PropertiesService } from "../../../services/properties.service"; +import {ComponentType} from "app/utils"; +import {UUID} from "angular2-uuid"; + +@Component({ + selector: 'map-property', + templateUrl: './map-property.component.html', + styleUrls: ['../properties-value-inner-table/properties-value-inner-table.component.less'] +}) +export class MapPropertyComponent { + + @Input() property: PropertyFEModel; + @Input() selectedPropertyId: string; + @Input() propertyNameSearchText:string; + + @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>(); + @Output() selectChildProperty: EventEmitter<any> = new EventEmitter<PropertyFEModel>(); + + constructor ( private propertiesService:PropertiesService){ + } + + mapKeys:Array<string>; + + ngOnInit() { + this.mapKeys = Object.keys(this.property.valueObjectRef); + } + + propValueChanged = () => { + this.valueChanged.emit(this.property); + }; + + onChildPropertySelected = (property) => { + this.selectChildProperty.emit(property); + }; + + getNumber = (num:number):Array<any> => { + return new Array(num); + } + + createNewChildProperty = (mapKey:string):void => { + + let newProperty: PropertyFEModel = new PropertyFEModel(mapKey, + this.property.schema.property.type, + UUID.UUID(), this.property, + this.property.valueObjectRef[mapKey]); + this.propertiesService.createPropertiesTreeForProp(newProperty); + this.property.childrenProperties = this.property.childrenProperties || []; + this.property.childrenProperties.push(newProperty); + } + + //get: new key and the index of this item in the map + //This method checks if the new key isn't exist already in the map and update the object and the children array with the new key + changeKeyOfMap = (newKey:string, index:number):void => { + //let fieldName:string = "mapKey" + this.property.treeNodeId + index; + let oldKey:string = Object.keys(this.property.valueObjectRef)[index]; + let existsKeyIndex:number = Object.keys(this.property.valueObjectRef).indexOf(newKey); + if (existsKeyIndex > -1 && existsKeyIndex != index) { + //error for exists key validation + } else { + //remove error for exists key validation and if the form is valid - update the map object + let newObj = {}; + angular.forEach(this.property.valueObjectRef,function(value:any,key:string){ + if(key == oldKey){ + newObj[newKey] = value; + }else{ + newObj[key] = value; + } + }); + this.property.valueObjectRef = newObj; + this.property.parent.valueObjectRef[this.property.name] = this.property.valueObjectRef;//in order to prevent break ref + if(this.property.childrenProperties){ + this.property.childrenProperties[index].name = newKey;//update this property childrenProperties with the new key + } + } + } + + //get: index of the item in the map + //This method removes item from map. + deleteMapItem = (index:number):void=> { + delete this.property.valueObjectRef[this.mapKeys[index]]; + this.mapKeys.splice(index, 1); + if(this.property.childrenProperties){ + this.property.childrenProperties.splice(index, 1); + } + if (!this.mapKeys.length) {//only when user removes all pairs of key-value fields - put the default + if (this.property.defaultValue) { + angular.copy(JSON.parse(this.property.defaultValue), this.property.valueObjectRef); + this.mapKeys = Object.keys(this.property.valueObjectRef); + if (this.property.schema.property.isDataType){ + angular.forEach(this.property.valueObjectRef, (value, key) => { + this.createNewChildProperty(key); + }, this); + } + } + } + this.valueChanged.emit(this.property); + } + + //This method inserts new empty item to map + addMapItemFields = ():void => { + this.property.valueObjectRef = this.property.valueObjectRef || {}; + if (this.property.schema.property.isSimpleType){ + this.property.valueObjectRef[''] = null; + }else{ + if(!this.property.valueObjectRef['']){ + this.property.valueObjectRef[''] = {}; + this.createNewChildProperty(''); + } + } + this.mapKeys = Object.keys(this.property.valueObjectRef); + } +} + |