[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

demo-shell-ng2/app/app.module.ts

@@ -17,7 +17,7 @@
 
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { MdSlideToggleModule, MdInputModule } from '@angular/material';
+import { MdSlideToggleModule, MdInputModule, MdSelectModule } from '@angular/material';
 
 import { CoreModule } from 'ng2-alfresco-core';
 import { SearchModule } from 'ng2-alfresco-search';
@@ -64,6 +64,7 @@ import {
         routing,
         MdInputModule,
         MdSlideToggleModule,
+        MdSelectModule,
         CoreModule.forRoot(),
         LoginModule.forRoot(),
         SearchModule.forRoot(),

demo-shell-ng2/app/components/datatable/datatable-demo.component.css

@@ -0,0 +1,10 @@
+alfresco-datatable >>> .custom-row-style.alfresco-datatable__row:focus {
+    outline-offset: -1px;
+    outline-width: 1px;
+    outline-color: green;
+    outline-style: solid;
+}
+
+alfresco-datatable >>> .custom-row-style.alfresco-datatable__row--selected {
+    color: green;
+}

demo-shell-ng2/app/components/datatable/datatable-demo.component.html

@@ -1,8 +1,10 @@
 <div class="p-10">
     <alfresco-datatable
         [data]="data"
+        [selectionMode]="selectionMode"
         [multiselect]="multiselect"
         [actions]="true"
+        rowStyleClass="custom-row-style"
         (showRowActionsMenu)="onShowRowActionsMenu($event)"
         (executeRowAction)="onExecuteRowAction($event)"
         (row-click)="onRowClick($event)"
@@ -22,6 +24,14 @@
 <div class="p-10">
     <md-checkbox [(ngModel)]="multiselect">Multiselect</md-checkbox>
 </div>
+<div class="p-10">
+    <p>For 'Multiple' selection mode use Cmd (macOS) or Ctrl (Win) to toggle selection of multiple items.</p>
+    <md-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
+        <md-option *ngFor="let mode of selectionModes" [value]="mode.value">
+            {{mode.viewValue}}
+        </md-option>
+    </md-select>
+</div>
 <div class="p-10">
     <button md-raised-button (click)="reset()">Reset to default</button>
     <button md-raised-button (click)="addRow()">Add row</button>

demo-shell-ng2/app/components/datatable/datatable-demo.component.ts

@@ -15,18 +15,28 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ObjectDataTableAdapter, DataSorting, ObjectDataRow, ObjectDataColumn, DataCellEvent, DataRowActionEvent } from 'ng2-alfresco-datatable';
 
 @Component({
     selector: 'datatable-demo',
-    templateUrl: './datatable-demo.component.html'
+    templateUrl: './datatable-demo.component.html',
+    styleUrls: ['./datatable-demo.component.css']
 })
 export class DataTableDemoComponent {
 
     multiselect: boolean = false;
     data: ObjectDataTableAdapter;
 
+    @Input()
+    selectionMode = 'single';
+
+    selectionModes = [
+        { value: 'none', viewValue: 'None' },
+        { value: 'single', viewValue: 'Single' },
+        { value: 'multiple', viewValue: 'Multiple' }
+    ];
+
     private _imageUrl: string = 'http://placehold.it/140x100';
     private _createdBy: any = {
         name: 'Denys Vuika',

demo-shell-ng2/app/components/files/files.component.html

@@ -32,20 +32,20 @@
 
                     <!-- Example #1: using custom template with implicit access to data context -->
                     <!--
-                    <template let-entry="$implicit">
+                    <ng-template let-entry="$implicit">
                         <span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
-                    </template>
+                    </ng-template>
                     -->
 
                     <!-- Example #2: using custom template with value access -->
                     <!--
-                    <template let-value="value">
+                    <ng-template let-value="value">
                         <span>Hi! {{value}}</span>
-                    </template>
+                    </ng-template>
                     -->
 
                 </data-column>
-                <!-- Notes: has performance problems due to multiple files/folders causing separate HTTP calls to get tags -->
+                <!-- Notes: has performance overhead due to multiple files/folders causing separate HTTP calls to get tags -->
                 <!--
                 <data-column
                     title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"

ng2-components/config/karma.conf-all.js

@@ -8,6 +8,7 @@ module.exports = function (config) {
 
         files: [
             {pattern: './node_modules/hammerjs/hammer.min.js', included: true, watched: false},
+            {pattern: './node_modules/@angular/material/prebuilt-themes/indigo-pink.css', included: true, watched: false},
 
             //diagrams
             {pattern: './node_modules/chart.js/dist/Chart.js', included: true, watched: false},

ng2-components/ng2-alfresco-datatable/README.md

@@ -227,6 +227,9 @@ platformBrowserDynamic().bootstrapModule(AppModule);
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| `selectionMode` | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows.  |
+| `rowStyle` | string | | The inline style to apply to every row, see [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples |
+| `rowStyleClass` | string | | The CSS class to apply to every row |
 | `data` | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
 | `rows` | Object[] | [] | The rows that the datatable should show |
 | `multiselect` | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |

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 {
+.alfresco-datatable__row--selected,
-    color: rgb(68,138,255);
+.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"
+        [class.alfresco-datatable__row--selected]="row.isSelected"
-        [adf-upload]="allowDropFiles && rowAllowsDrop(row)" [adf-upload-data]="row">
+        [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) {
+        if (row) {
-            this.data.selectedRow = 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);
+    resetSelection(): void {
-        this.rowClick.emit(event);
+        if (this.data) {
-
+            const rows = this.data.getRows();
-        if (!event.defaultPrevented && this.el.nativeElement) {
+            if (rows && rows.length > 0) {
-            this.el.nativeElement.dispatchEvent(
+                rows.forEach(r => r.isSelected = false);
-                new CustomEvent('row-click', {
+            }
-                    detail: event,
-                    bubbles: true
-                })
-            );
         }
     }
 
@@ -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';
+    }
 }

ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts

@@ -196,12 +196,11 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
 // Simple implementation of the DataRow interface.
 export class ObjectDataRow implements DataRow {
 
-    isSelected: boolean = false;
+    constructor(private obj: any, public isSelected: boolean = false) {
-
-    constructor(private obj: any) {
         if (!obj) {
             throw new Error('Object source not found');
         }
+
     }
 
     getValue(key: string): any {

ng2-components/ng2-alfresco-documentlist/README.md

@@ -176,6 +176,9 @@ The properties currentFolderId, folderNode and node are the entry initialization
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| `selectionMode` | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows.  |
+| `rowStyle` | string | | The inline style to apply to every row, see [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples |
+| `rowStyleClass` | string | | The CSS class to apply to every row |
 | `currentFolderId` | string | null | Initial node ID of displayed folder. Can be `-root-`, `-shared-`, `-my-`, or a fixed node ID  |
 | `folderNode` | `MinimalNodeEntryEntity` | null | Currently displayed folder node | 
 | `node` | `NodePaging` | null | Document list will show all the node contained in the NodePaging entity  | 

ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.html

@@ -6,6 +6,7 @@
     (permissionErrorEvent)="onPermissionError($event)">
 </alfresco-document-menu-action>
 <alfresco-datatable
+    [selectionMode]="selectionMode"
     [data]="data"
     [actions]="contentActions"
     [actionsPosition]="contentActionsPosition"
@@ -13,6 +14,8 @@
     [fallbackThumbnail]="fallbackThumbnail"
     [allowDropFiles]="allowDropFiles"
     [contextMenu]="contextMenuActions"
+    [rowStyle]="rowStyle"
+    [rowStyleClass]="rowStyleClass"
     (showRowContextMenu)="onShowRowContextMenu($event)"
     (showRowActionsMenu)="onShowRowActionsMenu($event)"
     (executeRowAction)="onExecuteRowAction($event)"

ng2-components/ng2-alfresco-documentlist/src/components/document-list.component.ts

@@ -63,6 +63,9 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
     @Input()
     thumbnails: boolean = false;
 
+    @Input()
+    selectionMode: string = 'single'; // null|single|multiple
+
     @Input()
     multiselect: boolean = false;
 
@@ -93,6 +96,12 @@ export class DocumentListComponent implements OnInit, OnChanges, AfterContentIni
     @Input()
     sorting: string[];
 
+    @Input()
+    rowStyle: string;
+
+    @Input()
+    rowStyleClass: string;
+
     skipCount: number = 0;
 
     pagination: Pagination;