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