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

Author: thelgevold

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

@@ -0,0 +1,62 @@
+describe('Tree View', function () {
+
+    beforeEach(function () {
+        browser.get('');
+    });
+
+    it('should expand and collapse all nodes', function(){
+      var expandAll = element(by.xpath('//button[text()="Expand All"]'));
+      var 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){
+      var length = element.all(by.xpath('//div[text()="Name: ' + name + '"]')).count();
+      return length;
+    }
+
+    it('should add hero', function () {
+      var usaNode = element.all(by.xpath('//a[text()="USA"]')).get(0);
+      
+      usaNode.click().then(function(){
+        var name = element(by.xpath('//input[@placeholder="name"]')); 
+        
+        var rating = element(by.xpath('//input[@placeholder="ranking"]'));
+        
+        name.sendKeys('New Hero');
+        rating.sendKeys('10');
+         
+        var addButton = element(by.xpath('//button[text()="Add Hero"]'));
+        return addButton.click();
+      })
+      .then(function(){
+        var name = element(by.xpath('//div[text()="name: New Hero"]'));  
+        expect(name).toBeDefined();
+        
+        var 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,31 @@
+// #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,33 @@
+// #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,24 @@
+// #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,9 @@
+// #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,60 @@
+// #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,26 @@
+// #docregion
+import {Component,Input}   from '@angular/core';
+import {TreeNode}          from './tree-node';
+import {TreeNodeService}   from './tree-node.service';
+import {AddHeroComponent}  from './add-hero.component';
+import {HeroNodeComponent} from './hero-node.component';
+
+@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);
+  }  
+}