summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/hierarchy-navigtion
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-06-09 03:19:04 +0300
committerMichael Lando <ml636r@att.com>2017-06-09 03:19:04 +0300
commited64b5edff15e702493df21aa3230b81593e6133 (patch)
treea4cb01fdaccc34930a8db403a3097c0d1e40914b /catalog-ui/src/app/ng2/components/hierarchy-navigtion
parent280f8015d06af1f41a3ef12e8300801c7a5e0d54 (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/hierarchy-navigtion')
-rw-r--r--catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts12
-rw-r--r--catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html13
-rw-r--r--catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less51
-rw-r--r--catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts28
4 files changed, 104 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts
new file mode 100644
index 0000000000..7045286ccd
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts
@@ -0,0 +1,12 @@
+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/hierarchy-navigtion/hierarchy-navigation.component.html b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html
new file mode 100644
index 0000000000..40a1c37cee
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/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}">{{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/hierarchy-navigtion/hierarchy-navigation.component.less b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less
new file mode 100644
index 0000000000..57d51616a8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less
@@ -0,0 +1,51 @@
+.navigation-wrapper {
+ text-align: left;
+}
+
+.node-item {
+ border: 1px dotted;
+ border-right: none;
+ border-bottom: none;
+}
+
+.node-item:last-child {
+ border-left: none;
+}
+
+.node-data-wrapper {
+ cursor: default;
+ height: 30px;
+ line-height: 2.6em;;
+ position: relative;
+ top: -1.1em;
+ 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/hierarchy-navigtion/hierarchy-navigation.component.ts b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts
new file mode 100644
index 0000000000..428bbb4b04
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts
@@ -0,0 +1,28 @@
+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);
+ }
+}