From b3d4898d9e8452ea0b8d848c048e712d43b8d9a3 Mon Sep 17 00:00:00 2001 From: Michael Lando Date: Sun, 11 Jun 2017 14:22:02 +0300 Subject: [SDC-29] rebase continue work to align source Change-Id: I218f1c5ee23fb2c8314f1c70921d3ad8682c10f4 Signed-off-by: Michael Lando --- .../derived-property.component.html | 24 --- .../derived-property.component.less | 35 ----- .../derived-property/derived-property.component.ts | 46 ------ .../dynamic-property.component.html | 73 +++++---- .../dynamic-property.component.less | 46 +++--- .../dynamic-property/dynamic-property.component.ts | 164 +++++++++++---------- .../list-property/list-property.component.html | 33 ----- .../list-property/list-property.component.less | 3 - .../list-property/list-property.component.ts | 85 ----------- .../map-property/map-property.component.html | 38 ----- .../map-property/map-property.component.ts | 121 --------------- .../properties-table.component.html | 121 +++------------ .../properties-table.component.less | 127 ++++++---------- .../properties-table/properties-table.component.ts | 16 +- .../properties-value-inner-table.component.html | 41 ------ .../properties-value-inner-table.component.less | 71 --------- .../properties-value-inner-table.component.ts | 37 ----- 17 files changed, 217 insertions(+), 864 deletions(-) delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.html delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.less delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.html delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.less delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.html delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.html delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.less delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.ts (limited to 'catalog-ui/src/app/ng2/components/properties-table') diff --git a/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.html deleted file mode 100644 index 6e7d4e882b..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.html +++ /dev/null @@ -1,24 +0,0 @@ - -
-
- -
- -
-
-
-
-
- {{propertyObj.type | contentAfterLastDot }} - V -
-
-
-
- {{propertyObj.name}} -
-
-
-
-
- diff --git a/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.less deleted file mode 100644 index 3102c5ceb8..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.less +++ /dev/null @@ -1,35 +0,0 @@ -.derived-property-row { - display:flex; - flex-direction:row; - position:relative; - border-top: #d2d2d2 solid 1px; - - &:first-child { - border-top:none; - } - .table-cell { - flex: 0 0 50%; - padding:5px; - position:relative; - text-overflow: ellipsis; - white-space: nowrap; - - &:first-child { - border-right:#d2d2d2 solid 1px; - overflow:hidden; - } - span.expand-icon { - position: absolute; - right: 10px; - transition: 200ms transform ease-in-out; - } - span.expand-icon.expanded { - transform: rotate(-180deg); - } - } -} -.filtered { - /deep/ .checkbox-label-content{ - background-color: yellow; - } -} diff --git a/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.ts deleted file mode 100644 index 16f069a685..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.ts +++ /dev/null @@ -1,46 +0,0 @@ -/** - * Created by rc2122 on 4/20/2017. - */ -import {Component, Input, Output, EventEmitter} from "@angular/core"; -import { DerivedFEProperty, DerivedPropertyType} from "app/models"; -import {PropertiesService} from "../../../services/properties.service"; - -@Component({ - selector: 'derived-property', - templateUrl: './derived-property.component.html', - styleUrls: ['./derived-property.component.less'] -}) -export class DerivedPropertyComponent { - - derivedPropertyTypes = DerivedPropertyType; //http://stackoverflow.com/questions/35835984/how-to-use-a-typescript-enum-value-in-an-angular2-ngswitch-statement - - @Input() propertyObj: DerivedFEProperty; - @Input() propertyNameSearchText: string; - @Input() expanded: boolean; - @Output() valueChanged: EventEmitter = new EventEmitter(); - @Output() expandChild: EventEmitter = new EventEmitter(); - @Output() selectProperty: EventEmitter = new EventEmitter(); - - - constructor ( private propertiesService:PropertiesService){ - } - - - propValueChanged = () => { - this.valueChanged.emit(this.propertyObj); - }; - - expandChildById = (id: string) => { - this.expandChild.emit(id); - } - - checkedChange = (isChecked:boolean) => { - this.selectProperty.emit(isChecked); - } - - addRows = (flatProperty: DerivedFEProperty): void => { - console.log("ADDING A ROW OF TYPE " + flatProperty.type); - console.log(flatProperty); - } - -} diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html index 17e4002ae5..d6ee568c0c 100644 --- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html +++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html @@ -1,66 +1,65 @@
- + -
- +
{{property.name}}
+
+ +
- - -
+ + +
- - - -
- {{property.type | contentAfterLastDot }} -
- - -
-
-
-
- {{property.schema.property.type | contentAfterLastDot }} -
- - - -
- - V + +
{{property.type | contentAfterLastDot }}
+
{{property.schema.property.type | contentAfterLastDot }}
+ + +
+ + + + + + V
- - - + +
+ - +
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less index 53cde3035a..cb7cd39640 100644 --- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less +++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less @@ -1,40 +1,40 @@ +.flat-children-container { + dynamic-property:first-child .dynamic-property-row:not(.with-top-border) { + border-top:none; + } + .dynamic-property-row { + border-top: solid 1px #CCC; + } +} .dynamic-property-row { display:flex; flex-direction:row; - position:relative; - + align-items: center; + .table-cell { - flex: 1 0 50%; + flex: 1; padding:5px; - position:relative; text-overflow: ellipsis; white-space: nowrap; - + overflow:hidden; + min-height:32px; - &.full-width { - border-right:none; - flex: 0 0 100%; - } - - &:first-child:not(:only-child) { + &:first-child { + flex: 0 0 50%; border-right:#d2d2d2 solid 1px; - overflow:hidden; + + + &:only-of-type { + flex: 1 1 100%; + border-right:none; + } } - - } - span.delete-item-icon{ - position: absolute; - right: 25px; - top: 10px; } - span.add-item-icon { - float:right; + .property-icon { + flex: 0 0 auto; } span.expand-icon { - position: absolute; - top:6px; - right: 10px; transition: 200ms transform ease-in-out; } span.expand-icon.expanded { diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts index 0ca93a773f..1c7fbfac7a 100644 --- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts +++ b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts @@ -3,7 +3,6 @@ import { PropertyBEModel, PropertyFEModel, DerivedFEProperty, DerivedPropertyTyp import { PROPERTY_DATA, PROPERTY_TYPES } from 'app/utils'; import { PropertiesUtils } from "app/ng2/pages/properties-assignment/properties.utils"; import { DataTypeService } from "../../../services/data-type.service"; -import { UUID } from "angular2-uuid"; @Component({ @@ -17,64 +16,33 @@ export class DynamicPropertyComponent { propType: DerivedPropertyType; propPath: string; isPropertyFEModel: boolean; - mapOfIDsAndKeys: Map = new Map(); //used for map and list + childrenCount: number; - childrenCanBeDeclared: boolean; @Input() canBeDeclared: boolean; @Input() property: PropertyFEModel | DerivedFEProperty; - @Input() propChildren: Array; @Input() expandedChildId: string; @Input() selectedPropertyId: string; + @Input() propertyNameSearchText: string; + @Input() readonly: boolean; @Output() valueChanged: EventEmitter = new EventEmitter(); @Output() expandChild: EventEmitter = new EventEmitter(); @Output() checkProperty: EventEmitter = new EventEmitter(); @Output() deleteItem: EventEmitter = new EventEmitter(); @Output() clickOnPropertyRow: EventEmitter = new EventEmitter(); + @Output() mapKeyChanged: EventEmitter = new EventEmitter(); + @Output() addChildPropsToParent: EventEmitter> = new EventEmitter>(); + constructor(private propertiesUtils: PropertiesUtils, private dataTypeService: DataTypeService) { } ngOnInit() { this.isPropertyFEModel = this.property instanceof PropertyFEModel; - if (this.property instanceof PropertyFEModel) { - this.propType = this.getDerivedPropertyType(this.property.type); - this.propPath = this.property.name; - } else { - this.propType = this.property.derivedDataType; - this.propPath = this.property.propertiesName; - } - - this.childrenCanBeDeclared = this.canBeDeclared && this.propType != this.derivedPropertyTypes.MAP && this.propType != this.derivedPropertyTypes.LIST; - - if (this.propType == this.derivedPropertyTypes.LIST || this.propType == this.derivedPropertyTypes.MAP) { - this.initializeValues(); - } - + this.propType = this.property.derivedDataType; + this.propPath = (this.property instanceof PropertyFEModel) ? this.property.name : this.property.propertiesName; } - initializeValues = () => { - let tempValue: any; - if (this.property.value) { - tempValue = JSON.parse(this.property.value); - if (!_.isEmpty(tempValue)) { - tempValue.forEach((element, key) => { - let newChildID: string = this.createNewChildProperty(JSON.stringify(element)); - this.mapOfIDsAndKeys[newChildID] = key; - console.log(this.mapOfIDsAndKeys); - }); - } - } - //this.pseudoChildren = []; - //this.valueObjRef = []; - //TODO: generate necessary elements for existing values here - // if (this.propType == this.derivedPropertyTypes.LIST) { - // this.valueObjRef = (this.property.value) ? JSON.parse(this.property.value) : []; - // } else if (this.propType == this.derivedPropertyTypes.MAP) { - // this.valueObjRef = (this.property.value)? JSON.parse(this.property.value) : {}; - // } - console.log(this.property.value); - } onClickPropertyRow = (property, event) => { // Because DynamicPropertyComponent is recrusive second time the event is fire event.stopPropagation = undefined @@ -82,68 +50,106 @@ export class DynamicPropertyComponent { this.clickOnPropertyRow.emit(property); } - deleteListOrMapItem = (itemName: string) => { - this.propChildren = this.propChildren.filter(prop => prop.propertiesName.indexOf(itemName) != 0); //remove item and children; - } - - propValueChanged = (property) => { - console.log("property value change!! Prop type: " + property.type + " New value: " + property.value); - this.valueChanged.emit(property); - }; expandChildById = (id: string) => { this.expandedChildId = id; - this.expandChild.emit(id); + this.expandChild.emit(id); } checkedChange = (propName: string) => { this.checkProperty.emit(propName); } + hasChildren = (): number => { + return (this.property.valueObj && typeof this.property.valueObj == 'object') ? Object.keys(this.property.valueObj).length : 0; + } + createNewChildProperty = (): void => { + + let newProps: Array = this.propertiesUtils.createListOrMapChildren(this.property, "", null); + if (this.property instanceof PropertyFEModel) { + this.addChildProps(newProps, this.property.name); + } else { + this.addChildPropsToParent.emit(newProps); + } + } - addRows = (): void => { //from within the template, when creating empty item - let childPropId = this.createNewChildProperty(); - this.expandChildById(this.propPath + "#" + childPropId); + addChildProps = (newProps: Array, childPropName: string) => { + + if (this.property instanceof PropertyFEModel) { + let insertIndex: number = this.property.getIndexOfChild(childPropName) + this.property.getCountOfChildren(childPropName); //insert after parent prop and existing children + this.property.flattenedChildren.splice(insertIndex, 0, ...newProps); //using ES6 spread operator + this.expandChildById(newProps[0].propertiesName); + } } - createNewChildProperty = (value?:string):string => { - let propUUID:string = UUID.UUID(); - let newProp: DerivedFEProperty; - if (this.propType == this.derivedPropertyTypes.LIST) { //for list - create new prop of schema type - newProp = new DerivedFEProperty(propUUID, this.propPath, this.property.schema.property.type, value, true); - } else { //for map - create new prop of type map, with schema, but with flag that its a child - newProp = new DerivedFEProperty(propUUID, this.propPath, this.property.type, value, true, this.property.schema); + childValueChanged = (property: DerivedFEProperty) => { //value of child property changed + + if (this.property instanceof PropertyFEModel) { // will always be the case + let parentNames = this.getParentNamesArray(property.propertiesName, []); + if (parentNames.length) { + _.set(this.property.valueObj, parentNames.join('.'), property.valueObj); + } + console.log(parentNames); + this.valueChanged.emit(this.property.name); } + } + deleteListOrMapItem = (item: DerivedFEProperty) => { + if (this.property instanceof PropertyFEModel) { + this.removeValueFromParent(item); + this.property.flattenedChildren.splice(this.property.getIndexOfChild(item.propertiesName), this.property.getCountOfChildren(item.propertiesName)); + this.expandChildById(item.propertiesName); + } + } - this.propChildren = this.propChildren || []; - this.propChildren.push(newProp); + removeValueFromParent = (item: DerivedFEProperty, replaceKey?: string) => { + if (this.property instanceof PropertyFEModel) { + let itemParent = (item.parentName == this.property.name) ? this.property : this.property.flattenedChildren.find(prop => prop.propertiesName == item.parentName); + + if (item.derivedDataType == DerivedPropertyType.MAP) { + let oldKey = item.mapKey; + if (typeof replaceKey == 'string') { //allow saving empty string + _.set(itemParent.valueObj, replaceKey, itemParent.valueObj[oldKey]); + item.mapKey = replaceKey; + } + delete itemParent.valueObj[oldKey]; + } else { + let itemIndex: number = this.property.flattenedChildren.filter(prop => prop.parentName == item.parentName).map(prop => prop.propertiesName).indexOf(item.propertiesName); + itemParent.valueObj.splice(itemIndex, 1); + } - //if it's a complex type, add children properties - if (!this.property.schema.property.isSimpleType) { - let schemaDataType: DataTypeModel = this.dataTypeService.getDataTypeByTypeName(this.property.schema.property.type); - this.dataTypeService.getDerivedDataTypeProperties(schemaDataType, this.propChildren, newProp.propertiesName); - this.propertiesUtils.assignValuesRecursively(JSON.parse(value), this.propChildren, newProp.propertiesName); - console.log(JSON.stringify(this.propChildren)); + 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); + } } + } - return propUUID; - } + getParentNamesArray = (parentPropName: string, parentNames?: Array): Array => { + if (this.property instanceof PropertyFEModel) { + if (parentPropName.indexOf("#") == -1) { return parentNames; } //finished recursing parents. return - //TODO: remove this and move to somewhere central!! (or make all properties be the same type...) - getDerivedPropertyType = (type) => { - if (PROPERTY_DATA.SIMPLE_TYPES.indexOf(type) > -1) { - return DerivedPropertyType.SIMPLE; - } else if (type == PROPERTY_TYPES.LIST) { - return DerivedPropertyType.LIST; - } else if (type == PROPERTY_TYPES.MAP) { - return DerivedPropertyType.MAP; - } else { - return DerivedPropertyType.COMPLEX; + let parentProp: DerivedFEProperty = this.property.flattenedChildren.find(prop => prop.propertiesName === parentPropName); + let nameToInsert: string = parentProp.name; + + if (parentProp.isChildOfListOrMap) { + if (parentProp.derivedDataType == DerivedPropertyType.MAP) { + nameToInsert = parentProp.mapKey; + } else { //LIST + let siblingProps = this.property.flattenedChildren.filter(prop => prop.parentName == parentProp.parentName).map(prop => prop.propertiesName); + nameToInsert = siblingProps.indexOf(parentProp.propertiesName).toString(); + } + } + + parentNames.splice(0, 0, nameToInsert); //add prop name to array + return this.getParentNamesArray(parentProp.parentName, parentNames); //continue recursing + } } + } diff --git a/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.html deleted file mode 100644 index a251d33649..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.html +++ /dev/null @@ -1,33 +0,0 @@ -
-
-
-
- -
- - -
-
-
- - -
diff --git a/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.less deleted file mode 100644 index 7c4d90a38d..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.less +++ /dev/null @@ -1,3 +0,0 @@ -.simple-list-item{ - position: relative; -} diff --git a/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.ts deleted file mode 100644 index 96f8c680a2..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/list-property/list-property.component.ts +++ /dev/null @@ -1,85 +0,0 @@ -/** - * Created by rc2122 on 4/23/2017. - */ -import {Component, Input, Output, EventEmitter} from "@angular/core"; -import { PropertyFEModel} from "app/models"; -import {PropertiesService} from "app/ng2/services/properties.service"; -import { ContentAfterLastDotPipe } from "app/ng2/pipes/contentAfterLastDot.pipe"; -import {UUID} from "angular2-uuid"; -import {ComponentType} from "app/utils"; - -@Component({ - selector: 'list-property', - templateUrl: './list-property.component.html', - styleUrls: ['../properties-value-inner-table/properties-value-inner-table.component.less', './list-property.component.less'] -}) -export class ListPropertyComponent { - - @Input() property: PropertyFEModel; - @Input() selectedPropertyId: string; - @Input() propertyNameSearchText:string; - - @Output() valueChanged: EventEmitter = new EventEmitter(); - @Output() selectChildProperty: EventEmitter = new EventEmitter(); - - constructor ( private propertiesService:PropertiesService, private contentAfterLastDotPipe:ContentAfterLastDotPipe ){ - } - - propValueChanged = () => { - this.valueChanged.emit(this.property); - }; - - onChildPropertySelected = (property) => { - this.selectChildProperty.emit(property); - }; - - getNumber = (valueObjectRef: any): Array => { - let num: number = (valueObjectRef) ? valueObjectRef.length : 0; - return new Array(num); - } - - createNewChildProperty = ():void => { - let newProperty: PropertyFEModel = new PropertyFEModel(this.contentAfterLastDotPipe.transform(this.property.schema.property.type), - this.property.schema.property.type, - UUID.UUID(), - this.property, - this.property.valueObjectRef[this.property.childrenProperties.length] - ); - this.propertiesService.createPropertiesTreeForProp(newProperty); - this.property.childrenProperties.push(newProperty); - } - - addListItem = ():void => { - this.property.valueObjectRef = this.property.valueObjectRef || []; - this.property.childrenProperties = this.property.childrenProperties || []; - if (this.property.schema.property.isSimpleType){ - if( this.property.valueObjectRef.indexOf("") == -1 ) {//prevent insert multiple empty simple type items to list - this.property.valueObjectRef.push(""); - } - }else{ - this.property.valueObjectRef[this.property.childrenProperties.length] = {}; - this.property.childrenProperties = this.property.childrenProperties || []; - this.createNewChildProperty(); - this.valueChanged.emit(this.property); - } - } - - deleteListItem = (indexInList:number):void => { - this.property.valueObjectRef.splice(indexInList, 1); - if(this.property.childrenProperties){ - this.property.childrenProperties.splice(indexInList, 1); - } - if (!this.property.valueObjectRef.length) {//only when user removes all items from list - put the default - if ( this.property.defaultValue ) { - angular.copy(JSON.parse(this.property.defaultValue), this.property.valueObjectRef); - if (this.property.schema.property.isDataType){ - _.forEach(this.property.valueObjectRef, () => { - this.createNewChildProperty(); - }); - } - } - } - this.valueChanged.emit(this.property); - } - -} 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 deleted file mode 100644 index e1975175a8..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.html +++ /dev/null @@ -1,38 +0,0 @@ -
-
-
- - - - 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 deleted file mode 100644 index d62d0b94e3..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/map-property/map-property.component.ts +++ /dev/null @@ -1,121 +0,0 @@ -/** - * 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 = new EventEmitter(); - @Output() selectChildProperty: EventEmitter = new EventEmitter(); - - constructor ( private propertiesService:PropertiesService){ - } - - mapKeys:Array; - - ngOnInit() { - this.mapKeys = Object.keys(this.property.valueObjectRef); - } - - propValueChanged = () => { - this.valueChanged.emit(this.property); - }; - - onChildPropertySelected = (property) => { - this.selectChildProperty.emit(property); - }; - - getNumber = (num:number):Array => { - 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); - } -} - diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html index 3ab47074e7..426ae3ab23 100644 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html +++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html @@ -1,6 +1,5 @@ - -
+
Property Name
Type
@@ -13,16 +12,27 @@
{{instanceName | contentAfterLastDot}}
-
-
- - +
+ +
+
+ +
+ {{property.name}} +
+
+ +
+
+
+ {{property.type | contentAfterLastDot}} +
-
{{property.type | contentAfterLastDot}}
{{property.schema && property.schema.property && property.schema.property.type ? (property.schema.property.type | contentAfterLastDot) : ''}}
@@ -32,7 +42,8 @@ [canBeDeclared]="true" [property]="property" [expandedChildId]="property.expandedChildPropertyId" - [propChildren]="property.flattenedChildren | filterChildProperties : property.expandedChildPropertyId" + [propertyNameSearchText]="propertyNameSearchText" + [readonly]="readonly" (valueChanged)="propValueChanged(property);" (expandChild)="property.updateExpandedChildPropertyId($event)" (clickOnPropertyRow)="onClickPropertyInnerRow($event, instanceName)" @@ -42,94 +53,8 @@
- - -
- - - - diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less index de080dfdc9..bb019a768b 100644 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less +++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less @@ -10,38 +10,17 @@ height:100%; text-align:left; - - .child-property-container { - display:flex; - flex-direction:column; - - &.table-cell { - padding:0; - } - - .child-property-row { - border-bottom: #d2d2d2 solid 1px; - &:last-child { - border-bottom:none; - } - } - } - - - derived-property, dynamic-property { - width:100%; - } - - /deep/ dynamic-property dynamic-property .dynamic-property-row { - border-top:solid #d2d2d2 1px; - } - - /deep/ dynamic-property dynamic-property:first-of-type .dynamic-property-row:not(.with-top-border) { - border-top: none; + .inner-cell-div{ + max-width: 100%; + text-overflow: ellipsis; + overflow: hidden; + height: 20px; } - - properties-value-inner-table { - width: 100%; + + .table-header, .table-row { + display: flex; + flex-direction:row; + flex: 0 0 auto; } .table-header { @@ -54,10 +33,17 @@ padding: 5px; } } - .table-header, .table-row { - display: flex; - flex-direction:row; - flex: 0 0 auto; + + .table-rows-header { + font-size:16px; + flex:1; + border: #d2d2d2 solid 1px; + border-top:none; + padding: 5px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + background-color: @tlv_color_v; } .table-body { @@ -79,17 +65,6 @@ } } - .table-rows-header { - font-size:16px; - flex:1; - border: #d2d2d2 solid 1px; - border-top:none; - padding: 5px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - background-color: @tlv_color_v; - } .table-row { &:hover { @@ -102,6 +77,10 @@ .selected-row { background-color:#e6f6fb; } + } + .cut-inner-long-text{ + text-overflow: ellipsis; + overflow: hidden; } .table-cell { font-size:13px; @@ -112,7 +91,7 @@ padding: 5px; text-overflow: ellipsis; white-space: nowrap; - overflow: hidden; + display: flex; &:last-child { border-right:#d2d2d2 solid 1px; @@ -120,10 +99,24 @@ &.col1 { flex: 0 0 300px; max-width:300px; + display: flex; + justify-content: space-between; + + .property-name { + flex: 1; + display: flex; + max-width: 270px; + } .property-description-icon { float: right; margin-top: 4px; + margin-left: 5px; + flex: 0 0 auto; + } + + /deep/ .checkbox-container { + margin-right: 5px; } } &.col2 { @@ -137,46 +130,12 @@ } &.valueCol { - flex: 1 0 auto; + flex: 1; min-width: 350px; display: flex; justify-content: flex-end; padding: 0px; - - .value-input { - flex: 1; - max-height: 24px; - border: none; - background-color: inherit; - - &:focus, &:active { - border:none; - outline:none; - } - } - - .delete-btn { - flex: 0 0 auto; - } - - .delete-button-container { - max-height: 24px; - } - - &.inner-table-container { - padding: 0px; - - .delete-button-container { - padding: 3px 5px 0 0 ; - } - } } - - &.input-value-col { - padding: 5px; - } - - } .filtered { @@ -184,5 +143,9 @@ background-color: yellow; } } + + dynamic-property { + width:100%; + } } diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts index d5a9b40425..58214ca16b 100644 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts +++ b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts @@ -2,8 +2,6 @@ import { Component, Input, Output, EventEmitter, SimpleChanges, ViewChild, Eleme import { trigger, state, style, transition, animate} from '@angular/core'; import {PropertyFEModel, DerivedFEProperty, DerivedPropertyType, InstanceFePropertiesMap} from "app/models"; import {PropertiesService} from "../../services/properties.service"; -// import { GroupByPipe } from 'app/ng2/pipes/groupBy.pipe'; -//import {PropertiesValueInnerTableComponent} from "./properties-table/properties-value-inner-table/properties-value-inner-table"; import { DynamicElementComponent } from 'app/ng2/components/dynamic-element/dynamic-element.component'; import { KeysPipe } from 'app/ng2/pipes/keys.pipe'; @@ -19,7 +17,10 @@ export class PropertiesTableComponent { @Input() selectedPropertyId: string; @Input() displayDeleteButton: boolean; @Input() propertyNameSearchText:string; - + @Input() searchTerm:string; + @Input() readonly:boolean; + @Input() isLoading:boolean; + @Output() valueChanged: EventEmitter = new EventEmitter(); @Output() selectPropertyRow: EventEmitter = new EventEmitter(); @Output() updateCheckedPropertyCount: EventEmitter = new EventEmitter(); @@ -50,6 +51,7 @@ export class PropertiesTableComponent { // Click on main row (row of propertyFEModel) onClickPropertyRow = (property:PropertyFEModel, instanceName:string, event?) => { //event && event.stopPropagation(); + this.selectedPropertyId = property.name; let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName); this.selectPropertyRow.emit(propertyRowSelectedEvent); }; @@ -72,14 +74,6 @@ export class PropertiesTableComponent { this.updateCheckedPropertyCount.emit(isChecked); } - putDefaultValueInEmptyProperty = (property:PropertyFEModel):void => { - property.value = property.value || property.defaultValue; - } - - // clickOnInstanceRow = (instanceName:string) =>{ - // this.selectInstanceRow.emit(instanceName); - // }; - } export class PropertyRowSelectedEvent { diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.html b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.html deleted file mode 100644 index 61555cac50..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.less b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.less deleted file mode 100644 index 1b7f6d4cd1..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.less +++ /dev/null @@ -1,71 +0,0 @@ -table { width:100%;} -tr {border-bottom: #d2d2d2 solid 1px;} -tr:last-child { border-bottom:none;} -td { border:none; padding:5px;} -td:first-child { border-right:#d2d2d2 solid 1px;} - -.prop-value{ - span { - position: absolute; - top: 5px; - right: 2px; - - &.delete-span { - right:20px; - } - - &.datatype-text { - position:static; - } - - } -} - -.add-data-row { - padding:5px; - text-align:right; - border-bottom: #d2d2d2 solid 1px; - - &:last-child { - border-bottom:none; - } -} -.table-inner-row { - display:flex; - flex-direction:row; - border-bottom: #d2d2d2 solid 1px; - flex: 0 0 100%; - position:relative; - - &:last-child { - border-bottom:none; - } - - .table-cell { - flex: 0 0 50%; - padding:5px; - position:relative; - text-overflow: ellipsis; - white-space: nowrap; - - &:first-child { - border-right:#d2d2d2 solid 1px; - overflow:hidden; - } - - - } - - .table-inner-container, .inner-table-container { - flex: 0 0 100%; - } -} -/deep/ map-property, /deep/ properties-value-inner-table, /deep/ list-property{ - width:100%; -} - -.filtered { - /deep/ .checkbox-label-content{ - background-color: yellow; - } -} diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.ts b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.ts deleted file mode 100644 index 7d0b219ffe..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.ts +++ /dev/null @@ -1,37 +0,0 @@ -/** - * Created by rc2122 on 4/20/2017. - */ -import {Component, Input, Output, EventEmitter} from "@angular/core"; -import {PropertyFEModel} from "app/models"; -import {PropertiesService} from "../../../services/properties.service"; - -@Component({ - selector: 'properties-value-inner-table', - templateUrl: './properties-value-inner-table.component.html', - styleUrls: ['./properties-value-inner-table.component.less'] -}) -export class PropertiesValueInnerTableComponent { - - @Input() property: PropertyFEModel; - @Input() selectedPropertyId: string; - @Input() propertyNameSearchText:string; - - @Output() selectChildProperty: EventEmitter = new EventEmitter(); - @Output() valueChanged: EventEmitter = new EventEmitter(); - - constructor ( private propertiesService:PropertiesService){ - } - - - onChildPropertySelected = (property) => { - this.selectChildProperty.emit(property); - }; - - propValueChanged = () => { - this.valueChanged.emit(this.property); - }; - - putDefaultValueInEmptyChildProperty = (childProp:PropertyFEModel):void => { - this.property.valueObjectRef[childProp.name] = this.property.valueObjectRef[childProp.name] || childProp.defaultValue; - } -} -- cgit 1.2.3-korg