diff --git a/demo-shell/src/app/components/process-service/process-service.component.html b/demo-shell/src/app/components/process-service/process-service.component.html index 94e99d7ef6..b672d4aecb 100644 --- a/demo-shell/src/app/components/process-service/process-service.component.html +++ b/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)"> diff --git a/demo-shell/src/app/components/process-service/process-service.component.ts b/demo-shell/src/app/components/process-service/process-service.component.ts index 657320cbb8..3eb1432ab2 100644 --- a/demo-shell/src/app/components/process-service/process-service.component.ts +++ b/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 { - DataSorting, - ObjectDataRow, - ObjectDataTableAdapter -} from '@alfresco/adf-core'; +import { ObjectDataRow } 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('adf-start-process.name'); diff --git a/docs/core/datatable.component.md b/docs/core/datatable.component.md index ce7562f7b7..37f50d1245 100644 --- a/docs/core/datatable.component.md +++ b/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 diff --git a/docs/process-services/process-list.component.md b/docs/process-services/process-list.component.md index 49c5ee528a..ee17f55bd3 100644 --- a/docs/process-services/process-list.component.md +++ b/docs/process-services/process-list.component.md @@ -121,6 +121,22 @@ information defined in `app.config.json` as in the example below: ``` +### 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 + + +``` + ### Pagination strategy diff --git a/docs/process-services/task-list.component.md b/docs/process-services/task-list.component.md index fbfdd12ad2..483643f6eb 100644 --- a/docs/process-services/task-list.component.md +++ b/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 ``` +### 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 + + +``` + ### Pagination strategy diff --git a/lib/core/datatable/components/datatable/datatable.component.spec.ts b/lib/core/datatable/components/datatable/datatable.component.spec.ts index b53f518d81..6afcb5e085 100644 --- a/lib/core/datatable/components/datatable/datatable.component.spec.ts +++ b/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(); diff --git a/lib/core/datatable/components/datatable/datatable.component.ts b/lib/core/datatable/components/datatable/datatable.component.ts index abd98c8b98..c41eac7f12 100644 --- a/lib/core/datatable/components/datatable/datatable.component.ts +++ b/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(); diff --git a/lib/process-services/process-list/components/process-list.component.html b/lib/process-services/process-list/components/process-list.component.html index 324c3b48c0..f21086c778 100644 --- a/lib/process-services/process-list/components/process-list.component.html +++ b/lib/process-services/process-list/components/process-list.component.html @@ -1,6 +1,7 @@
{ 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( [ diff --git a/lib/process-services/process-list/components/process-list.component.ts b/lib/process-services/process-list/components/process-list.component.ts index 659f68ed86..90138011f1 100644 --- a/lib/process-services/process-list/components/process-list.component.ts +++ b/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; @@ -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 */ diff --git a/lib/process-services/task-list/components/task-list.component.html b/lib/process-services/task-list/components/task-list.component.html index 715e36a0d0..c99a74371d 100644 --- a/lib/process-services/task-list/components/task-list.component.html +++ b/lib/process-services/task-list/components/task-list.component.html @@ -3,6 +3,7 @@
{ 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( [ diff --git a/lib/process-services/task-list/components/task-list.component.ts b/lib/process-services/task-list/components/task-list.component.ts index f116beea97..dc310d974d 100644 --- a/lib/process-services/task-list/components/task-list.component.ts +++ b/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 */