Final commit to master merge from

Change-Id: Ib464f9a8828437c86fe6def8af238aaf83473507
Issue-ID: SDC-714
Signed-off-by: Tal Gitelman <tg851x@intl.att.com>

4 files changed, 145 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-display-options.ts b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-display-options.ts
new file mode 100644
index 0000000000..c8d4566653
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-display-options.ts
@@ -0,0 +1,32 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+export class HierarchyDisplayOptions {
+    idProperty: string;
+    valueProperty: string;
+    childrenProperty: string;
+    searchText:string;
+    constructor(idProperty:string, valueProperty:string, childrenProperty?:string, searchText?:string) {
+        this.idProperty = idProperty;
+        this.valueProperty = valueProperty;
+        this.childrenProperty = childrenProperty;
+        this.searchText = searchText;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.html b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.html
new file mode 100644
index 0000000000..c3f9e5ac74
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.html
@@ -0,0 +1,13 @@
+<div class="navigation-wrapper">
+    <div class="node-item" *ngFor="let item of displayData" (click)="onClick($event, item)">
+        <div class="node-data-wrapper" [ngClass]="{'selected': selectedItem && selectedItem === item[displayOptions.idProperty]}">
+            <span class="node-data" [ngClass]="{'mark':item[displayOptions.valueProperty] === displayOptions.searchText}" [attr.data-tests-id]="item[displayOptions.valueProperty]">{{item[displayOptions.valueProperty]}}</span>
+        </div>
+        <div class="children-node" *ngIf="item[displayOptions.childrenProperty]">
+            <hierarchy-navigation class="children-hierarchy" [displayData]="item[displayOptions.childrenProperty]"
+                                  [selectedItem]="selectedItem"
+                                  [displayOptions]="displayOptions"
+                                  (updateSelected)="onSelectedUpdate($event)"></hierarchy-navigation>
+        </div>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less
new file mode 100644
index 0000000000..4befa2c797
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less
@@ -0,0 +1,52 @@
+.navigation-wrapper {
+    text-align: left;
+}
+
+.node-item {
+    border: 1px dotted;
+    border-right: none;
+    border-bottom: none;
+    width: 100%;
+}
+
+.node-item:last-child {
+    border-left: none;
+}
+
+.node-data-wrapper {
+    cursor: default;
+    height: 39px;
+    line-height: 39px;
+    position: relative;
+    top: -20px;
+    background-color: white;
+    margin-left: 0.7em;
+}
+
+.children-node {
+    padding-left: 40px;
+}
+
+.node-data {
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.node-data-wrapper.selected {
+    background-color: #e6f6fb;
+
+    .node-data {
+        color:  #009fdb;
+    }
+}
+
+.node-data-wrapper:hover {
+    background-color: #eaeaea;
+}
+
+.mark{
+    background-color: yellow;
+}
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts
new file mode 100644
index 0000000000..dc0a02c277
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts
@@ -0,0 +1,48 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+
+import {Component, Input, Output, EventEmitter} from '@angular/core';
+import {HierarchyDisplayOptions} from './hierarchy-display-options';
+
+
+@Component({
+    selector: 'hierarchy-navigation',
+    templateUrl: './hierarchy-navigation.component.html',
+    styleUrls: ['./hierarchy-navigation.component.less']
+})
+
+export class HierarchyNavigationComponent {
+    @Input() displayData: Array<any>;
+    @Input() selectedItem: any;
+    @Input() displayOptions: HierarchyDisplayOptions;
+
+    @Output() updateSelected:EventEmitter<any> =  new EventEmitter();
+
+    onClick = ($event, item) => {
+        $event.stopPropagation();
+        this.selectedItem = item;
+        this.updateSelected.emit(item);
+    };
+
+    onSelectedUpdate = ($event) => {
+        this.selectedItem = $event;
+        this.updateSelected.emit($event);
+    }
+}