selected row highlight (#1448)

* showing selected row

Support for showing selected row for the components:

- DataTable
- DocumentList
- Activiti TaskList
- Activiti ProcessList

fixes #170

* unit test fixes

ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts

@@ -191,8 +191,13 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges {
      */
     selectFirst() {
         if (!this.isListEmpty()) {
-            this.currentInstanceId = this.data.getRows()[0].getValue('id');
+            let row = this.data.getRows()[0];
+            this.data.selectedRow = row;
+            this.currentInstanceId = row.getValue('id');
         } else {
+            if (this.data) {
+                this.data.selectedRow = null;
+            }
             this.currentInstanceId = null;
         }
     }

ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts

@@ -189,20 +189,20 @@ export class ActivitiTaskList implements OnInit, OnChanges {
      */
     selectTask(taskIdToSelect: string) {
         if (!this.isListEmpty()) {
-            let dataRow = this.data.getRows().find(row => row.getValue('id') ===  taskIdToSelect);
-            this.currentInstanceId = dataRow ? dataRow.getValue('id') : this.selectFirst();
+            let rows = this.data.getRows();
+            if (rows.length > 0) {
+                let dataRow = rows.find(row => row.getValue('id') ===  taskIdToSelect) || rows[0];
+                this.data.selectedRow = dataRow;
+                this.currentInstanceId = dataRow.getValue('id');
+            }
         } else {
+            if (this.data) {
+                this.data.selectedRow = null;
+            }
             this.currentInstanceId = null;
         }
     }
 
-    /**
-     * Select the first instance of a list if present
-     */
-    selectFirst() {
-        return this.data.getRows()[0].getValue('id');
-    }
-
     /**
      * Return the current id
      * @returns {string}

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

@@ -114,3 +114,8 @@
     border-collapse: unset;
     border-spacing: 0;
 }
+
+
+.alfresco-datatable__row--selected {
+    color: rgb(68,138,255);
+}

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

@@ -31,7 +31,8 @@
     </thead>
     <tbody>
 
-    <tr *ngFor="let row of data.getRows(); let idx = index" tabindex="0">
+    <tr *ngFor="let row of data.getRows(); let idx = index" tabindex="0"
+        [class.alfresco-datatable__row--selected]="selectedRow === row">
         <td *ngIf="multiselect">
             <label
                 class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select"

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

@@ -53,10 +53,6 @@ export class DataTableComponent implements OnInit {
     @Output()
     rowDblClick: EventEmitter<DataRowEvent> = new EventEmitter<DataRowEvent>();
 
-    noContentTemplate: TemplateRef<any>;
-
-    isSelectAllChecked: boolean = false;
-
     @Output()
     showRowContextMenu: EventEmitter<any> = new EventEmitter();
 
@@ -66,6 +62,13 @@ export class DataTableComponent implements OnInit {
     @Output()
     executeRowAction: EventEmitter<any> = new EventEmitter();
 
+    noContentTemplate: TemplateRef<any>;
+    isSelectAllChecked: boolean = false;
+
+    get selectedRow(): DataRow {
+        return this.data.selectedRow;
+    }
+
     ngOnInit() {
         if (!this.data) {
             this.data = new ObjectDataTableAdapter([], []);
@@ -82,6 +85,10 @@ export class DataTableComponent implements OnInit {
             e.preventDefault();
         }
 
+        if (this.data) {
+            this.data.selectedRow = row;
+        }
+
         this.rowClick.emit({
             value: row,
             event: e

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

@@ -16,6 +16,7 @@
  */
 
 export interface DataTableAdapter {
+    selectedRow: DataRow;
     getRows(): Array<DataRow>;
     setRows(rows: Array<DataRow>): void;
     getColumns(): Array<DataColumn>;

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

@@ -26,6 +26,8 @@ export class ObjectDataTableAdapter implements DataTableAdapter {
     private _rows: DataRow[];
     private _columns: DataColumn[];
 
+    selectedRow: DataRow;
+
     static generateSchema(data: any[]) {
         let schema = [];
 

ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts

@@ -48,6 +48,7 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
 
     thumbnails: boolean = false;
     dataLoaded: DataLoadedEventEmitter;
+    selectedRow: DataRow;
 
     constructor(private documentListService: DocumentListService,
                 private basePath: string,