From 0fa87bb17d6a0c3b6781f860b3f502397a741ecc Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Fri, 13 Jan 2017 12:45:37 +0000
Subject: [PATCH] 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
---
 .../activiti-processlist.component.ts          |  7 ++++++-
 .../components/activiti-tasklist.component.ts  | 18 +++++++++---------
 .../datatable/datatable.component.css          |  5 +++++
 .../datatable/datatable.component.html         |  3 ++-
 .../datatable/datatable.component.ts           | 15 +++++++++++----
 .../src/data/datatable-adapter.ts              |  1 +
 .../src/data/object-datatable-adapter.ts       |  2 ++
 .../src/data/share-datatable-adapter.ts        |  1 +
 8 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts
index 764662dd08..2c7db1ee28 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts
+++ b/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;
         }
     }
diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts b/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts
index db9ae4d8c0..be457cac5d 100644
--- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-tasklist.component.ts
+++ b/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}
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.css b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.css
index edc97ce169..d258331abc 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.css
+++ b/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);
+}
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
index b7f9035c1d..11be56699a 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
+++ b/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"
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
index cd0d2e7547..b8497b9ebc 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts
+++ b/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
diff --git a/ng2-components/ng2-alfresco-datatable/src/data/datatable-adapter.ts b/ng2-components/ng2-alfresco-datatable/src/data/datatable-adapter.ts
index 41ebaada41..7883aebbb1 100644
--- a/ng2-components/ng2-alfresco-datatable/src/data/datatable-adapter.ts
+++ b/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>;
diff --git a/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts b/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts
index d501c00abf..b84ac7495f 100644
--- a/ng2-components/ng2-alfresco-datatable/src/data/object-datatable-adapter.ts
+++ b/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 = [];
 
diff --git a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts b/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts
index c3cba404d3..ab112fc0bb 100644
--- a/ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts
+++ b/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,