diff options
author | Michael Lando <ml636r@att.com> | 2017-06-09 03:19:04 +0300 |
---|---|---|
committer | Michael Lando <ml636r@att.com> | 2017-06-09 03:19:04 +0300 |
commit | ed64b5edff15e702493df21aa3230b81593e6133 (patch) | |
tree | a4cb01fdaccc34930a8db403a3097c0d1e40914b /catalog-ui/src/app/ng2/components/properties-table/derived-property | |
parent | 280f8015d06af1f41a3ef12e8300801c7a5e0d54 (diff) |
[SDC-29] catalog 1707 rebase commit.
Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1
Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/components/properties-table/derived-property')
3 files changed, 105 insertions, 0 deletions
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 new file mode 100644 index 0000000000..6e7d4e882b --- /dev/null +++ b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.html @@ -0,0 +1,24 @@ +<!-- TODO: refactor this to be dynamic --> +<div class="derived-property-row" *ngIf="propertyObj.isDeclared || propertyObj.derivedDataType == derivedPropertyTypes.SIMPLE"> + <div class="table-cell" [ngClass]="{'iltered':propertyObj.name === propertyNameSearchText}"><checkbox [label]="propertyObj.name" [(checked)]="propertyObj.isSelected" [disabled]="propertyObj.isDisabled ||propertyObj.isDeclared" (checkedChange)="checkedChange($event)"></checkbox></div> + + <div class="table-cell simple"> + <input type="text" [(ngModel)]="propertyObj.value" [disabled]="propertyObj.isDisabled || propertyObj.isDeclared" (change)="valueChanged.emit()" /> + </div> +</div> +<div class="derived-property-row" *ngIf="!propertyObj.isDeclared && propertyObj.derivedDataType == derivedPropertyTypes.COMPLEX"> + <div class="table-cell" [ngClass]="{'filtered':propertyObj.name === propertyNameSearchText}"><checkbox [label]="propertyObj.name" [(checked)]="propertyObj.isSelected" [disabled]="propertyObj.isDisabled ||propertyObj.isDeclared" (checkedChange)="checkedChange($event)"></checkbox></div> + <div class="table-cell complex"> + <span class="datatype-text">{{propertyObj.type | contentAfterLastDot }}</span> + <span (click)="expandChildById(propertyObj.propertiesName)" class="expand-icon" [class.expanded]="expanded">V</span> + </div> +</div> +<div class="derived-property-row" *ngIf="!propertyObj.isDeclared && propertyObj.derivedDataType == derivedPropertyTypes.SIMPLELIST ||propertyObj.derivedDataType == derivedPropertyTypes.SIMPLEMAP"> + <div class="table-cell"> + <span [ngClass]="{'filtered':propertyObj.name === propertyNameSearchText}">{{propertyObj.name}}</span> + </div> + <div class="table-cell simple2"> + <div class="sprite-new add-item-icon" (click)="addRows(propertyObj)"></div> + </div> +</div> + 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 new file mode 100644 index 0000000000..3102c5ceb8 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.less @@ -0,0 +1,35 @@ +.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 new file mode 100644 index 0000000000..16f069a685 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/properties-table/derived-property/derived-property.component.ts @@ -0,0 +1,46 @@ +/** + * 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<any> = new EventEmitter<any>(); + @Output() expandChild: EventEmitter<string> = new EventEmitter<string>(); + @Output() selectProperty: EventEmitter<boolean> = new EventEmitter<boolean>(); + + + 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); + } + +} |