docs:(cookbook showing how to create a TreeView)

working on getting tree view rendering

wiring up tree

more features

styles

added add/cancel

styles

http

fixed styling

added error handling

docs

clean-up

starting article

img

text

updated

e2e

text

text

text

renamed rating

fixed test

typo

update to rc 1

shim

lint

Author: thelgevold

public/docs/_examples/cb-tree-view/e2e-spec.ts

@@ -0,0 +1,65 @@
+/// <reference path='../_protractor/e2e.d.ts' />
+'use strict';
+/* tslint:disable:quotemark */
+describe('Tree View', function () {
+
+    beforeEach(function () {
+      browser.get('');
+    });
+
+    it('should expand and collapse all nodes', function(){
+      let expandAll = element(by.xpath('//button[text()="Expand All"]'));
+      let collapseAll = element(by.xpath('//button[text()="Collapse All"]'));
+
+      expandAll.click()
+        .then(function(){
+          expect(findHeroCount('Dr IQ')).toBe(1);
+          expect(findHeroCount('Bombasto')).toBe(1);
+          expect(findHeroCount('Celeritas')).toBe(1);
+          expect(findHeroCount('RubberMan')).toBe(1);
+          expect(findHeroCount('Tornado')).toBe(1);
+          expect(findHeroCount('Dynama')).toBe(2);
+          expect(findHeroCount('Magma')).toBe(1);
+      });
+
+      collapseAll.click()
+        .then(function(){
+          expect(findHeroCount('Dr IQ')).toBe(0);
+          expect(findHeroCount('Bombasto')).toBe(0);
+          expect(findHeroCount('Celeritas')).toBe(0);
+          expect(findHeroCount('RubberMan')).toBe(0);
+          expect(findHeroCount('Tornado')).toBe(0);
+          expect(findHeroCount('Dynama')).toBe(0);
+          expect(findHeroCount('Magma')).toBe(0);
+      });
+    });
+
+    function findHeroCount(name: string) {
+      let length = element.all(by.xpath('//div[text()="Name: ' + name + '"]')).count();
+      return length;
+    }
+
+    it('should add hero', function () {
+      let usaNode = element.all(by.xpath('//a[text()="USA"]')).get(0);
+
+      usaNode.click().then(function() {
+        let name = element(by.xpath('//input[@placeholder="name"]'));
+
+        let rating = element(by.xpath('//input[@placeholder="ranking"]'));
+
+        name.sendKeys('New Hero');
+        rating.sendKeys('10');
+
+        let addButton = element(by.xpath('//button[text()="Add Hero"]'));
+        return addButton.click();
+      })
+      .then(function(){
+        let name = element(by.xpath('//div[text()="name: New Hero"]'));
+        expect(name).toBeDefined();
+
+        let rating = element(by.xpath('//div[text()="10"]'));
+        expect(rating).toBeDefined();
+      });
+  });
+
+});

public/docs/_examples/cb-tree-view/ts/.gitignore

@@ -0,0 +1 @@
+**/*.js

public/docs/_examples/cb-tree-view/ts/app/add-hero.component.html

@@ -0,0 +1,7 @@
+<!-- #docregion -->
+<input placeholder="name" [(ngModel)]="hero.name" />
+<input placeholder="ranking" type="number" [(ngModel)]="hero.ranking" />
+<div>
+  <button (click)="addHero()">Add Hero</button>
+  <button (click)="cancel()">Cancel</button>
+</div>

public/docs/_examples/cb-tree-view/ts/app/add-hero.component.ts

@@ -0,0 +1,32 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { TreeNodeService }   from './tree-node.service';
+import { Hero }              from './hero';
+
+@Component({
+    selector: 'add-hero',
+    templateUrl: 'app/add-hero.component.html'
+})
+export class AddHeroComponent implements OnInit {
+
+  hero: Hero;
+
+  constructor(private treeNodeService: TreeNodeService) {
+  }
+
+  addHero() {
+    if (this.hero.name) {
+      this.treeNodeService.addHero(this.hero);
+      this.hero = new Hero();
+    }
+  }
+
+  cancel() {
+    this.treeNodeService.selectedNode.unselect();
+  }
+
+  ngOnInit() {
+    this.hero = new Hero();
+  }
+}

public/docs/_examples/cb-tree-view/ts/app/app.component.ts

@@ -0,0 +1,34 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+
+import { TreeViewComponent } from './tree-view.component';
+import { TreeNode }          from './tree-node';
+import { TreeNodeService }   from './tree-node.service';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <div>
+      <h2>Hero locations</h2>
+      <button (click)="_treeNodeService.toggleNodes(_nodes,true)">Expand All</button>
+      <button (click)="_treeNodeService.toggleNodes(_nodes,false)">Collapse All</button>
+      <tree-view id="heroes" [nodes]="_nodes"></tree-view>
+    </div>
+  `,
+  directives: [TreeViewComponent],
+  providers:  [TreeNodeService]
+})
+export class AppComponent implements OnInit {
+
+  private _nodes: Array<TreeNode> = [];
+
+  constructor(private _treeNodeService: TreeNodeService) {
+  }
+
+  ngOnInit() {
+    this._treeNodeService
+        .getTreeNodes()
+        .then((nodes: Array<TreeNode>) => this._nodes = nodes)
+        .catch((error: any) => console.log(error)); // TODO: Display error
+  }
+}

public/docs/_examples/cb-tree-view/ts/app/hero-node.component.html

@@ -0,0 +1,5 @@
+<!-- #docregion -->
+<div class="hero-node" [ngClass]="heroClass" >
+  <div>Name: {{hero.name}}</div>
+  <div>Ranking: {{hero.ranking}}</div>
+</div>

public/docs/_examples/cb-tree-view/ts/app/hero-node.component.ts

@@ -0,0 +1,23 @@
+// #docregion
+import { Component, Input, OnInit } from '@angular/core';
+
+import { Hero }                     from './hero';
+
+@Component({
+  selector: 'hero-node',
+  templateUrl: 'app/hero-node.component.html'
+})
+export class HeroNodeComponent implements OnInit {
+  @Input() hero: Hero;
+  heroClass: string;
+
+  ngOnInit() {
+    if (this.hero.ranking > 7) {
+      this.heroClass = 'hero-top';
+    }else if (this.hero.ranking > 4) {
+      this.heroClass = 'hero-ok';
+    }else {
+      this.heroClass = 'hero-low';
+    }
+  }
+}

public/docs/_examples/cb-tree-view/ts/app/hero.ts

@@ -0,0 +1,6 @@
+// #docregion
+export class Hero {
+
+  constructor(public name?: string, public ranking?: number) {
+  }
+}

public/docs/_examples/cb-tree-view/ts/app/main.ts

@@ -0,0 +1,10 @@
+// #docregion
+import { bootstrap }      from '@angular/platform-browser-dynamic';
+
+import { AppComponent }   from './app.component';
+import { HTTP_PROVIDERS } from '@angular/http';
+
+import 'rxjs/Rx';
+
+bootstrap(AppComponent, [HTTP_PROVIDERS])
+  .catch((err: any) => console.error(err));

public/docs/_examples/cb-tree-view/ts/app/mock-data.json

@@ -0,0 +1,25 @@
+{
+  "nodes":[
+      {
+        "title":"USA",
+        "nodes":[
+            {
+              "title":"New York City",
+              "nodes":[
+                        {"title":"Brooklyn","heroes":[{"name":"Dr IQ","ranking":10}]},
+                        {"title":"Manhattan","heroes":[{"name":"Bombasto","ranking":2}]},
+                        {"title":"Bronx","heroes":[{"name":"Celeritas","ranking":4}]},
+                        {"title":"Queens","heroes":[{"name":"RubberMan","ranking":6}]},
+                        {"title":"Staten Island","heroes":[{"name":"Dynama","ranking":8}]}]  
+            }
+        ]
+      },
+      {
+        "title":"Canada",
+        "nodes":[
+          {"title":"Calgary","heroes":[{"name":"Tornado","ranking":3},{"name":"Dynama","ranking":8}]},
+          {"title":"Ottawa","heroes":[{"name":"Magma","ranking":10}]}
+        ]
+      }
+  ]  
+}

public/docs/_examples/cb-tree-view/ts/app/tree-node.service.ts

@@ -0,0 +1,61 @@
+// #docregion
+import { Injectable } from '@angular/core';
+import { Http }       from '@angular/http';
+
+import { TreeNode }   from './tree-node';
+import { Hero }       from './hero';
+
+@Injectable()
+export class TreeNodeService {
+
+  private _root = new TreeNode('Hero Regions', [], []);
+  selectedNode: TreeNode;
+
+  constructor(private _http: Http) {
+  }
+
+  // #docregion build-tree
+  private _buildTreeRecursive(root: TreeNode, nodes: Array<any>): TreeNode {
+    if (nodes) {
+      nodes.forEach(node => {
+        let heroes = (node.heroes || []).map((hero: any) => new Hero(hero.name, hero.ranking));
+        let treeNode = new TreeNode(node.title, [], heroes);
+        root.nodes.push(this._buildTreeRecursive(treeNode, node.nodes));
+        return treeNode;
+      });
+    }
+    return root;
+  }
+
+  getTreeNodes(): any {
+    return this._http.get('./app/mock-data.json')
+               .toPromise()
+               .then(res => {
+                 let root = this._buildTreeRecursive(this._root, res.json().nodes);
+                 return root.nodes;
+               });
+  }
+  // #enddocregion build-tree   
+
+  addHero(newHero: Hero) {
+    this.selectedNode.heroes.push(newHero);
+  }
+
+  // #docregion toggle-nodes
+  toggleNodes(nodes: Array<TreeNode>, state: boolean) {
+    nodes.forEach(node => {
+      node.expanded = state;
+      this.toggleNodes(node.nodes, state);
+    });
+  }
+  // #enddocregion toggle-nodes
+
+  selectNode(node: TreeNode) {
+    if (this.selectedNode) {
+      this.selectedNode.unselect();
+    }
+
+    this.selectedNode = node;
+    this.selectedNode.select();
+  }
+}

public/docs/_examples/cb-tree-view/ts/app/tree-node.ts

@@ -0,0 +1,41 @@
+// #docregion
+import { Hero } from './hero';
+
+export class TreeNode {
+
+  expanded: boolean = false;
+  selected: boolean = false;
+
+  constructor(public title: string, public nodes?: Array<TreeNode>, public heroes?: Array<Hero>) {
+  }
+
+  getIcon() {
+    if (this._hasChildren()) {
+      if (this.expanded) {
+        return '-';
+      }
+      return '+';
+    }
+    return '';
+  }
+
+  toggle() {
+    this.expanded = !this.expanded;
+    if (this.expanded === false) {
+      this.selected = false;
+    }
+  }
+
+  select() {
+    this.selected = true;
+    this.expanded = true;
+  }
+
+  unselect() {
+    this.selected = false;
+  }
+
+  private _hasChildren() {
+    return (this.nodes.length + this.heroes.length) > 0;
+  }
+}

public/docs/_examples/cb-tree-view/ts/app/tree-view.component.html

@@ -0,0 +1,21 @@
+<!-- #docregion -->
+<ul *ngIf="nodes.length > 0">
+  <li *ngFor="#node of nodes">
+    <a class="tree-node-icon" (click)="node.toggle()">{{node.getIcon()}}</a>
+    <a class="hero-location" (click)="select(node)" [ngClass]="{'node-selected':node.selected}">{{node.title}}</a>
+    <div *ngIf="node.expanded">
+      <ul>
+        <li *ngFor="let hero of node.heroes">
+          <hero-node [hero]="hero"></hero-node>
+        </li>
+        <li>
+          <div class="add-section" *ngIf="node.selected">
+            <add-hero></add-hero>
+          </div>
+        </li>
+      </ul>
+      <!--Self reference in the template-->
+      <tree-view [nodes]="node.nodes"></tree-view>
+    </div>
+  </li>
+</ul>

public/docs/_examples/cb-tree-view/ts/app/tree-view.component.ts

@@ -0,0 +1,27 @@
+// #docregion
+import { Component, Input }  from '@angular/core';
+
+import { AddHeroComponent }  from './add-hero.component';
+import { HeroNodeComponent } from './hero-node.component';
+import { TreeNode }          from './tree-node';
+import { TreeNodeService }   from './tree-node.service';
+
+@Component({
+  selector: 'tree-view',
+
+  directives: [TreeViewComponent, // Notice: TreeViewComponent reference inside TreeViewComponent
+              AddHeroComponent,
+              HeroNodeComponent],
+
+  templateUrl: './app/tree-view.component.html'
+})
+export class TreeViewComponent {
+  @Input() nodes: Array<TreeNode>;
+
+  constructor(private _treeNodeService: TreeNodeService) {
+  }
+
+  select(node: TreeNode) {
+    this._treeNodeService.selectNode(node);
+  }
+}