[SDC-29] catalog 1707 rebase commit.

Change-Id: I43c3dc5cf44abf5da817649bc738938a3e8388c1
Signed-off-by: Michael Lando <ml636r@att.com>

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);
+    }
+
+}