[ADF-3082] Task Filter - Custom Task filters don't work (#3402)

* [ADF-3082] Custom Task filters don't work.

* Added an sorting input to the datatable.
* Updated documentation for the recent changes.
* Added testcases for the recent changes.

* [ADF-3082] Custom Task filters don't work

* Added a sorting input to the datatable
* Added testcases to the recent changes.
* Updated doc for the recent changes.

* * Refactored task/process list dataSort.

* * Refactored process/task list datasort method

demo-shell/src/app/components/process-service/process-service.component.html

@@ -40,7 +40,6 @@
                         [assignment]="taskFilter?.filter?.assignment"
                         [state]="taskFilter?.filter?.state"
                         [sort]="taskFilter?.filter?.sort"
-                        [data]="dataTasks"
                         [landingTaskId]="currentTaskId"
                         (rowClick)="onTaskRowClick($event)"
                         (success)="onSuccessTaskList($event)"
@@ -144,7 +143,6 @@
                         [page]="processPage"
                         [size]="paginationPageSize"
                         [sort]="processFilter?.filter?.sort"
-                        [data]="dataProcesses"
                         (rowClick)="onProcessRowClick($event)"
                         (row-dblclick)="onProcessRowDblClick($event)"
                         (success)="onSuccessProcessList($event)">

demo-shell/src/app/components/process-service/process-service.component.ts

@@ -54,11 +54,7 @@ import {
 } from '@alfresco/adf-process-services';
 import { LogService } from '@alfresco/adf-core';
 import { AlfrescoApiService, UserPreferencesService } from '@alfresco/adf-core';
-import {
+import { ObjectDataRow } from '@alfresco/adf-core';
-    DataSorting,
-    ObjectDataRow,
-    ObjectDataTableAdapter
-} from '@alfresco/adf-core';
 import { Subscription } from 'rxjs/Subscription';
 import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
 import { DemoFieldValidator } from './demo-field-validator';
@@ -146,8 +142,6 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
     blobFile: any;
     flag = true;
 
-    dataTasks: ObjectDataTableAdapter;
-    dataProcesses: ObjectDataTableAdapter;
     presetColoum = 'default';
     showProcessPagination = false;
 
@@ -167,8 +161,6 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
                 formService: FormService,
                 private location: Location,
                 private preferenceService: UserPreferencesService) {
-        this.dataTasks = new ObjectDataTableAdapter();
-        this.dataTasks.setSorting(new DataSorting('created', 'desc'));
 
 
         this.defaultProcessName = this.appConfig.get<string>('adf-start-process.name');

docs/core/datatable.component.md

@@ -146,6 +146,7 @@ export class DataTableDemo {
 | rows | `any[]` |  \[] | The rows that the datatable will show. |
 | 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. |
 | showHeader | `boolean` | true | Toggles the header. |
+| sorting | `any[]` | `[]` | Define the sorting order of the datatable. Possible values are : [`created`, `desc`], [`created`, `asc`], [`due`, `desc`], [`due`, `asc`] |
 
 ### Events
 

docs/process-services/process-list.component.md

@@ -121,6 +121,22 @@ information defined in `app.config.json` as in the example below:
 </adf-process-instance-list>
 ```
 
+### Setting Sorting Order for the list
+
+you can pass sorting order as shown in the example below:
+
+```ts
+// Possible values are : `created-desc`, `created-asc`, `ended-desc`, `ended-asc` |
+let sortParam = 'created-desc'; 
+```
+
+```html
+<adf-process-instance-list
+    [appId]="'1'"
+    [sort]="sortParam">
+</adf-process-instance-list>
+```
+
 <!-- {% endraw %} -->
 
 ### Pagination strategy

docs/process-services/task-list.component.md

@@ -187,6 +187,22 @@ You can use an HTML-based schema and an `app.config.json` custom schema declarat
 </adf-tasklist>
 ```
 
+### Setting Sorting Order for the list
+
+you can pass sorting order as shown in the example below:
+
+```ts
+// Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc`
+let sortParam = 'created-desc'; 
+```
+
+```html
+<adf-tasklist
+    [appId]="'1'"
+    [sort]="sortParam">
+</adf-tasklist>
+```
+
 <!-- {% endraw %} -->
 
 ### Pagination strategy

lib/core/datatable/components/datatable/datatable.component.spec.ts

@@ -207,6 +207,62 @@ describe('DataTable', () => {
         expect(element.querySelector('[data-automation-id="text_FAKE"]')).not.toBeNull();
     });
 
+    it('should set rows to the data when rows defined', () => {
+        const dataRows =
+            [
+                { name: 'test1' },
+                { name: 'test2' },
+                { name: 'test3' },
+                { name: 'test4' }
+            ];
+        dataTable.data = new ObjectDataTableAdapter([],
+            [new ObjectDataColumn({ key: 'name' })]
+        );
+
+        dataTable.ngOnChanges({
+            rows: new SimpleChange(null, dataRows, false)
+        });
+        fixture.detectChanges();
+
+        const rows = dataTable.data.getRows();
+        expect(rows[0].getValue('name')).toEqual('test1');
+        expect(rows[1].getValue('name')).toEqual('test2');
+    });
+
+    it('should set sort order if sorting is defined', () => {
+        const dataSortObj = new DataSorting('created', 'desc');
+
+        const sort = [ 'created', 'desc' ];
+        dataTable.data = new ObjectDataTableAdapter([],
+            [new ObjectDataColumn({ key: 'name' })]
+        );
+
+        dataTable.ngOnChanges({
+            sorting: new SimpleChange(null, sort, false)
+        });
+
+        fixture.detectChanges();
+        const dataSort = dataTable.data.getSorting();
+        expect(dataSort).toEqual(dataSortObj);
+    });
+
+    it('should set custom sort order', () => {
+        const dataSortObj = new DataSorting('dummayName', 'asc');
+
+        const sort = [ 'dummayName', 'asc' ];
+        dataTable.data = new ObjectDataTableAdapter([],
+            [new ObjectDataColumn({ key: 'name' })]
+        );
+        dataTable.data.setSorting(new DataSorting('created', 'desc'));
+        dataTable.ngOnChanges({
+            sorting: new SimpleChange(null, sort, false)
+        });
+
+        fixture.detectChanges();
+        const dataSort = dataTable.data.getSorting();
+        expect(dataSort).toEqual(dataSortObj);
+    });
+
     it('should reset selection on mode change', () => {
         spyOn(dataTable, 'resetSelection').and.callThrough();
 

lib/core/datatable/components/datatable/datatable.component.ts

@@ -67,6 +67,12 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
     @Input()
     rows: any[] = [];
 
+    /** Define the sort order of the datatable. Possible values are :
+     * [`created`, `desc`], [`created`, `asc`], [`due`, `desc`], [`due`, `asc`]
+     */
+    @Input()
+    sorting: any[] = [];
+
     /** 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.
      */
@@ -207,6 +213,10 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
             this.resetSelection();
             this.emitRowSelectionEvent('row-unselect', null);
         }
+
+        if (this.isPropertyChanged(changes['sorting'])) {
+            this.setTableSorting(changes['sorting'].currentValue);
+        }
     }
 
     ngDoCheck() {
@@ -224,6 +234,12 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
         return rows.map(row => new ObjectDataRow(row));
     }
 
+    convertToDataSorting(sorting: any[]): DataSorting {
+        if (sorting && sorting.length > 0) {
+            return new DataSorting(sorting[0], sorting[1]);
+        }
+    }
+
     private initAndSubscribeClickStream() {
         this.unsubscribeClickStream();
         let singleClickStream = this.click$
@@ -300,6 +316,12 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
         }
     }
 
+    private setTableSorting(sorting) {
+        if (this.data) {
+            this.data.setSorting(this.convertToDataSorting(sorting));
+        }
+    }
+
     onRowClick(row: DataRow, e: MouseEvent) {
         if (e) {
             e.preventDefault();

lib/process-services/process-list/components/process-list.component.html

@@ -1,6 +1,7 @@
 <div>
     <adf-datatable #dataTable
         [data]="data"
+        [sorting]="dataSort"
         [loading]="isLoading"
         [selectionMode]="selectionMode"
         [multiselect]="multiselect"

lib/process-services/process-list/components/process-list.component.spec.ts

@@ -251,6 +251,12 @@ describe('ProcessInstanceListComponent', () => {
         expect(component.getCurrentId()).toBeNull();
     });
 
+    it('should return the sorting order if sort is defined', () => {
+        component.sort = 'fakeKey-fakeOrder';
+        fixture.detectChanges();
+        expect(component.dataSort).toEqual(['fakeKey', 'fakeOrder']);
+    });
+
     it('should return selected true for the selected process', () => {
         component.data = new ObjectDataTableAdapter(
             [

lib/process-services/process-list/components/process-list.component.ts

@@ -131,6 +131,7 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
     currentInstanceId: string;
     isLoading: boolean = true;
     layoutPresets = {};
+    sorting: any[] = ['created', 'desc'];
 
     pagination: BehaviorSubject<PaginationModel>;
 
@@ -289,6 +290,14 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
         }
     }
 
+    /**
+     * Sort the process based on current value of 'sort' property
+     * Return the sorting order
+     */
+    get dataSort(): any[] {
+        return this.sort ? this.sort.split('-') : this.sorting;
+    }
+
     /**
      * Return the current id
      */

lib/process-services/task-list/components/task-list.component.html

@@ -3,6 +3,7 @@
     <div>
         <adf-datatable
             [data]="data"
+            [sorting]="dataSort"
             [loading]="isLoading"
             [multiselect]="multiselect"
             [selectionMode]="selectionMode"

lib/process-services/task-list/components/task-list.component.spec.ts

@@ -334,6 +334,12 @@ describe('TaskListComponent', () => {
         expect(component.getCurrentId()).toBeNull();
     });
 
+    it('should return the sorting order if sort is defined', () => {
+        component.sort = 'fakeKey-fakeOrder';
+        fixture.detectChanges();
+        expect(component.dataSort).toEqual(['fakeKey', 'fakeOrder']);
+    });
+
     it('should return selected true for the selected task', () => {
         component.data = new ObjectDataTableAdapter(
             [

lib/process-services/task-list/components/task-list.component.ts

@@ -136,6 +136,7 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
     size: number = PaginationComponent.DEFAULT_PAGINATION.maxItems;
 
     isLoading: boolean = true;
+    sorting: any[] = ['created', 'desc'];
 
     /**
      * Toggles custom data source mode.
@@ -301,6 +302,14 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
         }
     }
 
+    /**
+     * Return the sorting order
+     * Sort the tasks based on current value of 'sort' property
+     */
+    get dataSort(): any[] {
+        return this.sort ? this.sort.split('-') : this.sorting;
+    }
+
     /**
      * Return the current id
      */