@swimlane/ngx-datatable 11.1.4 → 11.2.0

package/src/components/datatable.component.ts

@@ -3,14 +3,14 @@ import {
   HostListener, ContentChildren, OnInit, QueryList, AfterViewInit,
   HostBinding, ContentChild, TemplateRef, IterableDiffer,
   DoCheck, KeyValueDiffers, KeyValueDiffer, ViewEncapsulation,
-  ChangeDetectionStrategy, ChangeDetectorRef
+  ChangeDetectionStrategy, ChangeDetectorRef, SkipSelf
 } from '@angular/core';
 
 import {
   forceFillColumnWidths, adjustColumnWidths, sortRows,
   setColumnDefaults, throttleable, translateTemplates
 } from '../utils';
-import { ScrollbarHelper } from '../services';
+import { ScrollbarHelper, DimensionsHelper } from '../services';
 import { ColumnMode, SortType, SelectionType, TableColumn, ContextmenuType } from '../types';
 import { DataTableBodyComponent } from './body';
 import { DatatableGroupHeaderDirective } from './body/body-group-header.directive';
@@ -55,6 +55,7 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
         [groupExpansionDefault]="groupExpansionDefault"
         [scrollbarV]="scrollbarV"
         [scrollbarH]="scrollbarH"
+        [virtualization]="virtualization"
         [loadingIndicator]="loadingIndicator"
         [externalPaging]="externalPaging"
         [rowHeight]="rowHeight"
@@ -114,11 +115,13 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
   @Input() set rows(val: any) {
     this._rows = val;
 
+    if (val) {
+      this._internalRows = [...val];
+    }
+    
     // auto sort on new updates
     if (!this.externalSorting) {
-      this._internalRows = sortRows(val, this._internalColumns, this.sorts);
-    } else {
-      this._internalRows = [...val];
+      this._internalRows = sortRows(this._internalRows, this._internalColumns, this.sorts);
     }
 
     // recalculate sizes/etc
@@ -304,7 +307,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
    *
    *  - `single`
    *  - `multi`
-   *  - `chkbox`
+   *  - `checkbox`
    *  - `multiClick`
    *  - `cell`
    *
@@ -420,6 +423,11 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
    */
   @Input() selectAllRowsOnPage = false;
 
+  /**
+   * A flag for row virtualization on / off
+   */
+  @Input() virtualization: boolean = true;
+
   /**
    * Body was scrolled typically in a `scrollbarV:true` scenario.
    */
@@ -606,7 +614,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
    * Returns if all rows are selected.
    */
   get allRowsSelected(): boolean {
-    let allRowsSelected = (this.selected.length === this.rows.length);
+    let allRowsSelected = (this.rows && this.selected && this.selected.length === this.rows.length);
 
     if (this.selectAllRowsOnPage) {
       const indexes = this.bodyComponent.indexes;
@@ -637,7 +645,8 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
   _columnTemplates: QueryList<DataTableColumnDirective>;
 
   constructor(
-    private scrollbarHelper: ScrollbarHelper,
+    @SkipSelf() private scrollbarHelper: ScrollbarHelper,
+    @SkipSelf() private dimensionsHelper: DimensionsHelper,
     private cd: ChangeDetectorRef,
     element: ElementRef,
     differs: KeyValueDiffers) {
@@ -664,11 +673,15 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
    */
   ngAfterViewInit(): void {
     if (!this.externalSorting) {
-      this._internalRows = sortRows(this._rows, this._internalColumns, this.sorts);
+      this._internalRows = sortRows(this._internalRows, this._internalColumns, this.sorts);
     }
 
     // this has to be done to prevent the change detection
     // tree from freaking out because we are readjusting
+    if (typeof requestAnimationFrame === 'undefined') {
+      return;
+    }
+    
     requestAnimationFrame(() => {
       this.recalculate();
 
@@ -710,7 +723,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
 
   /**
    * Creates a map with the data grouped by the user choice of grouping index
-   * 
+   *
    * @param originalArray the original array passed via parameter
    * @param groupByIndex  the index of the column to group the data by
    */
@@ -743,7 +756,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
   ngDoCheck(): void {
     if (this.rowDiffer.diff(this.rows)) {
       if (!this.externalSorting) {
-        this._internalRows = sortRows(this._rows, this._internalColumns, this.sorts);
+        this._internalRows = sortRows(this._internalRows, this._internalColumns, this.sorts);
       } else {
         this._internalRows = [...this.rows];
       }
@@ -809,7 +822,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
    *
    */
   recalculateDims(): void {
-    const dims = this.element.getBoundingClientRect();
+    const dims = this.dimensionsHelper.getDimensions(this.element);
     this._innerWidth = Math.floor(dims.width);
 
     if (this.scrollbarV) {
@@ -1005,7 +1018,7 @@ export class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
     // the rows again on the 'push' detection...
     if (this.externalSorting === false) {
       // don't use normal setter so we don't resort
-      this._internalRows = sortRows(this.rows, this._internalColumns, sorts);
+      this._internalRows = sortRows(this._internalRows, this._internalColumns, sorts);
     }
 
     this.sorts = sorts;

package/src/components/footer/footer.component.spec.ts

@@ -1,76 +1,358 @@
 import {
-  async,
-  TestBed
-} from '@angular/core/testing';
+  Component,
+  DebugElement,
+  Input,
+  Output,
+  EventEmitter,
+  ViewChild,
+  TemplateRef
+} from '@angular/core';
+import { async, TestBed, ComponentFixture } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
-import {
-  DataTableFooterComponent,
-  DataTablePagerComponent
-} from '.';
-import {By} from "@angular/platform-browser";
+import { DataTableFooterComponent, DataTablePagerComponent } from '.';
+import { addMatchers } from '../../../test';
+
+let fixture: ComponentFixture<TestFixtureComponent>;
+let component: TestFixtureComponent;
+let page: Page;
 
 describe('DataTableFooterComponent', () => {
-  let fixture: any;
-  let component: DataTableFooterComponent;
-  let element;
-
-  // provide our implementations or mocks to the dependency injector
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [ 
-        DataTableFooterComponent,
-        DataTablePagerComponent
-      ]
+  beforeAll(addMatchers);
+
+  beforeEach(async(setupTest));
+
+  describe('div.datatable-footer-inner', () => {
+    it(`should have a height`, () => {
+      component.footerHeight = 123;
+      page.detectChangesAndRunQueries();
+
+      expect(page.datatableFooterInner.nativeElement.style.height).toEqual(
+        '123px'
+      );
     });
-  });
 
-  beforeEach(async(() => {
-    TestBed.compileComponents().then(() => {
-      fixture = TestBed.createComponent(DataTableFooterComponent);
-      component = fixture.componentInstance;
-      element = fixture.nativeElement;
+    it('should have `.selected-count` class when selectedMessage is set', () => {
+      component.selectedMessage = 'selected';
+      component.selectedCount = 1;
+      page.detectChangesAndRunQueries();
+
+      expect(page.datatableFooterInner.nativeElement).toHaveCssClass(
+        'selected-count'
+      );
     });
-  }));
 
-  describe('fixture', () => {
-    it('component is created', () => {
-      expect(component).toBeTruthy();
+    it('should not have `.selected-count` class if selectedMessage is not set', () => {
+      component.selectedMessage = undefined;
+      page.detectChangesAndRunQueries();
+
+      expect(page.datatableFooterInner.nativeElement).not.toHaveCssClass(
+        'selected-count'
+      );
     });
   });
 
-  describe('when the component has a selectionMessage set', () => {
+  describe('when there is no template', () => {
+    it('should not render a template', () => {
+      component.footerTemplate = undefined;
+      page.detectChangesAndRunQueries();
 
-    beforeEach(() => {
-      // setup for the template
-      component.rowCount = 9;
+      expect(page.templateList).toBeNull();
+    });
 
+    it('should display the selected count and total if selectedMessage set', () => {
+      component.footerTemplate = undefined;
       component.selectedMessage = 'selected';
-      component.selectedCount = 3;
+      component.selectedCount = 7;
+      component.rowCount = 10;
+      component.totalMessage = 'total';
+      page.detectChangesAndRunQueries();
+
+      expect(page.pageCount.nativeElement.innerText).toEqual(
+        '7 selected / 10 total'
+      );
+    });
+
+    it('should display only the total if selectedMessage is not set', () => {
+      component.footerTemplate = undefined;
+      component.selectedMessage = undefined;
+      component.rowCount = 100;
+      component.totalMessage = 'total';
+      page.detectChangesAndRunQueries();
+
+      expect(page.pageCount.nativeElement.innerText).toEqual('100 total');
+    });
+
+    it('should render a DataTablePagerComponent', () => {
+      component.footerTemplate = undefined;
+      page.detectChangesAndRunQueries();
+
+      expect(page.datatablePager).not.toBeNull();
+    });
+
+    it('should propagate page change events upward from the DataTablePagerComponent', () => {
+      component.footerTemplate = undefined;
+      page.detectChangesAndRunQueries();
+      const spy = spyOn(component, 'onPageEvent');
+      const pageChangeEvent = { page: 7 };
+      const datatablePagerComponent: DataTablePagerComponent =
+        page.datatablePager.componentInstance;
+      // mimic the act of changing the page through the datatable pager
+      datatablePagerComponent.change.emit(pageChangeEvent);
+
+      expect(spy).toHaveBeenCalledWith(pageChangeEvent);
+    });
+
+    it('should bind to DataTablePagerComponent pagerLeftArrowIcon input', () => {
+      component.pagerLeftArrowIcon = 'pager-left-arrow-icon';
+      page.detectChangesAndRunQueries();
+      const datatablePagerComponent: DataTablePagerComponent =
+        page.datatablePager.componentInstance;
+
+      expect(datatablePagerComponent.pagerLeftArrowIcon).toBe(
+        component.pagerLeftArrowIcon
+      );
+    });
+
+    it('should bind to DataTablePagerComponent pagerRightArrowIcon input', () => {
+      component.pagerRightArrowIcon = 'pager-right-arrow-icon';
+      page.detectChangesAndRunQueries();
+      const datatablePagerComponent: DataTablePagerComponent =
+        page.datatablePager.componentInstance;
+
+      expect(datatablePagerComponent.pagerRightArrowIcon).toBe(
+        component.pagerRightArrowIcon
+      );
+    });
+
+    it('should bind to DataTablePagerComponent pagerNextIcon input', () => {
+      component.pagerNextIcon = 'pager-next-icon';
+      page.detectChangesAndRunQueries();
+      const datatablePagerComponent: DataTablePagerComponent =
+        page.datatablePager.componentInstance;
 
-      fixture.detectChanges();
+      expect(datatablePagerComponent.pagerNextIcon).toBe(
+        component.pagerNextIcon
+      );
     });
 
-    it('then the selectionCount is shown', () => {
-      let selectedElement = fixture.debugElement.query(By.css('.page-count>span'));
+    it('should bind to DataTablePagerComponent pagerPreviousIcon input', () => {
+      component.pagerPreviousIcon = 'pager-previous-icon';
+      page.detectChangesAndRunQueries();
+      const datatablePagerComponent: DataTablePagerComponent =
+        page.datatablePager.componentInstance;
 
-      expect(selectedElement.nativeElement.innerHTML.trim()).toBe('3 selected /');
+      expect(datatablePagerComponent.pagerPreviousIcon).toBe(
+        component.pagerPreviousIcon
+      );
+    });
+
+    it('should bind to DataTablePagerComponent size input', () => {
+      component.pageSize = 4;
+      page.detectChangesAndRunQueries();
+      const datatablePagerComponent: DataTablePagerComponent =
+        page.datatablePager.componentInstance;
+
+      expect(datatablePagerComponent.size).toBe(component.pageSize);
+    });
+
+    it('should bind to DataTablePagerComponent count input', () => {
+      component.rowCount = 40;
+      page.detectChangesAndRunQueries();
+      const datatablePagerComponent: DataTablePagerComponent =
+        page.datatablePager.componentInstance;
+
+      expect(datatablePagerComponent.count).toBe(component.rowCount);
+    });
+
+    it('should bind to DataTablePagerComponent page input', () => {
+      component.offset = 200;
+      page.detectChangesAndRunQueries();
+      const datatablePagerComponent: DataTablePagerComponent =
+        page.datatablePager.componentInstance;
+
+      expect(datatablePagerComponent.page).toBe(201);
+    });
+
+    it('should show & hide the DataTablePagerComponent', () => {
+      component.rowCount = 200;
+      component.pageSize = 5;
+      page.detectChangesAndRunQueries();
+
+      expect(page.datatablePager.nativeElement.hidden).toBe(
+        false,
+        'DataTablePagerComponent should be hidden'
+      );
+
+      component.rowCount = 1;
+      component.pageSize = 2;
+      page.detectChangesAndRunQueries();
+
+      expect(page.datatablePager.nativeElement.hidden).toBe(
+        true,
+        'DataTablePagerComponent should not be hidden'
+      );
     });
   });
 
-  describe('when the component does not have a selectionMessage set', () => {
+  describe('when there is a template', () => {
+    it('should not render div.page-count or DatatablePagerComponent', () => {
+      component.footerTemplate = { template: component.testTemplate };
+      page.detectChangesAndRunQueries();
 
-    beforeEach(() => {
-      // setup for the template
-      component.rowCount = 9;
-      component.selectedCount = 3;
+      expect(page.pageCount).toBeNull();
+      expect(page.datatablePager).toBeNull();
+    });
+
+    it('should render the template', () => {
+      page.detectChangesAndRunQueries();
+      component.footerTemplate = { template: component.testTemplate };
+      page.detectChangesAndRunQueries();
 
-      fixture.detectChanges();
+      expect(page.templateList).not.toBeNull();
     });
 
-    it('then the selectionCount is shown', () => {
-      let selectedElement = fixture.debugElement.query(By.css('.page-count>span'));
+    it('should give the template proper context', () => {
+      component.footerTemplate = { template: component.testTemplate };
+      component.rowCount = 12;
+      component.pageSize = 1;
+      component.selectedCount = 4;
+      component.offset = 0;
+      page.detectChangesAndRunQueries();
+      const listItems = page.templateList.queryAll(By.css('li'));
 
-      expect(selectedElement).toBeNull();
+      expect(listItems[0].nativeElement).toHaveText('rowCount 12');
+      expect(listItems[1].nativeElement).toHaveText('pageSize 1');
+      expect(listItems[2].nativeElement).toHaveText('selectedCount 4');
+      expect(listItems[3].nativeElement).toHaveText('curPage 1');
+      expect(listItems[4].nativeElement).toHaveText('offset 0');
     });
   });
 });
+
+/**
+ * we test DatatableFooterComponent by embedding it in a
+ * test host component
+ */
+@Component({
+  template: `
+    <datatable-footer
+      [rowCount]="rowCount"
+      [pageSize]="pageSize"
+      [offset]="offset"
+      [footerHeight]="footerHeight"
+      [footerTemplate]="footerTemplate"
+      [totalMessage]="totalMessage"
+      [pagerLeftArrowIcon]="pagerLeftArrowIcon"
+      [pagerRightArrowIcon]="pagerRightArrowIcon"
+      [pagerPreviousIcon]="pagerPreviousIcon"
+      [selectedCount]="selectedCount"
+      [selectedMessage]="selectedMessage"
+      [pagerNextIcon]="pagerNextIcon"
+      (page)="onPageEvent($event)">
+    </datatable-footer>
+    
+    <ng-template
+      #testTemplate
+      let-rowCount="rowCount"
+      let-pageSize="pageSize"
+      let-selectedCount="selectedCount"
+      let-curPage="curPage"
+      let-offset="offset">
+        <ul id="template-list">
+          <li>rowCount {{rowCount}}</li>
+          <li>pageSize {{pageSize}}</li>
+          <li>selectedCount {{selectedCount}}</li>
+          <li>curPage {{curPage}}</li>
+          <li>offset {{offset}}</li>
+        </ul>
+    </ng-template>
+  `
+})
+class TestFixtureComponent {
+  footerHeight: number;
+  rowCount: number = 100;
+  pageSize = 1;
+  offset = 0;
+  pagerLeftArrowIcon: string;
+  pagerRightArrowIcon: string;
+  pagerPreviousIcon: string;
+  pagerNextIcon: string;
+  totalMessage: string;
+  footerTemplate: { template: TemplateRef<any> };
+  selectedCount: number;
+  selectedMessage: string;
+
+  /**
+   * establishes a reference to a test template that can
+   * selectively be passed to the DatatableFooterComponent
+   * in these unit tests
+   */
+  @ViewChild('testTemplate', { read: TemplateRef })
+  testTemplate: TemplateRef<any>;
+
+  onPageEvent() {
+    return;
+  }
+}
+
+/**
+ * we use a mock DataTablePagerComponent when testing
+ * the DataTableFooterComponent
+ */
+@Component({
+  selector: 'datatable-pager',
+  template: ''
+})
+class DataTablePagerComponentMock {
+  @Input() pagerLeftArrowIcon: string;
+  @Input() pagerRightArrowIcon: string;
+  @Input() pagerPreviousIcon: string;
+  @Input() pagerNextIcon: string;
+  @Input() page: number;
+  @Input() size: number;
+  @Input() count: number;
+
+  @Output() change: EventEmitter<any> = new EventEmitter();
+}
+
+function setupTest() {
+  return TestBed.configureTestingModule({
+    declarations: [
+      TestFixtureComponent,
+      DataTableFooterComponent,
+      DataTablePagerComponentMock
+    ]
+  })
+    .compileComponents()
+    .then(() => {
+      fixture = TestBed.createComponent(TestFixtureComponent);
+      component = fixture.componentInstance;
+      page = new Page();
+      page.detectChangesAndRunQueries();
+    });
+}
+
+/**
+ * a Page is a collection of references to DebugElements. it
+ * makes for cleaner testing
+ */
+class Page {
+  datatableFooter: DebugElement;
+  datatableFooterInner: DebugElement;
+  templateList: DebugElement;
+  pageCount: DebugElement;
+  datatablePager: DebugElement;
+
+  detectChangesAndRunQueries() {
+    fixture.detectChanges();
+
+    const de = fixture.debugElement;
+
+    this.datatableFooter = de.query(By.css('datatable-footer'));
+    this.datatableFooterInner = de.query(By.css('.datatable-footer-inner'));
+    this.templateList = de.query(By.css('#template-list'));
+    this.pageCount = de.query(By.css('.page-count'));
+    this.datatablePager = de.query(By.css('datatable-pager'));
+  }
+}

package/src/components/footer/pager.component.ts

@@ -8,6 +8,8 @@ import {
     <ul class="pager">
       <li [class.disabled]="!canPrevious()">
         <a
+          role="button"
+          aria-label="go to first page"
           href="javascript:void(0)"
           (click)="selectPage(1)">
           <i class="{{pagerPreviousIcon}}"></i>
@@ -15,12 +17,16 @@ import {
       </li>
       <li [class.disabled]="!canPrevious()">
         <a
+          role="button"
+          aria-label="go to previous page"
           href="javascript:void(0)"
           (click)="prevPage()">
           <i class="{{pagerLeftArrowIcon}}"></i>
         </a>
       </li>
       <li
+        role="button"
+        [attr.aria-label]="'page ' + pg.number"
         class="pages"
         *ngFor="let pg of pages"
         [class.active]="pg.number === page">
@@ -32,6 +38,8 @@ import {
       </li>
       <li [class.disabled]="!canNext()">
         <a
+          role="button"
+          aria-label="go to next page"
           href="javascript:void(0)"
           (click)="nextPage()">
           <i class="{{pagerRightArrowIcon}}"></i>
@@ -39,6 +47,8 @@ import {
       </li>
       <li [class.disabled]="!canNext()">
         <a
+          role="button"
+          aria-label="go to last page"
           href="javascript:void(0)"
           (click)="selectPage(totalPages)">
           <i class="{{pagerNextIcon}}"></i>

package/src/components/header/header-cell.component.ts

@@ -9,7 +9,7 @@ import { MouseEvent } from '../../events';
 @Component({
   selector: 'datatable-header-cell',
   template: `
-    <div>
+    <div class="datatable-header-cell-template-wrap">
       <label
         *ngIf="isCheckboxable"
         class="datatable-checkbox">
@@ -79,6 +79,7 @@ export class DataTableHeaderCellComponent {
   @Input() set sorts(val: any[]) {
     this._sorts = val;
     this.sortDir = this.calcSortDir(val);
+    this.cellContext.sortDir = this.sortDir;
     this.sortClass = this.calcSortClass(this.sortDir);
     this.cd.markForCheck();
   }

package/src/components/header/header.component.ts

@@ -101,6 +101,7 @@ export class DataTableHeaderComponent {
     const colsByPin = columnsByPin(val);
     this._columnsByPin = columnsByPinArr(val);
     this._columnGroupWidths = columnGroupWidths(colsByPin, val);
+    this.setStylesByGroup();
   }
 
   get columns(): any[] {

package/src/datatable.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import 'rxjs/add/observable/fromEvent';
 
 import {
   DatatableComponent,
@@ -34,14 +33,18 @@ import {
   DraggableDirective
 } from './directives';
 
-import { ScrollbarHelper } from './services';
+import { 
+  ScrollbarHelper,
+  DimensionsHelper 
+} from './services';
 
 @NgModule({
   imports: [
     CommonModule
   ],
   providers: [
-    ScrollbarHelper
+    ScrollbarHelper,
+    DimensionsHelper
   ],
   declarations: [
     DataTableFooterTemplateDirective,

package/src/directives/draggable.directive.ts

@@ -5,6 +5,7 @@ import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 import { takeUntil } from 'rxjs/operators';
 import { MouseEvent } from '../events';
+import { fromEvent } from 'rxjs/observable/fromEvent';
 
 /**
  * Draggable Directive for Angular2
@@ -70,11 +71,11 @@ export class DraggableDirective implements OnDestroy, OnChanges {
 
       const mouseDownPos = { x: event.clientX, y: event.clientY };
 
-      const mouseup = Observable.fromEvent(document, 'mouseup');
+      const mouseup = fromEvent(document, 'mouseup');
       this.subscription = mouseup
         .subscribe((ev: MouseEvent) => this.onMouseup(ev));
 
-      const mouseMoveSub = Observable.fromEvent(document, 'mousemove')
+      const mouseMoveSub = fromEvent(document, 'mousemove')
         .pipe(takeUntil(mouseup))
         .subscribe((ev: MouseEvent) => this.move(ev, mouseDownPos));
 

package/src/directives/long-press.directive.ts

@@ -5,7 +5,7 @@ import {
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 import { takeUntil } from 'rxjs/operators';
-
+import { fromEvent } from 'rxjs/observable/fromEvent';
 import { MouseEvent } from '../events';
 
 @Directive({ selector: '[long-press]' })
@@ -50,7 +50,7 @@ export class LongPressDirective implements OnDestroy {
     this.pressing = true;
     this.isLongPressing = false;
 
-    const mouseup = Observable.fromEvent(document, 'mouseup');
+    const mouseup = fromEvent(document, 'mouseup');
     this.subscription = mouseup.subscribe((ev: MouseEvent) => this.onMouseup());
 
     this.timeout = setTimeout(() => {
@@ -61,7 +61,7 @@ export class LongPressDirective implements OnDestroy {
       });
 
       this.subscription.add(
-        Observable.fromEvent(document, 'mousemove')
+        fromEvent(document, 'mousemove')
           .pipe(takeUntil(mouseup))
           .subscribe((mouseEvent: MouseEvent) => this.onMouseMove(mouseEvent))
       );