[ADF-667] selection mode and row styles (#1914)

* selection mode and row styles

- single/multiple/none selection modes for DataTable component (and Document List)
- support for custom row styles (inline and classname values)
- fix karma config (material themes)
- readme updates
- package-lock.json files for NPM5 support
- updated DataTable demo to demonstrate selection modes and row styles

* remove package lock files

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.css

@@ -109,11 +109,15 @@
 }
 
 .alfresco-datatable__row:focus {
-    outline-offset: -4px;
+    outline-offset: -1px;
+    outline-width: 1px;
+    outline-color: rgb(68,138,255);
+    outline-style: solid;
 }
 
-.alfresco-datatable__row--selected {
-    color: rgb(68,138,255);
+.alfresco-datatable__row--selected,
+.alfresco-datatable__row--selected:hover  {
+    background-color: #e0e0e0;
 }
 
 .adf-upload__dragging > td {

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html

@@ -31,8 +31,10 @@
 
     <tr *ngFor="let row of data.getRows(); let idx = index" tabindex="0"
         class="alfresco-datatable__row"
-        [class.alfresco-datatable__row--selected]="selectedRow === row"
-        [adf-upload]="allowDropFiles && rowAllowsDrop(row)" [adf-upload-data]="row">
+        [class.alfresco-datatable__row--selected]="row.isSelected"
+        [adf-upload]="allowDropFiles && rowAllowsDrop(row)" [adf-upload-data]="row"
+        [ngStyle]="rowStyle"
+        [ngClass]="rowStyleClass">
 
         <!-- Actions (left) -->
         <td *ngIf="actions && actionsPosition === 'left'" class="alfresco-datatable__actions-cell">

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts

@@ -18,7 +18,7 @@
 import { SimpleChange } from '@angular/core';
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { CoreModule } from 'ng2-alfresco-core';
-import { MdCheckboxChange } from '@angular/material';
+import { MdCheckboxModule, MdCheckboxChange } from '@angular/material';
 import { DataTableComponent } from './datatable.component';
 import { DataTableCellComponent } from './datatable-cell.component';
 import {
@@ -26,7 +26,7 @@ import {
     DataColumn,
     DataSorting,
     ObjectDataTableAdapter,
-    ObjectDataColumn
+    ObjectDataColumn, ObjectDataRow
 } from './../../data/index';
 
 describe('DataTable', () => {
@@ -39,7 +39,8 @@ describe('DataTable', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
-                CoreModule.forRoot()
+                CoreModule.forRoot(),
+                MdCheckboxModule
             ],
             declarations: [
                 DataTableCellComponent,
@@ -52,7 +53,6 @@ describe('DataTable', () => {
         fixture = TestBed.createComponent(DataTableComponent);
         dataTable = fixture.componentInstance;
         element = fixture.debugElement.nativeElement;
-        //fixture.detectChanges();
     });
 
     beforeEach(() => {
@@ -66,6 +66,93 @@ describe('DataTable', () => {
         };
     });
 
+    it('should reset selection on mode change', () => {
+        spyOn(dataTable, 'resetSelection').and.callThrough();
+
+        dataTable.data = new ObjectDataTableAdapter(
+            [
+                { name: '1' },
+                { name: '2' }
+            ],
+            [ new ObjectDataColumn({ key: 'name'}) ]
+        );
+        const rows = dataTable.data.getRows();
+        rows[0].isSelected = true;
+        rows[1].isSelected = true;
+
+        expect(rows[0].isSelected).toBeTruthy();
+        expect(rows[1].isSelected).toBeTruthy();
+
+        dataTable.ngOnChanges({
+            selectionMode: new SimpleChange(null, 'multiple', false)
+        });
+
+        expect(dataTable.resetSelection).toHaveBeenCalled();
+    });
+
+    it('should select only one row with [single] selection mode', () => {
+        dataTable.selectionMode = 'single';
+        dataTable.data = new ObjectDataTableAdapter(
+            [
+                { name: '1' },
+                { name: '2' }
+            ],
+            [ new ObjectDataColumn({ key: 'name'}) ]
+        );
+        const rows = dataTable.data.getRows();
+
+
+        dataTable.onRowClick(rows[0], null);
+        expect(rows[0].isSelected).toBeTruthy();
+        expect(rows[1].isSelected).toBeFalsy();
+
+        dataTable.onRowClick(rows[1], null);
+        expect(rows[0].isSelected).toBeFalsy();
+        expect(rows[1].isSelected).toBeTruthy();
+    });
+
+    it('should unselect the row with [single] selection mode', () => {
+        dataTable.selectionMode = 'single';
+        dataTable.data = new ObjectDataTableAdapter(
+            [
+                { name: '1' },
+                { name: '2' }
+            ],
+            [ new ObjectDataColumn({ key: 'name'}) ]
+        );
+        const rows = dataTable.data.getRows();
+
+        dataTable.onRowClick(rows[0], null);
+        expect(rows[0].isSelected).toBeTruthy();
+        expect(rows[1].isSelected).toBeFalsy();
+
+        dataTable.onRowClick(rows[0], null);
+        expect(rows[0].isSelected).toBeFalsy();
+        expect(rows[1].isSelected).toBeFalsy();
+    });
+
+    it('should select multiple rows with [multiple] selection mode', () => {
+        dataTable.selectionMode = 'multiple';
+        dataTable.data = new ObjectDataTableAdapter(
+            [
+                { name: '1' },
+                { name: '2' }
+            ],
+            [ new ObjectDataColumn({ key: 'name'}) ]
+        );
+        const rows = dataTable.data.getRows();
+
+        const event = new MouseEvent('click', {
+            metaKey: true
+        });
+
+        dataTable.onRowClick(rows[0], event);
+        dataTable.onRowClick(rows[1], event);
+
+        expect(rows[0].isSelected).toBeTruthy();
+        expect(rows[1].isSelected).toBeTruthy();
+    });
+
     it('should put actions menu to the right by default', () => {
         dataTable.data = new ObjectDataTableAdapter([], [
             <DataColumn> {},

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts

@@ -52,6 +52,9 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
     @Input()
     rows: any[] = [];
 
+    @Input()
+    selectionMode: string = 'single'; // none|single|multiple
+
     @Input()
     multiselect: boolean = false;
 
@@ -70,6 +73,12 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
     @Input()
     allowDropFiles: boolean = false;
 
+    @Input()
+    rowStyle: string;
+
+    @Input()
+    rowStyleClass: string;
+
     @Output()
     rowClick: EventEmitter<DataRowEvent> = new EventEmitter<DataRowEvent>();
 
@@ -88,10 +97,6 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
     noContentTemplate: TemplateRef<any>;
     isSelectAllChecked: boolean = false;
 
-    get selectedRow(): DataRow {
-        return this.data.selectedRow;
-    }
-
     constructor(@Optional() private el: ElementRef) {
     }
 
@@ -111,6 +116,10 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
             }
             return;
         }
+
+        if (changes.selectionMode && !changes.selectionMode.isFirstChange()) {
+            this.resetSelection();
+        }
     }
 
     isPropertyChanged(property: SimpleChange): boolean {
@@ -146,25 +155,50 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
         }
     }
 
-    onRowClick(row: DataRow, e?: Event) {
+    onRowClick(row: DataRow, e: MouseEvent) {
         if (e) {
             e.preventDefault();
         }
 
-        if (this.data) {
-            this.data.selectedRow = row;
+        if (row) {
+            if (this.data) {
+                const newValue = !row.isSelected;
+                const rows = this.data.getRows();
+
+                if (this.isSingleSelectionMode()) {
+                    rows.forEach(r => r.isSelected = false);
+                    row.isSelected = newValue;
+                }
+
+                if (this.isMultiSelectionMode()) {
+                    const modifier = e.metaKey || e.ctrlKey;
+                    if (!modifier) {
+                        rows.forEach(r => r.isSelected = false);
+                    }
+                    row.isSelected = newValue;
+                }
+            }
+
+            let event = new DataRowEvent(row, e, this);
+            this.rowClick.emit(event);
+
+            if (!event.defaultPrevented && this.el.nativeElement) {
+                this.el.nativeElement.dispatchEvent(
+                    new CustomEvent('row-click', {
+                        detail: event,
+                        bubbles: true
+                    })
+                );
+            }
         }
+    }
 
-        let event = new DataRowEvent(row, e, this);
-        this.rowClick.emit(event);
-
-        if (!event.defaultPrevented && this.el.nativeElement) {
-            this.el.nativeElement.dispatchEvent(
-                new CustomEvent('row-click', {
-                    detail: event,
-                    bubbles: true
-                })
-            );
+    resetSelection(): void {
+        if (this.data) {
+            const rows = this.data.getRows();
+            if (rows && rows.length > 0) {
+                rows.forEach(r => r.isSelected = false);
+            }
         }
     }
 
@@ -268,4 +302,16 @@ export class DataTableComponent implements AfterContentInit, OnChanges {
     rowAllowsDrop(row: DataRow): boolean {
         return row.isDropTarget === true;
     }
+
+    hasSelectionMode(): boolean {
+        return this.isSingleSelectionMode() || this.isMultiSelectionMode();
+    }
+
+    isSingleSelectionMode(): boolean {
+        return this.selectionMode && this.selectionMode.toLowerCase() === 'single';
+    }
+
+    isMultiSelectionMode(): boolean {
+        return this.selectionMode && this.selectionMode.toLowerCase() === 'multiple';
+    }
 }