Add sidebar tree navigation (#23)

* Add ESlint rules, Stroustrup brace style

* Add navigation tree data JSON files

* Available through build time and also one added to assets directory to be able to get it on runtime

* Add navigation tree data type and model

* Add ambient declarations for NavTreeData to be able to import on compilation time
* Also add a model to be able to work with this type of data on runtime dynamically

* Add navigation tree component

* Add navTreeNode component, implemented recursively
* Styled it following the material style
* Use this new component on the sidebar replacing the old one
* Add navigation tree data retrieval service

* Remove duplicated way of getting nav menu data

* We were still letting a load JSON file way of getting data as commented code, which now gets removed

Author: calvellido

src/app/app.component.html

@@ -24,15 +24,12 @@
   <md-sidenav-container class="sidenav-container">
 
       <md-sidenav #sidenav class="sidenav" mode="side" opened="true">
+
         <md-nav-list>
-          <h3 mat-subheader>Microservices</h3>
-          <md-list-item *ngFor="let link of links" routerLink="/ms/{{ link | number:'2.0-0'}}" routerLinkActive="active">
-            <span mdLine>Microservice MS{{ link | number:'2.0-0'}}</span>
-            <button md-icon-button>
-              <md-icon>grain</md-icon>
-            </button>
-          </md-list-item>
+          <h3 mat-subheader>{{ navTreeObject?.label }}</h3>
+          <frees-nav-tree-node *ngIf="navTreeObject" [data]="navTreeObject" [showLabel]="false"></frees-nav-tree-node>
         </md-nav-list>
+
       </md-sidenav>
 
       <section class="sidenav-content">

src/app/app.component.ts

@@ -1,14 +1,24 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+
+import { NavTreeDataService } from 'app/services/nav-tree-data.service';
+
+import { NavTreeNode } from 'app/shared/nav-tree-node.model';
+
 
 @Component({
   selector: 'frees-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
+
+  public navTreeObject: NavTreeData;
 
-  links = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+  constructor(private navTreeDataService: NavTreeDataService) { }
 
-  constructor() { }
+  ngOnInit() {
+    this.navTreeDataService.getJSON()
+      .subscribe(data => this.navTreeObject = data);
+  }
 
 }

src/app/app.module.ts

@@ -13,6 +13,7 @@ import {  MdMenuModule,
           MdListModule,
           MdProgressBarModule,
           MdTabsModule,
+          MdRippleModule
         } from '@angular/material';
 
 import { NgxChartsModule } from '@swimlane/ngx-charts';
@@ -22,13 +23,15 @@ import { AppComponent } from './app.component';
 
 // Services
 import { MetricService } from './services/metric.service';
+import { NavTreeDataService } from './services/nav-tree-data.service';
 
 // Components
 import { MsViewerComponent } from './ms-viewer/ms-viewer.component';
 import { NavGridComponent } from './nav-grid/nav-grid.component';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 import { SettingsComponent } from './settings/settings.component';
 import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
+import { NavTreeNodeComponent } from './nav-tree-node/nav-tree-node.component';
 
 @NgModule({
   declarations: [
@@ -37,7 +40,8 @@ import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
     NavGridComponent,
     PageNotFoundComponent,
     SettingsComponent,
-    BreadcrumbComponent
+    BreadcrumbComponent,
+    NavTreeNodeComponent,
   ],
   imports: [
     BrowserModule,
@@ -53,9 +57,10 @@ import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
     MdListModule,
     MdProgressBarModule,
     MdTabsModule,
+    MdRippleModule,
     NgxChartsModule
   ],
-  providers: [MetricService],
+  providers: [MetricService, NavTreeDataService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/nav-tree-node/nav-tree-node.component.html

@@ -0,0 +1,40 @@
+<ng-container *ngTemplateOutlet="labelTemplate ? labelTemplate : data.link ? leafLabelTemplate : data.subs ? branchLabelTemplate : simpleLabelTemplate; context: {$implicit: this}">
+</ng-container>
+
+<ng-container *ngIf="data.subs">
+  <ul [ngClass]="{'hide': !isExpanded}">
+    <li *ngFor="let item of data.subs">
+      <frees-nav-tree-node [data]="item" [isExpanded]="false"></frees-nav-tree-node>
+    </li>
+  </ul>
+</ng-container>
+
+
+<ng-template #branchLabelTemplate let-implicit>
+  <div class="label" #label *ngIf="implicit.showLabel" (click)="implicit.toggle()">
+    <div class="ripple" md-ripple [mdRippleTrigger]="label"></div>
+    <span class="label-text">{{ implicit.data.label }}</span>
+    <button md-icon-button>
+      <md-icon class="label-icon">keyboard_arrow_down</md-icon>
+    </button>
+  </div>
+</ng-template>
+
+<ng-template #leafLabelTemplate let-implicit>
+  <div class="label" #label *ngIf="implicit.showLabel"
+      routerLink="/ms/{{ implicit.data.link | number:'2.0-0' }}"
+      routerLinkActive="active">
+    <div class="ripple" md-ripple [mdRippleTrigger]="label"></div>
+    <span class="label-text">{{ implicit.data.label }}</span>
+    <button md-icon-button>
+      <md-icon class="label-icon">grain</md-icon>
+    </button>
+  </div>
+</ng-template>
+
+<ng-template #simpleLabelTemplate let-implicit>
+  <div class="label deactivated" *ngIf="implicit.showLabel">
+    <div class="ripple" md-ripple [mdRippleTrigger]="label"></div>
+    <span class="label-text">{{ implicit.data.label }}</span>
+  </div>
+</ng-template>

src/app/nav-tree-node/nav-tree-node.component.scss

@@ -0,0 +1,56 @@
+ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  &:first-child{
+    padding-right: 16px;
+  }
+}
+
+li {
+  font-size: 16px;
+  padding: 0 0 0 16px;
+}
+
+.label {
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  box-sizing: border-box;
+  height: 48px;
+  outline: none;
+  position: relative;
+
+  &:hover {
+    background: rgba(0,0,0,.04);
+  }
+
+  &.active {
+    box-shadow: -4px 0 0 rgba(0,0,0,.4);
+  }
+
+  &.deactivated {
+    background: none;
+    color: gray;
+    cursor: default;
+  }
+
+  .label-text {
+    width: 100%;
+  }
+}
+
+.ripple {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+
+.hide {
+  display: none;
+}

src/app/nav-tree-node/nav-tree-node.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavTreeNodeComponent } from './nav-tree-node.component';
+
+describe('NavTreeNodeComponent', () => {
+  let component: NavTreeNodeComponent;
+  let fixture: ComponentFixture<NavTreeNodeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NavTreeNodeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavTreeNodeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/nav-tree-node/nav-tree-node.component.ts

@@ -0,0 +1,30 @@
+import { Component, Input, TemplateRef, HostListener } from '@angular/core';
+
+import { NavTreeNode } from 'app/shared/nav-tree-node.model';
+
+@Component({
+  selector: 'frees-nav-tree-node',
+  templateUrl: './nav-tree-node.component.html',
+  styleUrls: ['./nav-tree-node.component.scss']
+})
+export class NavTreeNodeComponent {
+
+  @Input() data: NavTreeNode;
+  @Input() showLabel = true;
+  @Input() labelTemplate: TemplateRef<any>;
+  @Input() isExpanded = true;
+
+  // This is needed to prevent the click on a specific leaf to
+  // bubble up to its ancestor nodes, making them to trigger a toggle
+  @HostListener('click', ['$event']) onClickListener(event: Event) { event.stopPropagation(); }
+
+  constructor() { }
+
+  /**
+   * The method that open/closes a tree branch node
+   */
+  toggle() {
+    this.isExpanded = !this.isExpanded;
+  }
+
+}

src/app/services/nav-tree-data.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { NavTreeDataService } from './nav-tree-data.service';
+
+describe('NavTreeDataService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [NavTreeDataService]
+    });
+  });
+
+  it('should be created', inject([NavTreeDataService], (service: NavTreeDataService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/services/nav-tree-data.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+// Operators
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/catch';
+
+
+@Injectable()
+export class NavTreeDataService {
+
+  constructor(private http: Http) { }
+
+  public getJSON(): Observable<any> {
+    return this.http.get('assets/nav-tree-data.json')
+      .map((data: any) => data.json())
+      .catch(error => error);
+  }
+
+}