docs(table): add missing imports and improve example using http (angu…

…lar#5956) * fix: add missing OnInit * refactor: simplify example * fix: export interfaces and remove unused import * address comments * correct nested path
andrewseguin · Jul 28, 2017 · aea8df4 · aea8df4
1 parent c9d67c0
commit aea8df4
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 75 deletions.
diff --git a/src/material-examples/table-http/table-http-example.html b/src/material-examples/table-http/table-http-example.html
@@ -8,39 +8,44 @@
   </div>
 
   <md-table #table [dataSource]="dataSource" class="example-table"
-            mdSort mdSortActive="created" mdSortDisableClear mdSortDirection="asc">
+            mdSort mdSortActive="created_at" mdSortDisableClear mdSortDirection="asc">
 
     <!--- Note that these columns can be defined in any order.
           The actual rendered columns are set as a property on the row definition" -->
 
     <!-- Number Column -->
     <ng-container cdkColumnDef="number">
-      <md-header-cell *cdkHeaderCellDef> Number </md-header-cell>
-      <md-cell *cdkCellDef="let row"> {{row.number}} </md-cell>
+      <md-header-cell *cdkHeaderCellDef>#</md-header-cell>
+      <md-cell *cdkCellDef="let row">{{ row.number }}</md-cell>
     </ng-container>
 
     <!-- Title Column -->
     <ng-container cdkColumnDef="title">
-      <md-header-cell *cdkHeaderCellDef> Title </md-header-cell>
-      <md-cell *cdkCellDef="let row"> {{row.title}} </md-cell>
+      <md-header-cell *cdkHeaderCellDef>Title</md-header-cell>
+      <md-cell *cdkCellDef="let row">{{ row.title }}</md-cell>
     </ng-container>
 
     <!-- State Column -->
     <ng-container cdkColumnDef="state">
-      <md-header-cell *cdkHeaderCellDef> State </md-header-cell>
-      <md-cell *cdkCellDef="let row"> {{row.state}} </md-cell>
+      <md-header-cell *cdkHeaderCellDef>State</md-header-cell>
+      <md-cell *cdkCellDef="let row">{{ row.state }}</md-cell>
     </ng-container>
 
     <!-- Created Column -->
-    <ng-container cdkColumnDef="created">
-      <md-header-cell *cdkHeaderCellDef md-sort-header disableClear="true"> Created </md-header-cell>
-      <md-cell *cdkCellDef="let row"> {{row.created.toDateString()}} </md-cell>
+    <ng-container cdkColumnDef="created_at">
+      <md-header-cell *cdkHeaderCellDef
+                      md-sort-header
+                      disableClear="true">
+        Created
+      </md-header-cell>
+      <md-cell *cdkCellDef="let row">{{ row.created_at | date }}</md-cell>
     </ng-container>
 
     <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
     <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
   </md-table>
+
   <md-paginator [length]="dataSource.resultsLength"
                 [pageSize]="30">
   </md-paginator>
-</div>
+</div>
diff --git a/src/material-examples/table-http/table-http-example.ts b/src/material-examples/table-http/table-http-example.ts
@@ -1,56 +1,60 @@
-import {Component, ViewChild} from '@angular/core';
-import {Http, Response} from '@angular/http';
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {Http} from '@angular/http';
 import {DataSource} from '@angular/cdk/table';
 import {MdPaginator, MdSort} from '@angular/material';
 import {Observable} from 'rxjs/Observable';
-import 'rxjs/add/operator/first';
-import 'rxjs/add/operator/startWith';
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/switchMap';
 import 'rxjs/add/observable/merge';
 import 'rxjs/add/observable/of';
-import 'rxjs/add/observable/interval';
+import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/startWith';
+import 'rxjs/add/operator/switchMap';
 
 @Component({
   selector: 'table-http-example',
   styleUrls: ['table-http-example.css'],
   templateUrl: 'table-http-example.html',
 })
-export class TableHttpExample {
-  displayedColumns = ['created', 'state', 'number', 'title'];
+export class TableHttpExample implements OnInit {
+  displayedColumns = ['created_at', 'state', 'number', 'title'];
   exampleDatabase: ExampleHttpDao | null;
   dataSource: ExampleDataSource | null;
 
   @ViewChild(MdPaginator) paginator: MdPaginator;
   @ViewChild(MdSort) sort: MdSort;
 
-  constructor(http: Http) {
-    this.exampleDatabase = new ExampleHttpDao(http);
-  }
+  constructor(private http: Http) {}
 
   ngOnInit() {
-    this.dataSource = new ExampleDataSource(this.exampleDatabase!,
-        this.sort, this.paginator);
+    this.exampleDatabase = new ExampleHttpDao(this.http);
+    this.dataSource = new ExampleDataSource(
+      this.exampleDatabase!, this.paginator, this.sort);
   }
 }
 
+export interface GithubApi {
+  items: GithubIssue[];
+  total_count: number;
+}
+
 export interface GithubIssue {
+  created_at: string;
   number: string;
   state: string;
   title: string;
-  created: Date;
 }
 
 /** An example database that the data source uses to retrieve data for the table. */
 export class ExampleHttpDao {
   constructor(private http: Http) {}
 
-  getRepoIssues(sort: string, order: string, page: number): Observable<Response> {
+  getRepoIssues(sort: string, order: string, page: number): Observable<GithubApi> {
     const href = 'https://api.github.com/search/issues';
     const requestUrl =
-        `${href}?q=repo:angular/material2&sort=${sort}&order=${order}&page=${page + 1}`;
-    return this.http.get(requestUrl);
+      `${href}?q=repo:angular/material2&sort=${sort}&order=${order}&page=${page + 1}`;
+
+    return this.http.get(requestUrl)
+                    .map(response => response.json() as GithubApi);
   }
 }
 
@@ -63,67 +67,48 @@ export class ExampleHttpDao {
  */
 export class ExampleDataSource extends DataSource<GithubIssue> {
   // The number of issues returned by github matching the query.
-  resultsLength: number = 0;
+  resultsLength = 0;
   isLoadingResults: boolean;
   isRateLimitReached: boolean;
 
-  constructor(private _exampleDatabase: ExampleHttpDao,
-              private _sort: MdSort,
-              private _paginator: MdPaginator) {
+  constructor(private exampleDatabase: ExampleHttpDao,
+              private paginator: MdPaginator,
+              private sort: MdSort) {
     super();
   }
 
   /** Connect function called by the table to retrieve one stream containing the data to render. */
   connect(): Observable<GithubIssue[]> {
     const displayDataChanges = [
-      this._sort.mdSortChange,
-      this._paginator.page,
+      this.sort.mdSortChange,
+      this.paginator.page
     ];
 
     // If the user changes the sort order, reset back to the first page.
-    this._sort.mdSortChange.subscribe(() => {
-      this._paginator.pageIndex = 0;
-    });
+    this.sort.mdSortChange.subscribe(() => this.paginator.pageIndex = 0);
 
     return Observable.merge(...displayDataChanges)
-        .startWith(null)
-        .switchMap(() => {
-          this.isLoadingResults = true;
-          return this._exampleDatabase.getRepoIssues(
-              this._sort.active, this._sort.direction, this._paginator.pageIndex);
-        })
-        .catch(() => {
-          // Catch if the GitHub API has reached its rate limit. Return empty result.
-          this.isRateLimitReached = true;
-          return Observable.of(null);
-        })
-        .map(result => {
-          // Flip flag to show that loading has finished.
-          this.isLoadingResults = false;
-          return result;
-        })
-        .map(result => {
-          if (!result) { return []; }
-
-          this.isRateLimitReached = false;
-          this.resultsLength = result.json().total_count;
-
-          return this.readGithubResult(result);
-        });
-
-
+      .startWith(null)
+      .switchMap(() => {
+        this.isLoadingResults = true;
+        return this.exampleDatabase.getRepoIssues(
+          this.sort.active, this.sort.direction, this.paginator.pageIndex);
+      })
+      .map(data => {
+        // Flip flag to show that loading has finished.
+        this.isLoadingResults = false;
+        this.isRateLimitReached = false;
+        this.resultsLength = data.total_count;
+
+        return data.items;
+      })
+      .catch(() => {
+        this.isLoadingResults = false;
+        // Catch if the GitHub API has reached its rate limit. Return empty data.
+        this.isRateLimitReached = true;
+        return Observable.of(null);
+      });
   }
 
   disconnect() {}
-
-  private readGithubResult(result: Response): GithubIssue[] {
-    return result.json().items.map(issue => {
-      return {
-        number: issue.number,
-        created: new Date(issue.created_at),
-        state: issue.state,
-        title: issue.title,
-      };
-    });
-  }
 }