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}]}
+        ]
+      }
+  ]  
+}