docs(toh-6): add hero search to Dart; minor edits to TS (#2018)

* docs(toh-6/dart): add hero search

Fixes #1924.

* docs(toh-6/ts): minor updates

* post-review updates

* post-review updates

Author: chalin

public/docs/_examples/toh-6/dart/lib/dashboard_component.dart

@@ -1,47 +1,36 @@
-// #docplaster
-// #docregion
+// #docregion , search
 import 'dart:async';
 
 import 'package:angular2/core.dart';
-// #docregion import-router
 import 'package:angular2/router.dart';
-// #enddocregion import-router
 
 import 'hero.dart';
 import 'hero_service.dart';
+import 'hero_search_component.dart';
 
 @Component(
     selector: 'my-dashboard',
-    // #docregion template-url
     templateUrl: 'dashboard_component.html',
-    // #enddocregion template-url
-    // #docregion css
-    styleUrls: const ['dashboard_component.css']
-    // #enddocregion css
-    )
-// #docregion component
+    styleUrls: const ['dashboard_component.css'],
+    directives: const [HeroSearchComponent])
+// #enddocregion search
 class DashboardComponent implements OnInit {
   List<Hero> heroes;
 
-  // #docregion ctor
   final Router _router;
   final HeroService _heroService;
 
   DashboardComponent(this._heroService, this._router);
 
-  // #enddocregion ctor
-
   Future<Null> ngOnInit() async {
     heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
   }
 
-  // #docregion goto-detail
   void gotoDetail(Hero hero) {
     var link = [
       'HeroDetail',
       {'id': hero.id.toString()}
     ];
     _router.navigate(link);
   }
-// #enddocregion goto-detail
 }

public/docs/_examples/toh-6/dart/lib/dashboard_component.html

@@ -1,11 +1,10 @@
 <!-- #docregion -->
 <h3>Top Heroes</h3>
 <div class="grid grid-pad">
-  <!-- #docregion click -->
-  <div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4" >
-    <!-- #enddocregion click -->
+  <div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
     <div class="module hero">
       <h4>{{hero.name}}</h4>
     </div>
   </div>
 </div>
+<hero-search></hero-search>

public/docs/_examples/toh-6/dart/lib/hero_search_component.css

@@ -0,0 +1,15 @@
+/* #docregion */
+.search-result {
+  border-bottom: 1px solid gray;
+  border-left: 1px solid gray;
+  border-right: 1px solid gray;
+  width:195px;
+  height: 20px;
+  padding: 5px;
+  background-color: white;
+  cursor: pointer;
+}
+#search-box {
+  width: 200px;
+  height: 20px;
+}

public/docs/_examples/toh-6/dart/lib/hero_search_component.dart

@@ -0,0 +1,57 @@
+// #docplaster
+// #docregion
+import 'dart:async';
+
+import 'package:angular2/core.dart';
+import 'package:angular2/router.dart';
+import 'package:stream_transformers/stream_transformers.dart';
+
+import 'hero_search_service.dart';
+import 'hero.dart';
+
+@Component(
+    selector: 'hero-search',
+    templateUrl: 'hero_search_component.html',
+    styleUrls: const ['hero_search_component.css'],
+    providers: const [HeroSearchService])
+class HeroSearchComponent implements OnInit {
+  HeroSearchService _heroSearchService;
+  Router _router;
+
+  // #docregion search
+  Stream<List<Hero>> heroes;
+  // #enddocregion search
+  // #docregion searchTerms
+  StreamController<String> _searchTerms =
+      new StreamController<String>.broadcast();
+  // #enddocregion searchTerms
+
+  HeroSearchComponent(this._heroSearchService, this._router) {}
+  // #docregion searchTerms
+
+  // Push a search term into the stream.
+  void search(String term) => _searchTerms.add(term);
+  // #enddocregion searchTerms
+  // #docregion search
+
+  Future<Null> ngOnInit() async {
+    heroes = _searchTerms.stream
+        .transform(new Debounce(new Duration(milliseconds: 300)))
+        .distinct()
+        .transform(new FlatMapLatest((term) => term.isEmpty
+            ? new Stream<List<Hero>>.fromIterable([<Hero>[]])
+            : _heroSearchService.search(term).asStream()))
+        .handleError((e) {
+      print(e); // for demo purposes only
+    });
+  }
+  // #enddocregion search
+
+  void gotoDetail(Hero hero) {
+    var link = [
+      'HeroDetail',
+      {'id': hero.id.toString()}
+    ];
+    _router.navigate(link);
+  }
+}

public/docs/_examples/toh-6/dart/lib/hero_search_component.html

@@ -0,0 +1,11 @@
+<!-- #docregion -->
+<div id="search-component">
+  <h4>Hero Search</h4>
+  <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
+  <div>
+    <div *ngFor="let hero of heroes | async"
+         (click)="gotoDetail(hero)" class="search-result" >
+      {{hero.name}}
+    </div>
+  </div>
+</div>

public/docs/_examples/toh-6/dart/lib/hero_search_service.dart

@@ -0,0 +1,33 @@
+// #docregion
+import 'dart:async';
+import 'dart:convert';
+
+import 'package:angular2/core.dart';
+import 'package:http/http.dart';
+
+import 'hero.dart';
+
+@Injectable()
+class HeroSearchService {
+  final Client _http;
+
+  HeroSearchService(this._http);
+
+  Future<List<Hero>> search(String term) async {
+    try {
+      final response = await _http.get('app/heroes/?name=$term');
+      return _extractData(response)
+          .map((json) => new Hero.fromJson(json))
+          .toList();
+    } catch (e) {
+      throw _handleError(e);
+    }
+  }
+
+  dynamic _extractData(Response resp) => JSON.decode(resp.body)['data'];
+
+  Exception _handleError(dynamic e) {
+    print(e); // for demo purposes only
+    return new Exception('Server error; cause: $e');
+  }
+}

public/docs/_examples/toh-6/dart/lib/heroes_component.css

@@ -1,3 +1,4 @@
+/* #docregion */
 .selected {
   background-color: #CFD8DC !important;
   color: white;
@@ -57,3 +58,10 @@ button {
 button:hover {
   background-color: #cfd8dc;
 }
+/* #docregion additions */
+.error {color:red;}
+button.delete-button {
+  float:right;
+  background-color: gray !important;
+  color:white;
+}

public/docs/_examples/toh-6/dart/lib/in_memory_data_service.dart

@@ -1,6 +1,7 @@
 // #docregion
 import 'dart:async';
 import 'dart:convert';
+import 'dart:math';
 
 // #docregion init
 import 'package:angular2/core.dart';
@@ -23,17 +24,18 @@ class InMemoryDataService extends MockClient {
     {'id': 19, 'name': 'Magma'},
     {'id': 20, 'name': 'Tornado'}
   ];
-  // #enddocregion init
-
   static final List<Hero> _heroesDb =
       _initialHeroes.map((json) => new Hero.fromJson(json)).toList();
-  static int _nextId = 21;
+  // #enddocregion init
+  static int _nextId = _heroesDb.map((hero) => hero.id).reduce(max) + 1;
 
   static Future<Response> _handler(Request request) async {
     var data;
     switch (request.method) {
       case 'GET':
-        data = _heroesDb;
+        String prefix = request.url.queryParameters['name'] ?? '';
+        final regExp = new RegExp(prefix, caseSensitive: false);
+        data = _heroesDb.where((hero) => hero.name.contains(regExp)).toList();
         break;
       case 'POST':
         var name = JSON.decode(request.body)['name'];

public/docs/_examples/toh-6/dart/pubspec.yaml

@@ -13,6 +13,7 @@ dependencies:
   dart_to_js_script_rewriter: ^1.0.1
   # #docregion additions
   http: ^0.11.0
+  stream_transformers: ^0.3.0
 transformers:
 - angular2:
     # #enddocregion additions

public/docs/_examples/toh-6/dart/web/index.html

@@ -7,7 +7,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="sample.css">
 
     <script defer src="main.dart" type="application/dart"></script>
     <script defer src="packages/browser/dart.js"></script>

public/docs/_examples/toh-6/dart/web/sample.css

@@ -1,6 +1,4 @@
-// #docplaster
-// #docregion
-// #docregion hero-search-component
+// #docregion , search
 import { Component, OnInit } from '@angular/core';
 import { Router }           from '@angular/router';
 
@@ -14,9 +12,8 @@ import { HeroSearchComponent } from './hero-search.component';
   styleUrls: ['app/dashboard.component.css'],
   directives: [HeroSearchComponent]
 })
-// #enddocregion hero-search-component
+// #enddocregion search
 export class DashboardComponent implements OnInit {
-
   heroes: Hero[] = [];
 
   constructor(

public/docs/_examples/toh-6/ts/app/dashboard.component.ts

@@ -18,7 +18,7 @@ export class HeroSearchComponent implements OnInit {
   heroes: Observable<Hero[]>;
   // #enddocregion search
   // #docregion searchTerms
-  searchTerms = new Subject<string>();
+  private searchTerms = new Subject<string>();
   // #enddocregion searchTerms
 
   constructor(