docs:(created virtual grid cookbook)

docs: update component name to have Component suffix + update display value for path in code samples

data.json

rc

img

new image

core

lint

Author: thelgevold

public/docs/_examples/cb-virtual-grid/e2e-spec.ts

@@ -0,0 +1,49 @@
+/// <reference path='../_protractor/e2e.d.ts' />
+'use strict';
+
+describe('Virtual Grid', function () {
+
+    beforeEach(function () {
+      browser.get('');
+    });
+
+    it('should sort the grid', function() {
+      ValidateRankingColumn(['1000', '999', '998', '997', '996', '995', '994', '993', '992', '991', '990']);
+
+      // click Ranking column and make sure values are sorted
+      element(by.xpath('//tbody/tr[1]/td[3]')).click().then(function(){
+        ValidateRankingColumn(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']);
+      });
+    });
+
+    function ValidateRankingColumn(range: string[]) {
+      for (let i = 0; i < range.length; i++) {
+        let rankCell = element.all(by.xpath('//tbody/tr[' + (i + 2) + ']/td[3]/input')).get(0);
+        expect(rankCell.getAttribute('value')).toEqual(range[i]);
+      }
+    }
+
+    it('should bind to new row but keep DOM constant', function () {
+
+      let lastRowFirstTextCell = element.all(by.css('#cell10-0')).get(0);
+
+      // check that the last row number in the grid is 10
+      expect(element(by.xpath('//tbody/tr[12]/td[1][contains(text(),10)]')).isPresent()).toBe(true);
+
+      let trs = element.all(by.xpath('//tbody/tr'));
+      expect(trs.count()).toBe(12);
+
+      lastRowFirstTextCell.click().then(function(){
+        lastRowFirstTextCell.clear();
+        lastRowFirstTextCell.sendKeys('New Hero');
+        expect(lastRowFirstTextCell.getAttribute('value')).toEqual('New Hero');
+
+        // page down one row  
+        lastRowFirstTextCell.sendKeys(protractor.Key.ARROW_DOWN);
+        // navigating does not increase the number of rows
+        trs = element.all(by.xpath('//tbody/tr'));
+        expect(trs.count()).toBe(12);
+      });
+  });
+});
+

public/docs/_examples/cb-virtual-grid/ts/app/.gitignore

@@ -0,0 +1 @@
+**/*.js

public/docs/_examples/cb-virtual-grid/ts/app/app.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+import { HeroGridComponent } from './hero-grid.component';
+
+@Component({
+  selector: 'my-app',
+  template: '<hero-grid></hero-grid>',
+  directives: [HeroGridComponent]
+})
+
+export class AppComponent {
+}

public/docs/_examples/cb-virtual-grid/ts/app/column.ts

@@ -0,0 +1,12 @@
+// #docregion
+import { Row } from './row';
+
+export class Column {
+  cellValue: string;
+  row: Row;
+
+  constructor(public columnIndex: number, row: Row) {
+    this.cellValue = '';
+    this.row = row;
+  }
+}

public/docs/_examples/cb-virtual-grid/ts/app/hero-data.service.ts

@@ -0,0 +1,41 @@
+// #docregion
+import { Row }    from './row';
+
+export class HeroDataService {
+
+  getApplicants(count: number): Array<Row> {
+
+    let rows: Array<Row> = [];
+    let heroes: Array<string> = ['Mr. Nice',
+                                'Narco',
+                                'Bombasto',
+                                'Celeritas',
+                                'Magneta',
+                                'RubberMan',
+                                'Dynama',
+                                'Dr IQ',
+                                'Magma',
+                                'Tornado'];
+
+    for (let i = 0; i < count; i++) {
+      let heroIndex = this.generateRandomNumber(heroes.length - 1);
+      let heroData = [heroes[heroIndex], count - i, this.generateRandomNumber(70) + 30];
+      rows.push(this.createCell(i, heroData));
+    }
+    return rows;
+  }
+
+  private generateRandomNumber(upperBound: number) {
+    return Math.floor(Math.random() * upperBound);
+  }
+
+  private createCell(index: number, values: Array<any>): Row {
+    let row = new Row(values.length);
+
+    for (let i = 0; i < values.length; i++) {
+      row.columns[i].cellValue = values[i];
+    }
+    return row;
+  }
+}
+

public/docs/_examples/cb-virtual-grid/ts/app/hero-grid-sorting.service.ts

@@ -0,0 +1,26 @@
+// #docregion
+import { Injectable }      from '@angular/core';
+
+import { Row }             from './row';
+
+@Injectable()
+export class HeroGridSortingService {
+  sortDirection: number = 1;
+
+  sort(rows: Array<Row>, colIndex: number) {
+    this.sortDirection *= -1;
+    rows.sort((a, b) => {
+       if (a.columns[colIndex].cellValue === b.columns[colIndex].cellValue) {
+         return 0;
+       }
+
+       if (a.columns[colIndex].cellValue > b.columns[colIndex].cellValue) {
+         return -1 * this.sortDirection;
+       }
+
+       if (a.columns[colIndex].cellValue < b.columns[colIndex].cellValue) {
+         return 1 * this.sortDirection;
+       }
+    });
+  }
+}

public/docs/_examples/cb-virtual-grid/ts/app/hero-grid.component.ts

@@ -0,0 +1,62 @@
+// #docregion
+import { Component, AfterViewChecked, ElementRef } from '@angular/core';
+
+import { HeroGridSortingService } from './hero-grid-sorting.service';
+import { HeroGridService }        from './hero-grid.service';
+import { KeyCodeService }         from './key-code.service';
+import { HeroDataService }        from './hero-data.service';
+import { Row }                    from './row';
+
+@Component({
+  selector: 'hero-grid',
+  providers: [HeroGridService, KeyCodeService, HeroDataService, HeroGridSortingService],
+  template: `<h1>Hero Grid</h1>
+            <table id="hero-grid">
+              <tr>
+                <td class="row-number-column"></td>
+                <td (click)="sort(colIndex)" class="columnHeader" 
+                    *ngFor="#columnHeader of heroGridService.header; #colIndex = index">
+                  {{columnHeader}}
+                </td>
+              </tr>
+              <tr *ngFor="#row of visibleRows">
+                <td class="row-number-column">
+                  {{heroGridService.rows.indexOf(row)}}
+                </td>
+                <td *ngFor="#col of row.columns">
+                  <input [id]="heroGridService.createCellSelector(row,col)" 
+                         [value]="col.cellValue" (input)="col.cellValue = $event.target.value" 
+                         (click)="heroGridService.selectColumn(col)" (keydown)="navigate($event)" />
+                </td>
+              </tr>
+            </table>`
+})
+
+export class HeroGridComponent implements AfterViewChecked {
+
+  visibleRows: Array<Row> = [];
+  heroGridService: HeroGridService;
+  elementRef: ElementRef;
+
+  constructor(heroGridService: HeroGridService, elementRef: ElementRef) {
+    this.elementRef = elementRef;
+    this.heroGridService = heroGridService;
+    this.visibleRows = this.heroGridService.getVisibleRows();
+  }
+
+  navigate($event: any) {
+    let res = this.heroGridService.navigate($event.keyCode);
+    this.visibleRows = this.heroGridService.getVisibleRows();
+    return res;
+  }
+
+  sort(columnIndex: number) {
+    this.heroGridService.sort(columnIndex);
+    this.visibleRows = this.heroGridService.getVisibleRows();
+  }
+
+  ngAfterViewChecked() {
+    let cell = this.elementRef.nativeElement.querySelector('#' + this.heroGridService.getCurrentCellSelector());
+    cell.focus();
+  }
+}

public/docs/_examples/cb-virtual-grid/ts/app/hero-grid.service.ts

@@ -0,0 +1,129 @@
+// #docregion
+import { Injectable }             from '@angular/core';
+
+import { Column }                 from './column';
+import { HeroDataService }        from './hero-data.service';
+import { HeroGridSortingService } from './hero-grid-sorting.service';
+import { KeyCodeService }         from './key-code.service';
+import { Row }                    from './row';
+
+@Injectable()
+export class HeroGridService {
+  static maxRows = 1000;
+  header: Array<string> = ['Name', 'Ranking', 'Age'];
+  rows: Array<Row>;
+  currentColumn: Column;
+  currentRowIndex: number = 0;
+
+  private gridWindow: any;
+
+  keyCodeService: KeyCodeService;
+  sortingService: HeroGridSortingService;
+
+  constructor(keyCodeService: KeyCodeService, heroDataService: HeroDataService, sortingService: HeroGridSortingService) {
+    this.keyCodeService = keyCodeService;
+    this.rows = heroDataService.getApplicants(HeroGridService.maxRows);
+    this.sortingService = sortingService;
+
+    this.init();
+
+    let missingRows = this.gridWindow.pageSize - this.rows.length;
+
+    for (let i = 0; i <= missingRows; i++) {
+      this.rows.push(new Row(this.header.length));
+    }
+  }
+
+  selectColumn(col: Column) {
+    this.currentColumn = col;
+    this.currentRowIndex = this.rows.indexOf(this.currentColumn.row);
+  }
+
+  sort(colIndex: number) {
+    this.sortingService.sort(this.rows, colIndex);
+    this.init();
+  }
+
+  createCellSelector(row: Row, col: Column): string {
+    return 'cell' + this.rows.indexOf(row) + '-' + row.columns.indexOf(col);
+  }
+
+  getCurrentCellSelector() {
+    let cellIndex = this.rows[this.currentRowIndex].columns.indexOf(this.currentColumn);
+    return 'cell' + this.currentRowIndex + '-' + cellIndex;
+  }
+
+  getVisibleRows() {
+    let visible: Array<Row> = [];
+    for (let i = this.gridWindow.start; i <= this.gridWindow.end; i++) {
+      visible.push(this.rows[i]);
+    }
+    return visible;
+  }
+
+  navigate(keyCode: number) {
+    let navDirection = this.keyCodeService.getNavigationKey(keyCode);
+
+    if (navDirection.down) {
+      this.ensureRow();
+      this.currentColumn = this.rows[this.currentRowIndex + 1].columns[this.currentColumn.columnIndex];
+      this.adjustRowRangeDownward();
+    }
+
+    if (navDirection.up) {
+      if (this.currentRowIndex > 0) {
+        this.currentColumn = this.rows[this.currentRowIndex - 1].columns[this.currentColumn.columnIndex];
+        this.adjustRowRangeUpward();
+      }
+    }
+
+    if (navDirection.left) {
+      if (this.currentColumn.columnIndex > 0) {
+        this.currentColumn = this.rows[this.currentRowIndex].columns[this.currentColumn.columnIndex - 1];
+      }
+    }
+
+    if (navDirection.right) {
+      if (this.currentColumn.columnIndex < this.header.length - 1) {
+        this.currentColumn = this.rows[this.currentRowIndex].columns[this.currentColumn.columnIndex + 1];
+      }
+    }
+
+    if (navDirection.tab) {
+      return false;
+    }
+
+    this.currentRowIndex = this.rows.indexOf(this.currentColumn.row);
+    return true;
+  }
+
+  private adjustRowRangeUpward() {
+    if (this.currentRowIndex <= this.gridWindow.start) {
+      this.shiftRowsBy(-1);
+    }
+  }
+
+  private adjustRowRangeDownward() {
+    if (this.currentRowIndex === this.gridWindow.end) {
+      this.shiftRowsBy(1);
+    }
+  }
+
+  private shiftRowsBy(offset: number) {
+    this.gridWindow.start = this.gridWindow.start + offset;
+    this.gridWindow.end = this.gridWindow.end + offset;
+  }
+
+  private ensureRow() {
+    if (this.currentRowIndex + 1 >= this.rows.length) {
+      this.rows.push(new Row(this.header.length));
+    }
+  }
+
+  private init() {
+    this.gridWindow = {pageSize: 10, start: 0, end: 10};
+    this.currentColumn = this.rows[0].columns[0];
+    this.currentRowIndex = 0;
+  }
+}
+

public/docs/_examples/cb-virtual-grid/ts/app/key-code.service.ts

@@ -0,0 +1,14 @@
+// #docregion
+export class KeyCodeService {
+
+  getNavigationKey(keyCode: number): any {
+    return {
+      up:    keyCode === 38,
+      down:  keyCode === 40,
+      right: keyCode === 39,
+      left:  keyCode === 37,
+      tab:   keyCode === 9
+    };
+  }
+}
+

public/docs/_examples/cb-virtual-grid/ts/app/main.ts

@@ -0,0 +1,5 @@
+import { bootstrap }    from '@angular/platform-browser-dynamic';
+
+import { AppComponent } from './app.component';
+
+bootstrap(AppComponent);

public/docs/_examples/cb-virtual-grid/ts/app/row.ts

@@ -0,0 +1,15 @@
+// #docregion
+import { Column } from './column';
+
+export class Row {
+
+  columns: Array<Column>;
+
+  constructor(public columnCount: number) {
+    this.columns = [];
+
+    for (let j = 0; j < this.columnCount; j++) {
+      this.columns.push(new Column(j, this));
+    }
+  }
+}