inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-3039] Task List - Enanchement (#3404)

Browse Source 
* * Created DataColumnSchemaAssembler component to get column schema from html and app.config.json
* Removed column related  method  from tasklist.

* * Removed data property from the tasklist component
* Using rows input property instead of data input property of the datatable

* *  Renamed  DataColumnSchemaAssembler to DataTableSchema
* Refactored DataTableSchema component

* * Changed schem property into an  input schemaColumns property  in dataTable component

* * Added selectFirstRow input property to select a first row of datatable
* Removed unnecessary method from tasklist component

* * Added test case for the recent changes
* Added mock object for the tasklist spec

* * Added testcases for recent changes in the datatable component

* * Updated datatable and tasklist document for the recent changes

* * Refactored process-service and task list component
* Updated datatable document.

* [ADF-3039] Task List - Enanchement
* Changed schemaColumn name to columns
* Updated datatable documentation.
*  data input Annotated  with @deprecated in the tasklist component

* * Added an sorting input to the datatable.
* Updated datatable and tasklist documentation
* Added method to get current sorting order.

* * After rebasing

* * Revert  sorting changes

* * After rebase

* * fixed conflicts

* * Fixed failing testcase after rebased.
This commit is contained in:
siva kumar 2018-06-01 14:09:09 +05:30 committed by Maurizio Vitale
parent 2f12f518ef
commit d4f57b8786
12 changed files with 546 additions and 420 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,7 +54,6 @@ import {
} from '@alfresco/adf-process-services'; } from '@alfresco/adf-process-services';
import { LogService } from '@alfresco/adf-core'; import { LogService } from '@alfresco/adf-core';
import { AlfrescoApiService, UserPreferencesService } from '@alfresco/adf-core'; import { AlfrescoApiService, UserPreferencesService } from '@alfresco/adf-core';
import { ObjectDataRow } from '@alfresco/adf-core';
import { Subscription } from 'rxjs/Subscription'; import { Subscription } from 'rxjs/Subscription';
import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component'; import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
import { DemoFieldValidator } from './demo-field-validator'; import { DemoFieldValidator } from './demo-field-validator';
@ -164,7 +163,6 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
private location: Location, private location: Location,
private preferenceService: UserPreferencesService) { private preferenceService: UserPreferencesService) {
this.defaultProcessName = this.appConfig.get<string>('adf-start-process.name'); this.defaultProcessName = this.appConfig.get<string>('adf-start-process.name');
this.defaultProcessDefinitionName = this.appConfig.get<string>('adf-start-process.processDefinitionName'); this.defaultProcessDefinitionName = this.appConfig.get<string>('adf-start-process.processDefinitionName');
@ -446,11 +444,11 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
this.activeTab = this.tabs.tasks; this.activeTab = this.tabs.tasks;
const taskId = event.value.id; const taskId = event.value.id;
const processTaskDataRow = new ObjectDataRow({ const processTaskDataRow: any = {
id: taskId, id: taskId,
name: event.value.name || 'No name', name: event.value.name || 'No name',
created: event.value.created created: event.value.created
}); };
this.activitifilter.selectFilter(null); this.activitifilter.selectFilter(null);
if (this.taskList) { if (this.taskList) {
this.taskList.setCustomDataSource([processTaskDataRow]); this.taskList.setCustomDataSource([processTaskDataRow]);

153
docs/core/datatable.component.md
View File

@ -80,7 +80,72 @@ export class DataTableDemo {
} }
``` ```
You can also use HTML-based schema declaration like shown below: ### Setting the rows and column schema
You can set rows and columns to the ObjectDataTableAdapter like shown below:
```ts
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
@Component({...})
export class DataTableDemo {
data: ObjectDataTableAdapter;
constructor() {
this.data = new ObjectDataTableAdapter(
// data
[
{id: 1, name: 'Name 1'},
{id: 2, name: 'Name 2'}
],
// columns
[
{
type: 'text',
key: 'id',
title: 'Id',
sortable: true
},
{
type: 'text',
key: 'name',
title: 'Name',
cssClass: 'full-width',
sortable: true
}
]
);
}
}
```
```html
<adf-datatable
[data]="data">
</adf-datatable>
```
You can also set rows and HTML-based schema declaration like shown below:
```ts
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
@Component({...})
export class DataTableDemo {
data: ObjectDataTableAdapter;
constructor() {
this.data = new ObjectDataTableAdapter(
// data
[
{id: 1, name: 'Name 1'},
{id: 2, name: 'Name 2'}
],
[]
);
}
}
```
```html ```html
<adf-datatable [data]="data"> <adf-datatable [data]="data">
@ -94,37 +159,96 @@ You can also use HTML-based schema declaration like shown below:
</adf-datatable> </adf-datatable>
``` ```
You can also set rows to the ObjectDataTableAdapter and set columns as an input like shown below :
```ts ```ts
import { ObjectDataTableAdapter } from '@alfresco/adf-core'; import { ObjectDataTableAdapter } from '@alfresco/adf-core';
@Component({...}) @Component({...})
export class DataTableDemo { export class DataTableDemo {
data: ObjectDataTableAdapter; data: ObjectDataTableAdapter;
schema: any;
constructor() { constructor() {
this.data = new ObjectDataTableAdapter( this.data = new ObjectDataTableAdapter(
// data // data
[
{id: 1, name: 'Name 1'},
{id: 2, name: 'Name 2'}
],
[]
);
// columns
this.schema =
[ [
{ {
id: 1, type: 'text',
name: 'Name 1', key: 'id',
createdBy : { name: 'user'}, title: 'Id',
createdOn: 123, sortable: true
icon: 'http://example.com/img.png'
}, },
{ {
id: 2, type: 'text',
name: 'Name 2', key: 'name',
createdBy : { name: 'user 2'}, title: 'Name',
createdOn: 123, sortable: true
icon: 'http://example.com/img.png'
} }
] ];
);
} }
} }
``` ```
```html
<adf-datatable
[data]="data"
[columns]="schema">
</adf-datatable>
```
You can also set rows and columns through inputs as shown below :
```ts
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
@Component({...})
export class DataTableDemo {
rows: any;
schema: any;
constructor() {
// data
this.rows =
[
{id: 1, name: 'Name 1'},
{id: 2, name: 'Name 2'}
];
// columns
this.schema =
[
{
type: 'text',
key: 'id',
title: 'Id',
sortable: true
},
{
type: 'text',
key: 'name',
title: 'Name',
sortable: true
}
];
}
}
```
```html
<adf-datatable
[rows]="rows"
[columns]="schema">
</adf-datatable>
```
## Class members ## Class members
### Properties ### Properties
@ -134,6 +258,7 @@ export class DataTableDemo {
| actions | `boolean` | false | Toggles the data actions column. | | actions | `boolean` | false | Toggles the data actions column. |
| actionsPosition | `string` | "right" | Position of the actions dropdown menu. Can be "left" or "right". | | actionsPosition | `string` | "right" | Position of the actions dropdown menu. Can be "left" or "right". |
| allowDropFiles | `boolean` | false | Toggles file drop support for rows (see [Upload directive](upload.directive.md) for further details). | | allowDropFiles | `boolean` | false | Toggles file drop support for rows (see [Upload directive](upload.directive.md) for further details). |
| columns | `any[]` | `[]` | The columns that the datatable will show. |
| contextMenu | `boolean` | false | Toggles custom context menu for the component. | | contextMenu | `boolean` | false | Toggles custom context menu for the component. |
| data | [`DataTableAdapter`](../../lib/core/datatable/data/datatable-adapter.ts) | | Data source for the table | | data | [`DataTableAdapter`](../../lib/core/datatable/data/datatable-adapter.ts) | | Data source for the table |
| display | `string` | [`DisplayMode`](../../lib/core/datatable/components/datatable/datatable.component.ts).List | Selects the display mode of the table. Can be "list" or "gallery". | | display | `string` | [`DisplayMode`](../../lib/core/datatable/components/datatable/datatable.component.ts).List | Selects the display mode of the table. Can be "list" or "gallery". |
@ -145,8 +270,8 @@ export class DataTableDemo {
| rowStyleClass | `string` | "" | The CSS class to apply to every row. | | rowStyleClass | `string` | "" | The CSS class to apply to every row. |
| rows | `any[]` | \[] | The rows that the datatable will show. | | 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. | | 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. |
| selectFirstRow | `boolean` | `true` | Toggles the first row selection. |
| showHeader | `boolean` | true | Toggles the header. | | 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 ### Events

40
docs/process-services/task-list.component.md
View File

@ -44,7 +44,7 @@ Renders a list containing all the tasks matched by the parameters specified.
| -- | -- | -- | -- | | -- | -- | -- | -- |
| appId | `number` | | The id of the app. | | appId | `number` | | The id of the app. |
| assignment | `string` | | The assignment of the process. Possible values are: "assignee" (the current user is the assignee), candidate (the current user is a task candidate", "group_x" (the task is assigned to a group where the current user is a member, no value(the current user is involved). | | assignment | `string` | | The assignment of the process. Possible values are: "assignee" (the current user is the assignee), candidate (the current user is a task candidate", "group_x" (the task is assigned to a group where the current user is a member, no value(the current user is involved). |
| data | [`DataTableAdapter`](../../lib/core/datatable/data/datatable-adapter.ts) | | Data source object that represents the number and the type of the columns that you want to show. | | data | [`DataTableAdapter`](../../lib/core/datatable/data/datatable-adapter.ts) | | Data source object that represents the number and the type of the columns that you want to show. **Deprecated:** in 2.4.0 |
| landingTaskId | `string` | | Define which task id should be selected after reloading. If the task id doesn't exist or nothing is passed then the first task will be selected. | | landingTaskId | `string` | | Define which task id should be selected after reloading. If the task id doesn't exist or nothing is passed then the first task will be selected. |
| multiselect | `boolean` | false | Toggles multiple row selection, renders checkboxes at the beginning of each row | | multiselect | `boolean` | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
| name | `string` | | Name of the tasklist. | | name | `string` | | Name of the tasklist. |
@ -54,7 +54,7 @@ Renders a list containing all the tasks matched by the parameters specified.
| processInstanceId | `string` | | The Instance Id of the process. | | processInstanceId | `string` | | The Instance Id of the process. |
| 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. | | 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. |
| size | `number` | [`PaginationComponent`](../core/pagination.component.md).DEFAULT_PAGINATION.maxItems | The number of tasks to fetch. Default value: 25. | | size | `number` | [`PaginationComponent`](../core/pagination.component.md).DEFAULT_PAGINATION.maxItems | The number of tasks to fetch. Default value: 25. |
| sort | `string` | | Define the sort order of the processes. Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc` | | sort | `string` | | Define the sort order of the tasks. Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc` |
| state | `string` | | Current state of the process. Possible values are: `completed`, `active`. | | state | `string` | | Current state of the process. Possible values are: `completed`, `active`. |
### Events ### Events
@ -73,41 +73,7 @@ renders details of any chosen instance.
### Setting the column schema ### Setting the column schema
You can pass a [DataTableAdapter instance](../core/datatable-adapter.interface.md) You can use an HTML-based schema declaration to set a column schema for the tasklist as shown below :
to set a column schema for the tasklist as shown below :
```ts
let data = new ObjectDataTableAdapter(
// Row data
[
{ id: 1, name: 'Name 1' },
{ id: 2, name: 'Name 2' }
],
// Column schema
[
{
type: 'text',
key: 'id',
title: 'Id',
sortable: true
},
{
type: 'text',
key: 'name',
title: 'Name',
sortable: true
}
]
);
```
```html
<adf-tasklist
[data]="'data'">
</adf-tasklist>
```
Alternatively, you can use an HTML-based schema declaration:
```html ```html
<adf-tasklist ...> <adf-tasklist ...>

37
lib/core/datatable/components/datatable/datatable.component.spec.ts
View File

@ -287,6 +287,43 @@ describe('DataTable', () => {
expect(dataTable.resetSelection).toHaveBeenCalled(); expect(dataTable.resetSelection).toHaveBeenCalled();
}); });
it('should select first row when selectFirstRow set to true', () => {
dataTable.selectFirstRow = true;
dataTable.rows = [{ name: 'TEST1' }, { name: 'FAKE2' }, { name: 'TEST2' }, { name: 'FAKE2' }];
dataTable.data = new ObjectDataTableAdapter([],
[new ObjectDataColumn({ key: 'name' })]
);
fixture.detectChanges();
const rows = dataTable.data.getRows();
expect(rows[0].isSelected).toBeTruthy();
expect(rows[1].isSelected).toBeFalsy();
expect(rows[2].isSelected).toBeFalsy();
});
it('should not select first row when selectFirstRow set to false', () => {
dataTable.selectFirstRow = false;
const dataRows =
[
{ name: 'TEST1' },
{ name: 'FAKE2' },
{ name: 'TEST2' },
{ name: 'FAKE2' }
];
dataTable.data = new ObjectDataTableAdapter(dataRows,
[new ObjectDataColumn({ key: 'name' })]
);
dataTable.ngOnChanges({
rows: new SimpleChange(null, dataRows, false)
});
fixture.detectChanges();
const rows = dataTable.data.getRows();
expect(rows[0].isSelected).toBeFalsy();
expect(rows[1].isSelected).toBeFalsy();
expect(rows[2].isSelected).toBeFalsy();
});
it('should select only one row with [single] selection mode', (done) => { it('should select only one row with [single] selection mode', (done) => {
dataTable.selectionMode = 'single'; dataTable.selectionMode = 'single';
dataTable.data = new ObjectDataTableAdapter( dataTable.data = new ObjectDataTableAdapter(

44
lib/core/datatable/components/datatable/datatable.component.ts
View File

@ -71,6 +71,14 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
@Input() @Input()
sorting: any[] = []; sorting: any[] = [];
/** The columns that the datatable will show. */
@Input()
columns: any[] = [];
/* Toggles default selection of the first row */
@Input()
selectFirstRow: boolean = true;
/** Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode, /** 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. * you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows.
*/ */
@ -158,8 +166,6 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
private clickObserver: Observer<DataRowEvent>; private clickObserver: Observer<DataRowEvent>;
private click$: Observable<DataRowEvent>; private click$: Observable<DataRowEvent>;
private schema: DataColumn[] = [];
private differ: any; private differ: any;
private rowMenuCache: object = {}; private rowMenuCache: object = {};
@ -293,7 +299,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
} }
private initTable() { private initTable() {
this.data = new ObjectDataTableAdapter(this.rows, this.schema); this.data = new ObjectDataTableAdapter(this.rows, this.columns);
this.setupData(this.data); this.setupData(this.data);
this.rowMenuCache = {}; this.rowMenuCache = {};
} }
@ -323,16 +329,32 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
this.resetSelection(); this.resetSelection();
} }
this.data.setRows(this.convertToRowsData(rows)); this.data.setRows(this.convertToRowsData(rows));
this.selectFirst();
}
}
private selectFirst() {
if (this.selectFirstRow) {
if (this.data && this.data.getRows().length > 0) {
let row = this.data.getRows()[0];
row.isSelected = true;
this.data.selectedRow = row;
}
} }
} }
private setTableSchema() { private setTableSchema() {
if (this.columnList && this.columnList.columns) { let schema = [];
this.schema = this.columnList.columns.map(c => <DataColumn> c); if (!this.columns || this.columns.length === 0) {
schema = this.getSchemaFromHtml();
} else {
schema = this.columns.concat(this.getSchemaFromHtml());
} }
if (this.data && this.schema && this.schema.length > 0) { this.columns = schema;
this.data.setColumns(this.schema);
if (this.data && this.columns && this.columns.length > 0) {
this.data.setColumns(this.columns);
} }
} }
@ -342,6 +364,14 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
} }
} }
public getSchemaFromHtml(): any {
let schema = [];
if (this.columnList && this.columnList.columns && this.columnList.columns.length > 0) {
schema = this.columnList.columns.map(c => <DataColumn> c);
}
return schema;
}
onRowClick(row: DataRow, e: MouseEvent) { onRowClick(row: DataRow, e: MouseEvent) {
if (e) { if (e) {
e.preventDefault(); e.preventDefault();

80
lib/core/datatable/data/data-table.schema.ts Normal file
View File

@ -0,0 +1,80 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ContentChild, Input } from '@angular/core';
import { AppConfigService } from '../../app-config/app-config.service';
import { DataColumnListComponent } from '../../data-column/data-column-list.component';
import { DataColumn } from './data-column.model';
import { ObjectDataColumn } from './object-datacolumn.model';
export abstract class DataTableSchema {
@ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
/** Custom preset column schema in JSON format. */
@Input()
presetColumn: string;
columns: any;
private layoutPresets = {};
constructor(private appConfigService: AppConfigService,
protected presetKey: string,
protected presetsModel: any) { }
public createDatatableSchema(): void {
this.loadLayoutPresets();
if (!this.columns || this.columns.length === 0) {
this.columns = this.mergeJsonAndHtmlSchema();
}
}
public loadLayoutPresets(): void {
const externalSettings = this.appConfigService.get(this.presetKey, null);
if (externalSettings) {
this.layoutPresets = Object.assign({}, this.presetsModel, externalSettings);
} else {
this.layoutPresets = this.presetsModel;
}
}
public mergeJsonAndHtmlSchema(): any {
let customSchemaColumns = [];
customSchemaColumns = this.getSchemaFromConfig(this.presetColumn).concat(this.getSchemaFromHtml(this.columnList));
if (customSchemaColumns.length === 0) {
customSchemaColumns = this.getDefaultLayoutPreset();
}
return customSchemaColumns;
}
public getSchemaFromHtml(columnList: DataColumnListComponent): any {
let schema = [];
if (columnList && columnList.columns && columnList.columns.length > 0) {
schema = columnList.columns.map(c => <DataColumn> c);
}
return schema;
}
public getSchemaFromConfig(presetColoumn: string): DataColumn[] {
return presetColoumn ? (this.layoutPresets[presetColoumn]).map(col => new ObjectDataColumn(col)) : [];
}
private getDefaultLayoutPreset(): DataColumn[] {
return (this.layoutPresets['default']).map(col => new ObjectDataColumn(col));
}
}

1
lib/core/datatable/public-api.ts
View File

@ -35,6 +35,7 @@ export * from './components/datatable/date-cell.component';
export * from './components/datatable/empty-list.component'; export * from './components/datatable/empty-list.component';
export * from './components/datatable/filesize-cell.component'; export * from './components/datatable/filesize-cell.component';
export * from './components/datatable/location-cell.component'; export * from './components/datatable/location-cell.component';
export * from './data/data-table.schema';
export * from './directives/loading-template.directive'; export * from './directives/loading-template.directive';
export * from './directives/no-content-template.directive'; export * from './directives/no-content-template.directive';

1
lib/process-services/mock/public-api.ts
View File

@ -23,4 +23,5 @@ export * from './process/process.model.mock';
export * from './task/start-task.mock'; export * from './task/start-task.mock';
export * from './task/task-details.mock'; export * from './task/task-details.mock';
export * from './task/task-details.component.mock'; export * from './task/task-details.component.mock';
export * from './task/task-list.mock';
export * from './task/tasklist-service.mock'; export * from './task/tasklist-service.mock';

97
lib/process-services/mock/task/task-list.mock.ts Normal file
View File

@ -0,0 +1,97 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ObjectDataColumn } from '@alfresco/adf-core';
export let fakeGlobalTask = {
size: 2,
start: 0,
total: 2,
data: [
{
id: 14, name: 'nameFake1',
description: 'descriptionFake1',
category: 'categoryFake1',
assignee: {
id: 2, firstName: 'firstNameFake1', lastName: 'lastNameFake1', email: 'emailFake1'
},
created: '2017-03-01T12:25:17.189+0000',
dueDate: '2017-04-02T12:25:17.189+0000',
endDate: '2017-05-03T12:25:31.129+0000',
duration: 13940,
priority: 50,
parentTaskId: 1,
parentTaskName: 'parentTaskNameFake',
processInstanceId: 2511,
processInstanceName: 'processInstanceNameFake',
processDefinitionId: 'myprocess:1:4',
processDefinitionName: 'processDefinitionNameFake',
processDefinitionDescription: 'processDefinitionDescriptionFake',
processDefinitionKey: 'myprocess',
processDefinitionCategory: 'http://www.activiti.org/processdef',
processDefinitionVersion: 1,
processDefinitionDeploymentId: '1',
formKey: 1,
processInstanceStartUserId: null,
initiatorCanCompleteTask: false,
adhocTaskCanBeReassigned: false,
taskDefinitionKey: 'sid-B6813AF5-8ACD-4481-A4D5-8BAAD1CB1416',
executionId: 2511,
memberOfCandidateGroup: false,
memberOfCandidateUsers: false,
managerOfCandidateGroup: false
},
{
id: 2, name: '', description: 'descriptionFake2', category: null,
assignee: {
id: 1, firstName: 'fistNameFake2', lastName: 'Administrator2', email: 'admin'
},
created: '2017-03-01T12:25:17.189+0000',
dueDate: '2017-04-02T12:25:17.189+0000',
endDate: null
}
]
};
export let fakeCutomSchema =
[
new ObjectDataColumn({
'key': 'fakeName',
'type': 'text',
'title': 'ADF_TASK_LIST.PROPERTIES.FAKE',
'sortable': true
}),
new ObjectDataColumn({
'key': 'fakeTaskName',
'type': 'text',
'title': 'ADF_TASK_LIST.PROPERTIES.TASK_FAKE',
'sortable': true
})
];
export let fakeColumnSchema = {
'default': [
{
'key': 'name',
'type': 'text',
'title': 'ADF_TASK_LIST.PROPERTIES.NAME',
'sortable': true
}
]
, fakeCutomSchema
};

3
lib/process-services/task-list/components/task-list.component.html
View File

@ -2,8 +2,11 @@
<ng-container *ngIf="requestNode"> <ng-container *ngIf="requestNode">
<adf-datatable <adf-datatable
[data]="data" [data]="data"
[rows]="rows"
[columns]="columns"
[sorting]="dataSort" [sorting]="dataSort"
[loading]="isLoading" [loading]="isLoading"
[selectFirstRow]="selectFirstRow"
[multiselect]="multiselect" [multiselect]="multiselect"
[selectionMode]="selectionMode" [selectionMode]="selectionMode"
(row-select)="onRowSelect($event)" (row-select)="onRowSelect($event)"

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

@ -19,106 +19,15 @@ import { Component, SimpleChange, ViewChild, CUSTOM_ELEMENTS_SCHEMA } from '@ang
import { ComponentFixture, TestBed, async } from '@angular/core/testing'; import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { By } from '@angular/platform-browser'; import { By } from '@angular/platform-browser';
import { AppConfigService, setupTestBed, CoreModule } from '@alfresco/adf-core'; import { AppConfigService, setupTestBed, CoreModule } from '@alfresco/adf-core';
import { DataRowEvent, ObjectDataRow, ObjectDataTableAdapter } from '@alfresco/adf-core'; import { DataRowEvent, ObjectDataRow } from '@alfresco/adf-core';
import { TaskListService } from '../services/tasklist.service'; import { TaskListService } from '../services/tasklist.service';
import { TaskListComponent } from './task-list.component'; import { TaskListComponent } from './task-list.component';
import { ProcessTestingModule } from '../../testing/process.testing.module'; import { ProcessTestingModule } from '../../testing/process.testing.module';
import { fakeGlobalTask, fakeCutomSchema } from '../../mock';
declare let jasmine: any; declare let jasmine: any;
describe('TaskListComponent', () => { describe('TaskListComponent', () => {
let fakeGlobalTask = {
size: 2,
start: 0,
total: 2,
data: [
{
id: 14, name: 'nameFake1',
description: 'descriptionFake1',
category: 'categoryFake1',
assignee: {
id: 2, firstName: 'firstNameFake1', lastName: 'lastNameFake1', email: 'emailFake1'
},
created: '2017-03-01T12:25:17.189+0000',
dueDate: '2017-04-02T12:25:17.189+0000',
endDate: '2017-05-03T12:25:31.129+0000',
duration: 13940,
priority: 50,
parentTaskId: 1,
parentTaskName: 'parentTaskNameFake',
processInstanceId: 2511,
processInstanceName: 'processInstanceNameFake',
processDefinitionId: 'myprocess:1:4',
processDefinitionName: 'processDefinitionNameFake',
processDefinitionDescription: 'processDefinitionDescriptionFake',
processDefinitionKey: 'myprocess',
processDefinitionCategory: 'http://www.activiti.org/processdef',
processDefinitionVersion: 1,
processDefinitionDeploymentId: '1',
formKey: 1,
processInstanceStartUserId: null,
initiatorCanCompleteTask: false,
adhocTaskCanBeReassigned: false,
taskDefinitionKey: 'sid-B6813AF5-8ACD-4481-A4D5-8BAAD1CB1416',
executionId: 2511,
memberOfCandidateGroup: false,
memberOfCandidateUsers: false,
managerOfCandidateGroup: false
},
{
id: 2, name: '', description: 'descriptionFake2', category: null,
assignee: {
id: 1, firstName: 'fistNameFake2', lastName: 'Administrator2', email: 'admin'
},
created: '2017-03-01T12:25:17.189+0000',
dueDate: '2017-04-02T12:25:17.189+0000',
endDate: null
}
]
};
let fakeCutomSchema = [
{
'key': 'fakeName',
'type': 'text',
'title': 'ADF_TASK_LIST.PROPERTIES.FAKE',
'sortable': true
},
{
'key': 'fakeTaskName',
'type': 'text',
'title': 'ADF_TASK_LIST.PROPERTIES.TASK_FAKE',
'sortable': true
}
];
let fakeColumnSchema = {
'default': [
{
'key': 'name',
'type': 'text',
'title': 'ADF_TASK_LIST.PROPERTIES.NAME',
'sortable': true
},
{
'key': 'created',
'type': 'text',
'title': 'ADF_TASK_LIST.PROPERTIES.CREATED',
'cssClass': 'hidden',
'sortable': true
},
{
'key': 'assignee',
'type': 'text',
'title': 'ADF_TASK_LIST.PROPERTIES.ASSIGNEE',
'cssClass': 'hidden',
'sortable': true
}
]
, fakeCutomSchema };
let component: TaskListComponent; let component: TaskListComponent;
let fixture: ComponentFixture<TaskListComponent>; let fixture: ComponentFixture<TaskListComponent>;
let appConfig: AppConfigService; let appConfig: AppConfigService;
@ -155,8 +64,7 @@ describe('TaskListComponent', () => {
] ]
} }
} }
} });
);
}); });
@ -170,39 +78,27 @@ describe('TaskListComponent', () => {
it('should use the default schemaColumn as default', () => { it('should use the default schemaColumn as default', () => {
component.ngAfterContentInit(); component.ngAfterContentInit();
expect(component.data.getColumns()).toBeDefined(); expect(component.columns).toBeDefined();
expect(component.data.getColumns().length).toEqual(3); expect(component.columns.length).toEqual(3);
});
it('should use the schemaColumn passed in input', () => {
component.data = new ObjectDataTableAdapter(
[],
[
{type: 'text', key: 'fake-id', title: 'Name'}
]
);
component.ngAfterContentInit();
expect(component.data.getColumns()).toBeDefined();
expect(component.data.getColumns().length).toEqual(1);
}); });
it('should use the custom schemaColumn from app.config.json', () => { it('should use the custom schemaColumn from app.config.json', () => {
component.presetColumn = 'fakeCutomSchema';
component.ngAfterContentInit(); component.ngAfterContentInit();
fixture.detectChanges(); fixture.detectChanges();
expect(component.layoutPresets).toEqual(fakeColumnSchema); expect(component.columns).toEqual(fakeCutomSchema);
}); });
it('should fetch custom schemaColumn when the input presetColumn is defined', () => { it('should fetch custom schemaColumn when the input presetColumn is defined', () => {
component.presetColumn = 'fakeCutomSchema'; component.presetColumn = 'fakeCutomSchema';
fixture.detectChanges(); fixture.detectChanges();
expect(component.data.getColumns()).toBeDefined(); expect(component.columns).toBeDefined();
expect(component.data.getColumns().length).toEqual(2); expect(component.columns.length).toEqual(2);
}); });
it('should return an empty task list when no input parameters are passed', () => { it('should return an empty task list when no input parameters are passed', () => {
component.ngAfterContentInit(); component.ngAfterContentInit();
expect(component.data).toBeDefined(); expect(component.rows).toBeDefined();
expect(component.isListEmpty()).toBeTruthy(); expect(component.isListEmpty()).toBeTruthy();
}); });
@ -213,30 +109,30 @@ describe('TaskListComponent', () => {
component.success.subscribe((res) => { component.success.subscribe((res) => {
expect(res).toBeDefined(); expect(res).toBeDefined();
expect(component.data).toBeDefined(); expect(component.rows).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.rows.length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('nameFake1'); expect(component.rows[0]['name']).toEqual('nameFake1');
expect(component.data.getRows()[0].getValue('description')).toEqual('descriptionFake1'); expect(component.rows[0]['description']).toEqual('descriptionFake1');
expect(component.data.getRows()[0].getValue('category')).toEqual('categoryFake1'); expect(component.rows[0]['category']).toEqual('categoryFake1');
expect(component.data.getRows()[0].getValue('assignee').id).toEqual(2); expect(component.rows[0]['assignee'].id).toEqual(2);
expect(component.data.getRows()[0].getValue('assignee').firstName).toEqual('firstNameFake1'); expect(component.rows[0]['assignee'].firstName).toEqual('firstNameFake1');
expect(component.data.getRows()[0].getValue('assignee').lastName).toEqual('lastNameFake1'); expect(component.rows[0]['assignee'].lastName).toEqual('lastNameFake1');
expect(component.data.getRows()[0].getValue('assignee').email).toEqual('emailFake1'); expect(component.rows[0][('assignee')].email).toEqual('emailFake1');
expect(component.data.getRows()[0].getValue('created')).toEqual('2017-03-01T12:25:17.189+0000'); expect(component.rows[0]['created']).toEqual('2017-03-01T12:25:17.189+0000');
expect(component.data.getRows()[0].getValue('dueDate')).toEqual('2017-04-02T12:25:17.189+0000'); expect(component.rows[0]['dueDate']).toEqual('2017-04-02T12:25:17.189+0000');
expect(component.data.getRows()[0].getValue('endDate')).toEqual('2017-05-03T12:25:31.129+0000'); expect(component.rows[0]['endDate']).toEqual('2017-05-03T12:25:31.129+0000');
expect(component.data.getRows()[0].getValue('duration')).toEqual(13940); expect(component.rows[0]['duration']).toEqual(13940);
expect(component.data.getRows()[0].getValue('priority')).toEqual(50); expect(component.rows[0]['priority']).toEqual(50);
expect(component.data.getRows()[0].getValue('parentTaskId')).toEqual(1); expect(component.rows[0]['parentTaskId']).toEqual(1);
expect(component.data.getRows()[0].getValue('parentTaskName')).toEqual('parentTaskNameFake'); expect(component.rows[0]['parentTaskName']).toEqual('parentTaskNameFake');
expect(component.data.getRows()[0].getValue('processInstanceId')).toEqual(2511); expect(component.rows[0]['processInstanceId']).toEqual(2511);
expect(component.data.getRows()[0].getValue('processInstanceName')).toEqual('processInstanceNameFake'); expect(component.rows[0]['processInstanceName']).toEqual('processInstanceNameFake');
expect(component.data.getRows()[0].getValue('processDefinitionId')).toEqual('myprocess:1:4'); expect(component.rows[0]['processDefinitionId']).toEqual('myprocess:1:4');
expect(component.data.getRows()[0].getValue('processDefinitionName')).toEqual('processDefinitionNameFake'); expect(component.rows[0]['processDefinitionName']).toEqual('processDefinitionNameFake');
expect(component.data.getRows()[0].getValue('processDefinitionDescription')).toEqual('processDefinitionDescriptionFake'); expect(component.rows[0]['processDefinitionDescription']).toEqual('processDefinitionDescriptionFake');
expect(component.data.getRows()[0].getValue('processDefinitionKey')).toEqual('myprocess'); expect(component.rows[0]['processDefinitionKey']).toEqual('myprocess');
expect(component.data.getRows()[0].getValue('processDefinitionCategory')).toEqual('http://www.activiti.org/processdef'); expect(component.rows[0]['processDefinitionCategory']).toEqual('http://www.activiti.org/processdef');
done(); done();
}); });
component.ngAfterContentInit(); component.ngAfterContentInit();
@ -257,10 +153,10 @@ describe('TaskListComponent', () => {
component.success.subscribe((res) => { component.success.subscribe((res) => {
expect(res).toBeDefined(); expect(res).toBeDefined();
expect(component.data).toBeDefined(); expect(component.rows).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.rows.length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('nameFake1'); expect(component.rows[0]['name']).toEqual('nameFake1');
done(); done();
}); });
@ -282,11 +178,11 @@ describe('TaskListComponent', () => {
component.success.subscribe((res) => { component.success.subscribe((res) => {
expect(res).toBeDefined(); expect(res).toBeDefined();
expect(component.data).toBeDefined(); expect(component.rows).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.rows.length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('nameFake1'); expect(component.rows[0]['name']).toEqual('nameFake1');
expect(component.data.getRows()[0].getValue('processInstanceId')).toEqual(2511); expect(component.rows[0]['processInstanceId']).toEqual(2511);
done(); done();
}); });
@ -307,14 +203,14 @@ describe('TaskListComponent', () => {
component.success.subscribe((res) => { component.success.subscribe((res) => {
expect(res).toBeDefined(); expect(res).toBeDefined();
expect(component.data).toBeDefined(); expect(component.rows).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.rows.length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('nameFake1'); expect(component.rows[0]['name']).toEqual('nameFake1');
expect(component.data.getRows()[0].getValue('processInstanceId')).toEqual(2511); expect(component.rows[0]['processInstanceId']).toEqual(2511);
expect(component.data.getRows()[0].getValue('endDate')).toBeDefined(); expect(component.rows[0]['endDate']).toBeDefined();
expect(component.data.getRows()[1].getValue('name')).toEqual('No name'); expect(component.rows[1]['name']).toEqual('No name');
expect(component.data.getRows()[1].getValue('endDate')).toBeNull(); expect(component.rows[1]['endDate']).toBeNull();
done(); done();
}); });
@ -340,24 +236,14 @@ describe('TaskListComponent', () => {
expect(component.dataSort).toEqual(['fakeKey', 'fakeOrder']); expect(component.dataSort).toEqual(['fakeKey', 'fakeOrder']);
}); });
it('should return selected true for the selected task', () => { it('should return selected id for the selected task', () => {
component.data = new ObjectDataTableAdapter( component.rows = [
[
{ id: '999', name: 'Fake-name' }, { id: '999', name: 'Fake-name' },
{ id: '888', name: 'Fake-name-888' } { id: '888', name: 'Fake-name-888' }
], ];
[
{type: 'text', key: 'id', title: 'Id'},
{type: 'text', key: 'name', title: 'Name'}
]
);
component.selectTask('888'); component.selectTask('888');
const dataRow = component.data.getRows(); expect(component.rows).toBeDefined();
expect(dataRow).toBeDefined(); expect(component.currentInstanceId).toEqual('888');
expect(dataRow[0].getValue('id')).toEqual('999');
expect(dataRow[0].isSelected).toEqual(false);
expect(dataRow[1].getValue('id')).toEqual('888');
expect(dataRow[1].isSelected).toEqual(true);
}); });
it('should reload tasks when reload() is called', (done) => { it('should reload tasks when reload() is called', (done) => {
@ -366,10 +252,10 @@ describe('TaskListComponent', () => {
component.ngAfterContentInit(); component.ngAfterContentInit();
component.success.subscribe((res) => { component.success.subscribe((res) => {
expect(res).toBeDefined(); expect(res).toBeDefined();
expect(component.data).toBeDefined(); expect(component.rows).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.rows.length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('nameFake1'); expect(component.rows[0]['name']).toEqual('nameFake1');
done(); done();
}); });
fixture.detectChanges(); fixture.detectChanges();
@ -400,13 +286,7 @@ describe('TaskListComponent', () => {
describe('component changes', () => { describe('component changes', () => {
beforeEach(() => { beforeEach(() => {
component.data = new ObjectDataTableAdapter( component.rows = fakeGlobalTask.data;
[],
[
{type: 'text', key: 'fake-id', title: 'Name'}
]
);
fixture.detectChanges(); fixture.detectChanges();
}); });
@ -414,43 +294,24 @@ describe('TaskListComponent', () => {
spyOn(component, 'reload').and.stub(); spyOn(component, 'reload').and.stub();
component.currentInstanceId = '999'; component.currentInstanceId = '999';
component.data = new ObjectDataTableAdapter( component.rows = [{ id: '999', name: 'Fake-name' }];
[
{id: '999', name: 'Fake-name'}
],
[
{type: 'text', key: 'id', title: 'Id'},
{type: 'text', key: 'name', title: 'Name'}
]
);
const landingTaskId = '999'; const landingTaskId = '999';
let change = new SimpleChange(null, landingTaskId, true); let change = new SimpleChange(null, landingTaskId, true);
component.ngOnChanges({'landingTaskId': change}); component.ngOnChanges({'landingTaskId': change});
expect(component.reload).not.toHaveBeenCalled(); expect(component.reload).not.toHaveBeenCalled();
expect(component.data.getRows().length).toEqual(1); expect(component.rows.length).toEqual(1);
}); });
it('should reload the tasks if the loadingTaskId is different from the current task', (done) => { it('should reload the tasks if the loadingTaskId is different from the current task', (done) => {
component.currentInstanceId = '999'; component.currentInstanceId = '999';
component.rows = [{ id: '999', name: 'Fake-name' }];
component.data = new ObjectDataTableAdapter(
[
{id: '999', name: 'Fake-name'}
],
[
{type: 'text', key: 'id', title: 'Id'},
{type: 'text', key: 'name', title: 'Name'}
]
);
const landingTaskId = '888'; const landingTaskId = '888';
let change = new SimpleChange(null, landingTaskId, true); let change = new SimpleChange(null, landingTaskId, true);
component.success.subscribe((res) => { component.success.subscribe((res) => {
expect(res).toBeDefined(); expect(res).toBeDefined();
expect(component.data).toBeDefined(); expect(component.rows).toBeDefined();
expect(component.data.getRows().length).toEqual(2); expect(component.rows.length).toEqual(2);
done(); done();
}); });
@ -463,9 +324,10 @@ describe('TaskListComponent', () => {
}); });
}); });
it('should NOT reload the process list when no parameters changed', () => { it('should NOT reload the task list when no parameters changed', () => {
expect(component.isListEmpty()).toBeTruthy(); component.rows = null;
component.ngOnChanges({}); component.ngOnChanges({});
fixture.detectChanges();
expect(component.isListEmpty()).toBeTruthy(); expect(component.isListEmpty()).toBeTruthy();
}); });
@ -475,10 +337,10 @@ describe('TaskListComponent', () => {
component.success.subscribe((res) => { component.success.subscribe((res) => {
expect(res).toBeDefined(); expect(res).toBeDefined();
expect(component.data).toBeDefined(); expect(component.rows).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.rows.length).toEqual(2);
expect(component.data.getRows()[1].getValue('name')).toEqual('No name'); expect(component.rows[1]['name']).toEqual('No name');
done(); done();
}); });
component.ngOnChanges({ 'appId': change }); component.ngOnChanges({ 'appId': change });
@ -496,10 +358,10 @@ describe('TaskListComponent', () => {
component.success.subscribe((res) => { component.success.subscribe((res) => {
expect(res).toBeDefined(); expect(res).toBeDefined();
expect(component.data).toBeDefined(); expect(component.rows).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.rows.length).toEqual(2);
expect(component.data.getRows()[1].getValue('name')).toEqual('No name'); expect(component.rows[1]['name']).toEqual('No name');
done(); done();
}); });
@ -518,10 +380,10 @@ describe('TaskListComponent', () => {
component.success.subscribe((res) => { component.success.subscribe((res) => {
expect(res).toBeDefined(); expect(res).toBeDefined();
expect(component.data).toBeDefined(); expect(component.rows).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.rows.length).toEqual(2);
expect(component.data.getRows()[1].getValue('name')).toEqual('No name'); expect(component.rows[1]['name']).toEqual('No name');
done(); done();
}); });
@ -540,10 +402,10 @@ describe('TaskListComponent', () => {
component.success.subscribe((res) => { component.success.subscribe((res) => {
expect(res).toBeDefined(); expect(res).toBeDefined();
expect(component.data).toBeDefined(); expect(component.rows).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.rows.length).toEqual(2);
expect(component.data.getRows()[1].getValue('name')).toEqual('No name'); expect(component.rows[1]['name']).toEqual('No name');
done(); done();
}); });
@ -562,10 +424,10 @@ describe('TaskListComponent', () => {
component.success.subscribe((res) => { component.success.subscribe((res) => {
expect(res).toBeDefined(); expect(res).toBeDefined();
expect(component.data).toBeDefined(); expect(component.rows).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.rows.length).toEqual(2);
expect(component.data.getRows()[1].getValue('name')).toEqual('No name'); expect(component.rows[1]['name']).toEqual('No name');
done(); done();
}); });
@ -584,10 +446,10 @@ describe('TaskListComponent', () => {
component.success.subscribe((res) => { component.success.subscribe((res) => {
expect(res).toBeDefined(); expect(res).toBeDefined();
expect(component.data).toBeDefined(); expect(component.rows).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy(); expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2); expect(component.rows.length).toEqual(2);
expect(component.data.getRows()[1].getValue('name')).toEqual('No name'); expect(component.rows[1]['name']).toEqual('No name');
done(); done();
}); });
@ -645,10 +507,10 @@ describe('CustomTaskListComponent', () => {
it('should fetch custom schemaColumn from html', () => { it('should fetch custom schemaColumn from html', () => {
fixture.detectChanges(); fixture.detectChanges();
expect(component.taskList.data.getColumns()).toBeDefined(); expect(component.taskList.columnList).toBeDefined();
expect(component.taskList.data.getColumns()[0].title).toEqual('ADF_TASK_LIST.PROPERTIES.NAME'); expect(component.taskList.columns[0]['title']).toEqual('ADF_TASK_LIST.PROPERTIES.NAME');
expect(component.taskList.data.getColumns()[2].title).toEqual('ADF_TASK_LIST.PROPERTIES.CREATED'); expect(component.taskList.columns[1]['title']).toEqual('ADF_TASK_LIST.PROPERTIES.CREATED');
expect(component.taskList.data.getColumns().length).toEqual(3); expect(component.taskList.columns.length).toEqual(3);
}); });
}); });

156
lib/process-services/task-list/components/task-list.component.ts
View File

@ -15,10 +15,9 @@
* limitations under the License. * limitations under the License.
*/ */
import { DataColumn, DataRowEvent, DataTableAdapter, ObjectDataColumn, import { DataRowEvent, DataTableAdapter, DataTableSchema, EmptyCustomContentDirective } from '@alfresco/adf-core';
ObjectDataRow, ObjectDataTableAdapter, EmptyCustomContentDirective } from '@alfresco/adf-core';
import { import {
AppConfigService, DataColumnListComponent, PaginationComponent, PaginatedComponent, AppConfigService, PaginationComponent, PaginatedComponent,
UserPreferencesService, UserPreferenceValues, PaginationModel } from '@alfresco/adf-core'; UserPreferencesService, UserPreferenceValues, PaginationModel } from '@alfresco/adf-core';
import { import {
AfterContentInit, Component, ContentChild, EventEmitter, AfterContentInit, Component, ContentChild, EventEmitter,
@ -36,13 +35,14 @@ import { TaskListService } from './../services/tasklist.service';
templateUrl: './task-list.component.html', templateUrl: './task-list.component.html',
styleUrls: ['./task-list.component.css'] styleUrls: ['./task-list.component.css']
}) })
export class TaskListComponent implements OnChanges, AfterContentInit, PaginatedComponent { export class TaskListComponent extends DataTableSchema implements OnChanges, AfterContentInit, PaginatedComponent {
static PRESET_KEY = 'adf-task-list.presets';
@ContentChild(EmptyCustomContentDirective) emptyCustomContent: EmptyCustomContentDirective;
requestNode: TaskQueryRequestRepresentationModel; requestNode: TaskQueryRequestRepresentationModel;
@ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
@ContentChild(EmptyCustomContentDirective) emptyCustomContent: EmptyCustomContentDirective;
/** The id of the app. */ /** The id of the app. */
@Input() @Input()
appId: number; appId: number;
@ -69,7 +69,7 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
@Input() @Input()
assignment: string; assignment: string;
/** Define the sort order of the processes. Possible values are : `created-desc`, /** Define the sort order of the tasks. Possible values are : `created-desc`,
* `created-asc`, `due-desc`, `due-asc` * `created-asc`, `due-desc`, `due-asc`
*/ */
@Input() @Input()
@ -88,6 +88,7 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
/** Data source object that represents the number and the type of the columns that /** Data source object that represents the number and the type of the columns that
* you want to show. * you want to show.
*/ */
/** @deprecated 2.4.0 */
@Input() @Input()
data: DataTableAdapter; data: DataTableAdapter;
@ -98,14 +99,14 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
@Input() @Input()
selectionMode: string = 'single'; // none|single|multiple selectionMode: string = 'single'; // none|single|multiple
/** Custom preset column schema in JSON format. */
@Input()
presetColumn: string;
/** Toggles multiple row selection, renders checkboxes at the beginning of each row */ /** Toggles multiple row selection, renders checkboxes at the beginning of each row */
@Input() @Input()
multiselect: boolean = false; multiselect: boolean = false;
/* Toggles default selection of the first row */
@Input()
selectFirstRow: boolean = true;
/** Emitted when a task in the list is clicked */ /** Emitted when a task in the list is clicked */
@Output() @Output()
rowClick: EventEmitter<string> = new EventEmitter<string>(); rowClick: EventEmitter<string> = new EventEmitter<string>();
@ -124,7 +125,6 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
currentInstanceId: string; currentInstanceId: string;
selectedInstances: any[]; selectedInstances: any[];
layoutPresets = {};
pagination: BehaviorSubject<PaginationModel>; pagination: BehaviorSubject<PaginationModel>;
/** The page number of the tasks to fetch. */ /** The page number of the tasks to fetch. */
@ -135,6 +135,7 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
@Input() @Input()
size: number = PaginationComponent.DEFAULT_PAGINATION.maxItems; size: number = PaginationComponent.DEFAULT_PAGINATION.maxItems;
rows: any[] = [];
isLoading: boolean = true; isLoading: boolean = true;
sorting: any[] = ['created', 'desc']; sorting: any[] = ['created', 'desc'];
@ -148,9 +149,9 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
hasCustomDataSource: boolean = false; hasCustomDataSource: boolean = false;
constructor(private taskListService: TaskListService, constructor(private taskListService: TaskListService,
private appConfig: AppConfigService, appConfigService: AppConfigService,
private userPreferences: UserPreferencesService) { private userPreferences: UserPreferencesService) {
super(appConfigService, TaskListComponent.PRESET_KEY, taskPresetsDefaultModel);
this.userPreferences.select(UserPreferenceValues.PaginationSize).subscribe((pageSize) => { this.userPreferences.select(UserPreferenceValues.PaginationSize).subscribe((pageSize) => {
this.size = pageSize; this.size = pageSize;
}); });
@ -163,23 +164,20 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
} }
ngAfterContentInit() { ngAfterContentInit() {
this.loadLayoutPresets(); this.createDatatableSchema();
this.setupSchema(); if (this.data && this.data.getColumns().length === 0) {
this.data.setColumns(this.columns);
}
if (this.appId) { if (this.appId) {
this.reload(); this.reload();
} }
} }
/** setCustomDataSource(rows: any[]): void {
* Setup html-based (html definitions) or code behind (data adapter) schema. if (rows) {
* If component is assigned with an empty data adater the default schema settings applied. this.rows = rows;
*/ this.hasCustomDataSource = true;
setupSchema(): void {
let schema = this.getSchema();
if (!this.data) {
this.data = new ObjectDataTableAdapter([], schema);
} else if (this.data.getColumns().length === 0) {
this.data.setColumns(schema);
} }
} }
@ -189,13 +187,6 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
} }
} }
setCustomDataSource(rows: ObjectDataRow[]): void {
if (this.data) {
this.data.setRows(rows);
this.hasCustomDataSource = true;
}
}
private isPropertyChanged(changes: SimpleChanges): boolean { private isPropertyChanged(changes: SimpleChanges): boolean {
let changed: boolean = true; let changed: boolean = true;
@ -217,6 +208,8 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
if (!this.hasCustomDataSource) { if (!this.hasCustomDataSource) {
this.requestNode = this.createRequestNode(); this.requestNode = this.createRequestNode();
this.load(this.requestNode); this.load(this.requestNode);
} else {
this.isLoading = false;
} }
} }
@ -224,8 +217,7 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
this.isLoading = true; this.isLoading = true;
this.loadTasksByState().subscribe( this.loadTasksByState().subscribe(
(tasks) => { (tasks) => {
let instancesRow = this.createDataRow(tasks.data); this.rows = this.optimizeNames(tasks.data);
this.renderInstances(instancesRow);
this.selectTask(this.landingTaskId); this.selectTask(this.landingTaskId);
this.success.emit(tasks); this.success.emit(tasks);
this.isLoading = false; this.isLoading = false;
@ -247,57 +239,25 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
: this.taskListService.findTasksByState(this.requestNode); : this.taskListService.findTasksByState(this.requestNode);
} }
/**
* Create an array of ObjectDataRow
* @param instances
*/
private createDataRow(instances: any[]): ObjectDataRow[] {
let instancesRows: ObjectDataRow[] = [];
instances.forEach((row) => {
instancesRows.push(new ObjectDataRow(row));
});
return instancesRows;
}
/**
* Render the instances list
*
* @param instances
*/
private renderInstances(instances: any[]) {
instances = this.optimizeNames(instances);
this.data.setRows(instances);
}
/** /**
* Select the task given in input if present * Select the task given in input if present
*/ */
selectTask(taskIdSelected: string): void { selectTask(taskIdSelected: string): void {
if (!this.isListEmpty()) { if (!this.isListEmpty()) {
let rows = this.data.getRows();
if (rows.length > 0) {
let dataRow; let dataRow;
if (taskIdSelected) { if (taskIdSelected) {
dataRow = rows.find((currentRow: any) => { dataRow = this.rows.find((currentRow: any) => {
return currentRow.getValue('id') === taskIdSelected; return currentRow['id'] === taskIdSelected;
}); });
if (!dataRow) { if (!dataRow) {
dataRow = rows[0]; dataRow = this.rows[0];
} }
} else { } else {
dataRow = rows[0]; dataRow = this.rows[0];
}
this.data.selectedRow = dataRow;
dataRow.isSelected = true;
this.currentInstanceId = dataRow.getValue('id');
} }
this.rows[0] = dataRow;
this.currentInstanceId = dataRow['id'];
} else { } else {
if (this.data) {
this.data.selectedRow = null;
}
this.currentInstanceId = null; this.currentInstanceId = null;
} }
} }
@ -329,8 +289,7 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
* Check if the list is empty * Check if the list is empty
*/ */
isListEmpty(): boolean { isListEmpty(): boolean {
return this.data === undefined || return !this.rows || this.rows.length === 0;
(this.data && this.data.getRows() && this.data.getRows().length === 0);
} }
onRowClick(item: DataRowEvent) { onRowClick(item: DataRowEvent) {
@ -360,12 +319,14 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
* Optimize name field * Optimize name field
* @param istances * @param istances
*/ */
private optimizeNames(istances: any[]): any[] { private optimizeNames(instances: any[]): any[] {
istances = istances.map(t => { instances = instances.map(t => {
t.obj.name = t.obj.name || 'No name'; if (!t.name) {
t.name = 'No name';
}
return t; return t;
}); });
return istances; return instances;
} }
private createRequestNode() { private createRequestNode() {
@ -386,41 +347,6 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
return new TaskQueryRequestRepresentationModel(requestNode); return new TaskQueryRequestRepresentationModel(requestNode);
} }
private loadLayoutPresets(): void {
const externalSettings = this.appConfig.get('adf-task-list.presets', null);
if (externalSettings) {
this.layoutPresets = Object.assign({}, taskPresetsDefaultModel, externalSettings);
} else {
this.layoutPresets = taskPresetsDefaultModel;
}
}
getSchema(): any {
let customSchemaColumns = [];
customSchemaColumns = this.getSchemaFromConfig(this.presetColumn).concat(this.getSchemaFromHtml());
if (customSchemaColumns.length === 0) {
customSchemaColumns = this.getDefaultLayoutPreset();
}
return customSchemaColumns;
}
getSchemaFromHtml(): any {
let schema = [];
if (this.columnList && this.columnList.columns && this.columnList.columns.length > 0) {
schema = this.columnList.columns.map(c => <DataColumn> c);
}
return schema;
}
private getSchemaFromConfig(name: string): DataColumn[] {
return name ? (this.layoutPresets[name]).map(col => new ObjectDataColumn(col)) : [];
}
private getDefaultLayoutPreset(): DataColumn[] {
return (this.layoutPresets['default']).map(col => new ObjectDataColumn(col));
}
updatePagination(params: PaginationModel) { updatePagination(params: PaginationModel) {
const needsReload = params.maxItems || params.skipCount; const needsReload = params.maxItems || params.skipCount;
this.size = params.maxItems; this.size = params.maxItems;