diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table')
3 files changed, 149 insertions, 0 deletions
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 new file mode 100644 index 0000000000..61555cac50 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.html @@ -0,0 +1,41 @@ + +<template ngFor let-childProp [ngForOf]="property.childrenProperties" let-i="index"> + <div class="table-inner-row" (click)="onChildPropertySelected(childProp)" [ngClass]="{'selected': selectedPropertyId === childProp.treeNodeId}"> + <div class="table-cell" [ngClass]="{'filtered':childProp.name === propertyNameSearchText}"> + <checkbox [label]="childProp.name" [(checked)]="childProp.isSelected" [disabled]="property.isDisabled"></checkbox> + </div> + <div class="table-cell prop-value"> + <input class="value-input" *ngIf="childProp.isSimpleType" + [(ngModel)]="property.valueObjectRef[childProp.name]" + (change)="putDefaultValueInEmptyChildProperty(childProp);propValueChanged();" + type="childProp.derivedFromSimpleTypeName || childProp.type"/> + <span class="datatype-text" *ngIf="childProp.isDataType">{{ childProp.type | contentAfterLastDot }}</span> + <span *ngIf="!childProp.isSimpleType" (click)="property.updateExpandedChildPropertyId(childProp.treeNodeId)">V</span> + </div> + </div> + <div class="table-inner-row" *ngIf="childProp.type === 'list' && property.expandedChildPropertyId === childProp.treeNodeId"> + <list-property [property]="childProp" + [selectedPropertyId]="selectedPropertyId" + [propertyNameSearchText]="propertyNameSearchText" + (valueChanged)="propValueChanged()" + (selectChildProperty)="onChildPropertySelected($event)"></list-property> + + </div> + <div class="table-inner-row" *ngIf="childProp.type === 'map' && property.expandedChildPropertyId == childProp.treeNodeId"> + <map-property [property]="childProp" + [selectedPropertyId]="selectedPropertyId" + [propertyNameSearchText]="propertyNameSearchText" + (valueChanged)="propValueChanged()" + (selectChildProperty)="onChildPropertySelected($event)"></map-property> + + </div> + <div class="table-inner-row" *ngIf="childProp.isDataType && property.expandedChildPropertyId == childProp.treeNodeId"> + <properties-value-inner-table [property]="childProp" + [selectedPropertyId]="selectedPropertyId" + [propertyNameSearchText]="propertyNameSearchText" + (selectChildProperty)="onChildPropertySelected($event)" + (valueChanged)="propValueChanged()"></properties-value-inner-table> + </div> +</template> + + 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 new file mode 100644 index 0000000000..1b7f6d4cd1 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.less @@ -0,0 +1,71 @@ +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 new file mode 100644 index 0000000000..7d0b219ffe --- /dev/null +++ b/catalog-ui/src/app/ng2/components/properties-table/properties-value-inner-table/properties-value-inner-table.component.ts @@ -0,0 +1,37 @@ +/** + * 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<any> = new EventEmitter<PropertyFEModel>(); + @Output() valueChanged: EventEmitter<any> = new EventEmitter<any>(); + + 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; + } +} |