mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
[ADF-3039] Task List - Enanchement (#3404)
* * 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:
parent
2f12f518ef
commit
d4f57b8786
@ -54,7 +54,6 @@ import {
|
||||
} from '@alfresco/adf-process-services';
|
||||
import { LogService } from '@alfresco/adf-core';
|
||||
import { AlfrescoApiService, UserPreferencesService } 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';
|
||||
@ -164,7 +163,6 @@ export class ProcessServiceComponent implements AfterViewInit, OnDestroy, OnInit
|
||||
private location: Location,
|
||||
private preferenceService: UserPreferencesService) {
|
||||
|
||||
|
||||
this.defaultProcessName = this.appConfig.get<string>('adf-start-process.name');
|
||||
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;
|
||||
|
||||
const taskId = event.value.id;
|
||||
const processTaskDataRow = new ObjectDataRow({
|
||||
const processTaskDataRow: any = {
|
||||
id: taskId,
|
||||
name: event.value.name || 'No name',
|
||||
created: event.value.created
|
||||
});
|
||||
};
|
||||
this.activitifilter.selectFilter(null);
|
||||
if (this.taskList) {
|
||||
this.taskList.setCustomDataSource([processTaskDataRow]);
|
||||
|
@ -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
|
||||
<adf-datatable [data]="data">
|
||||
@ -94,37 +159,96 @@ You can also use HTML-based schema declaration like shown below:
|
||||
</adf-datatable>
|
||||
```
|
||||
|
||||
You can also set rows to the ObjectDataTableAdapter and set columns as an input like shown below :
|
||||
|
||||
```ts
|
||||
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
|
||||
|
||||
@Component({...})
|
||||
export class DataTableDemo {
|
||||
data: ObjectDataTableAdapter;
|
||||
schema: any;
|
||||
|
||||
constructor() {
|
||||
this.data = new ObjectDataTableAdapter(
|
||||
// data
|
||||
[
|
||||
{id: 1, name: 'Name 1'},
|
||||
{id: 2, name: 'Name 2'}
|
||||
],
|
||||
[]
|
||||
);
|
||||
// columns
|
||||
this.schema =
|
||||
[
|
||||
{
|
||||
id: 1,
|
||||
name: 'Name 1',
|
||||
createdBy : { name: 'user'},
|
||||
createdOn: 123,
|
||||
icon: 'http://example.com/img.png'
|
||||
type: 'text',
|
||||
key: 'id',
|
||||
title: 'Id',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Name 2',
|
||||
createdBy : { name: 'user 2'},
|
||||
createdOn: 123,
|
||||
icon: 'http://example.com/img.png'
|
||||
type: 'text',
|
||||
key: 'name',
|
||||
title: 'Name',
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
);
|
||||
];
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```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
|
||||
|
||||
### Properties
|
||||
@ -134,6 +258,7 @@ export class DataTableDemo {
|
||||
| actions | `boolean` | false | Toggles the data actions column. |
|
||||
| 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). |
|
||||
| columns | `any[]` | `[]` | The columns that the datatable will show. |
|
||||
| contextMenu | `boolean` | false | Toggles custom context menu for the component. |
|
||||
| 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". |
|
||||
@ -145,8 +270,8 @@ export class DataTableDemo {
|
||||
| rowStyleClass | `string` | "" | The CSS class to apply to every row. |
|
||||
| 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. |
|
||||
| selectFirstRow | `boolean` | `true` | Toggles the first row selection. |
|
||||
| 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
|
||||
|
||||
|
@ -44,7 +44,7 @@ Renders a list containing all the tasks matched by the parameters specified.
|
||||
| -- | -- | -- | -- |
|
||||
| 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). |
|
||||
| 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. |
|
||||
| multiselect | `boolean` | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
|
||||
| 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. |
|
||||
| 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. |
|
||||
| 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`. |
|
||||
|
||||
### Events
|
||||
@ -73,41 +73,7 @@ renders details of any chosen instance.
|
||||
|
||||
### Setting the column schema
|
||||
|
||||
You can pass a [DataTableAdapter instance](../core/datatable-adapter.interface.md)
|
||||
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:
|
||||
You can use an HTML-based schema declaration to set a column schema for the tasklist as shown below :
|
||||
|
||||
```html
|
||||
<adf-tasklist ...>
|
||||
|
@ -287,6 +287,43 @@ describe('DataTable', () => {
|
||||
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) => {
|
||||
dataTable.selectionMode = 'single';
|
||||
dataTable.data = new ObjectDataTableAdapter(
|
||||
|
@ -71,6 +71,14 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
|
||||
@Input()
|
||||
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,
|
||||
* 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 click$: Observable<DataRowEvent>;
|
||||
|
||||
private schema: DataColumn[] = [];
|
||||
|
||||
private differ: any;
|
||||
private rowMenuCache: object = {};
|
||||
|
||||
@ -293,7 +299,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
|
||||
}
|
||||
|
||||
private initTable() {
|
||||
this.data = new ObjectDataTableAdapter(this.rows, this.schema);
|
||||
this.data = new ObjectDataTableAdapter(this.rows, this.columns);
|
||||
this.setupData(this.data);
|
||||
this.rowMenuCache = {};
|
||||
}
|
||||
@ -323,16 +329,32 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck,
|
||||
this.resetSelection();
|
||||
}
|
||||
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() {
|
||||
if (this.columnList && this.columnList.columns) {
|
||||
this.schema = this.columnList.columns.map(c => <DataColumn> c);
|
||||
let schema = [];
|
||||
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.data.setColumns(this.schema);
|
||||
this.columns = 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) {
|
||||
if (e) {
|
||||
e.preventDefault();
|
||||
|
80
lib/core/datatable/data/data-table.schema.ts
Normal file
80
lib/core/datatable/data/data-table.schema.ts
Normal 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));
|
||||
}
|
||||
}
|
@ -35,6 +35,7 @@ export * from './components/datatable/date-cell.component';
|
||||
export * from './components/datatable/empty-list.component';
|
||||
export * from './components/datatable/filesize-cell.component';
|
||||
export * from './components/datatable/location-cell.component';
|
||||
export * from './data/data-table.schema';
|
||||
|
||||
export * from './directives/loading-template.directive';
|
||||
export * from './directives/no-content-template.directive';
|
||||
|
@ -23,4 +23,5 @@ export * from './process/process.model.mock';
|
||||
export * from './task/start-task.mock';
|
||||
export * from './task/task-details.mock';
|
||||
export * from './task/task-details.component.mock';
|
||||
export * from './task/task-list.mock';
|
||||
export * from './task/tasklist-service.mock';
|
||||
|
97
lib/process-services/mock/task/task-list.mock.ts
Normal file
97
lib/process-services/mock/task/task-list.mock.ts
Normal 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
|
||||
};
|
@ -2,8 +2,11 @@
|
||||
<ng-container *ngIf="requestNode">
|
||||
<adf-datatable
|
||||
[data]="data"
|
||||
[rows]="rows"
|
||||
[columns]="columns"
|
||||
[sorting]="dataSort"
|
||||
[loading]="isLoading"
|
||||
[selectFirstRow]="selectFirstRow"
|
||||
[multiselect]="multiselect"
|
||||
[selectionMode]="selectionMode"
|
||||
(row-select)="onRowSelect($event)"
|
||||
|
@ -19,106 +19,15 @@ import { Component, SimpleChange, ViewChild, CUSTOM_ELEMENTS_SCHEMA } from '@ang
|
||||
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
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 { TaskListComponent } from './task-list.component';
|
||||
import { ProcessTestingModule } from '../../testing/process.testing.module';
|
||||
import { fakeGlobalTask, fakeCutomSchema } from '../../mock';
|
||||
|
||||
declare let jasmine: any;
|
||||
|
||||
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 fixture: ComponentFixture<TaskListComponent>;
|
||||
let appConfig: AppConfigService;
|
||||
@ -155,8 +64,7 @@ describe('TaskListComponent', () => {
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@ -170,39 +78,27 @@ describe('TaskListComponent', () => {
|
||||
|
||||
it('should use the default schemaColumn as default', () => {
|
||||
component.ngAfterContentInit();
|
||||
expect(component.data.getColumns()).toBeDefined();
|
||||
expect(component.data.getColumns().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);
|
||||
expect(component.columns).toBeDefined();
|
||||
expect(component.columns.length).toEqual(3);
|
||||
});
|
||||
|
||||
it('should use the custom schemaColumn from app.config.json', () => {
|
||||
component.presetColumn = 'fakeCutomSchema';
|
||||
component.ngAfterContentInit();
|
||||
fixture.detectChanges();
|
||||
expect(component.layoutPresets).toEqual(fakeColumnSchema);
|
||||
expect(component.columns).toEqual(fakeCutomSchema);
|
||||
});
|
||||
|
||||
it('should fetch custom schemaColumn when the input presetColumn is defined', () => {
|
||||
component.presetColumn = 'fakeCutomSchema';
|
||||
fixture.detectChanges();
|
||||
expect(component.data.getColumns()).toBeDefined();
|
||||
expect(component.data.getColumns().length).toEqual(2);
|
||||
expect(component.columns).toBeDefined();
|
||||
expect(component.columns.length).toEqual(2);
|
||||
});
|
||||
|
||||
it('should return an empty task list when no input parameters are passed', () => {
|
||||
component.ngAfterContentInit();
|
||||
expect(component.data).toBeDefined();
|
||||
expect(component.rows).toBeDefined();
|
||||
expect(component.isListEmpty()).toBeTruthy();
|
||||
});
|
||||
|
||||
@ -213,30 +109,30 @@ describe('TaskListComponent', () => {
|
||||
|
||||
component.success.subscribe((res) => {
|
||||
expect(res).toBeDefined();
|
||||
expect(component.data).toBeDefined();
|
||||
expect(component.rows).toBeDefined();
|
||||
expect(component.isListEmpty()).not.toBeTruthy();
|
||||
expect(component.data.getRows().length).toEqual(2);
|
||||
expect(component.data.getRows()[0].getValue('name')).toEqual('nameFake1');
|
||||
expect(component.data.getRows()[0].getValue('description')).toEqual('descriptionFake1');
|
||||
expect(component.data.getRows()[0].getValue('category')).toEqual('categoryFake1');
|
||||
expect(component.data.getRows()[0].getValue('assignee').id).toEqual(2);
|
||||
expect(component.data.getRows()[0].getValue('assignee').firstName).toEqual('firstNameFake1');
|
||||
expect(component.data.getRows()[0].getValue('assignee').lastName).toEqual('lastNameFake1');
|
||||
expect(component.data.getRows()[0].getValue('assignee').email).toEqual('emailFake1');
|
||||
expect(component.data.getRows()[0].getValue('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.data.getRows()[0].getValue('endDate')).toEqual('2017-05-03T12:25:31.129+0000');
|
||||
expect(component.data.getRows()[0].getValue('duration')).toEqual(13940);
|
||||
expect(component.data.getRows()[0].getValue('priority')).toEqual(50);
|
||||
expect(component.data.getRows()[0].getValue('parentTaskId')).toEqual(1);
|
||||
expect(component.data.getRows()[0].getValue('parentTaskName')).toEqual('parentTaskNameFake');
|
||||
expect(component.data.getRows()[0].getValue('processInstanceId')).toEqual(2511);
|
||||
expect(component.data.getRows()[0].getValue('processInstanceName')).toEqual('processInstanceNameFake');
|
||||
expect(component.data.getRows()[0].getValue('processDefinitionId')).toEqual('myprocess:1:4');
|
||||
expect(component.data.getRows()[0].getValue('processDefinitionName')).toEqual('processDefinitionNameFake');
|
||||
expect(component.data.getRows()[0].getValue('processDefinitionDescription')).toEqual('processDefinitionDescriptionFake');
|
||||
expect(component.data.getRows()[0].getValue('processDefinitionKey')).toEqual('myprocess');
|
||||
expect(component.data.getRows()[0].getValue('processDefinitionCategory')).toEqual('http://www.activiti.org/processdef');
|
||||
expect(component.rows.length).toEqual(2);
|
||||
expect(component.rows[0]['name']).toEqual('nameFake1');
|
||||
expect(component.rows[0]['description']).toEqual('descriptionFake1');
|
||||
expect(component.rows[0]['category']).toEqual('categoryFake1');
|
||||
expect(component.rows[0]['assignee'].id).toEqual(2);
|
||||
expect(component.rows[0]['assignee'].firstName).toEqual('firstNameFake1');
|
||||
expect(component.rows[0]['assignee'].lastName).toEqual('lastNameFake1');
|
||||
expect(component.rows[0][('assignee')].email).toEqual('emailFake1');
|
||||
expect(component.rows[0]['created']).toEqual('2017-03-01T12:25:17.189+0000');
|
||||
expect(component.rows[0]['dueDate']).toEqual('2017-04-02T12:25:17.189+0000');
|
||||
expect(component.rows[0]['endDate']).toEqual('2017-05-03T12:25:31.129+0000');
|
||||
expect(component.rows[0]['duration']).toEqual(13940);
|
||||
expect(component.rows[0]['priority']).toEqual(50);
|
||||
expect(component.rows[0]['parentTaskId']).toEqual(1);
|
||||
expect(component.rows[0]['parentTaskName']).toEqual('parentTaskNameFake');
|
||||
expect(component.rows[0]['processInstanceId']).toEqual(2511);
|
||||
expect(component.rows[0]['processInstanceName']).toEqual('processInstanceNameFake');
|
||||
expect(component.rows[0]['processDefinitionId']).toEqual('myprocess:1:4');
|
||||
expect(component.rows[0]['processDefinitionName']).toEqual('processDefinitionNameFake');
|
||||
expect(component.rows[0]['processDefinitionDescription']).toEqual('processDefinitionDescriptionFake');
|
||||
expect(component.rows[0]['processDefinitionKey']).toEqual('myprocess');
|
||||
expect(component.rows[0]['processDefinitionCategory']).toEqual('http://www.activiti.org/processdef');
|
||||
done();
|
||||
});
|
||||
component.ngAfterContentInit();
|
||||
@ -257,10 +153,10 @@ describe('TaskListComponent', () => {
|
||||
|
||||
component.success.subscribe((res) => {
|
||||
expect(res).toBeDefined();
|
||||
expect(component.data).toBeDefined();
|
||||
expect(component.rows).toBeDefined();
|
||||
expect(component.isListEmpty()).not.toBeTruthy();
|
||||
expect(component.data.getRows().length).toEqual(2);
|
||||
expect(component.data.getRows()[0].getValue('name')).toEqual('nameFake1');
|
||||
expect(component.rows.length).toEqual(2);
|
||||
expect(component.rows[0]['name']).toEqual('nameFake1');
|
||||
done();
|
||||
});
|
||||
|
||||
@ -282,11 +178,11 @@ describe('TaskListComponent', () => {
|
||||
|
||||
component.success.subscribe((res) => {
|
||||
expect(res).toBeDefined();
|
||||
expect(component.data).toBeDefined();
|
||||
expect(component.rows).toBeDefined();
|
||||
expect(component.isListEmpty()).not.toBeTruthy();
|
||||
expect(component.data.getRows().length).toEqual(2);
|
||||
expect(component.data.getRows()[0].getValue('name')).toEqual('nameFake1');
|
||||
expect(component.data.getRows()[0].getValue('processInstanceId')).toEqual(2511);
|
||||
expect(component.rows.length).toEqual(2);
|
||||
expect(component.rows[0]['name']).toEqual('nameFake1');
|
||||
expect(component.rows[0]['processInstanceId']).toEqual(2511);
|
||||
done();
|
||||
});
|
||||
|
||||
@ -307,14 +203,14 @@ describe('TaskListComponent', () => {
|
||||
|
||||
component.success.subscribe((res) => {
|
||||
expect(res).toBeDefined();
|
||||
expect(component.data).toBeDefined();
|
||||
expect(component.rows).toBeDefined();
|
||||
expect(component.isListEmpty()).not.toBeTruthy();
|
||||
expect(component.data.getRows().length).toEqual(2);
|
||||
expect(component.data.getRows()[0].getValue('name')).toEqual('nameFake1');
|
||||
expect(component.data.getRows()[0].getValue('processInstanceId')).toEqual(2511);
|
||||
expect(component.data.getRows()[0].getValue('endDate')).toBeDefined();
|
||||
expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
|
||||
expect(component.data.getRows()[1].getValue('endDate')).toBeNull();
|
||||
expect(component.rows.length).toEqual(2);
|
||||
expect(component.rows[0]['name']).toEqual('nameFake1');
|
||||
expect(component.rows[0]['processInstanceId']).toEqual(2511);
|
||||
expect(component.rows[0]['endDate']).toBeDefined();
|
||||
expect(component.rows[1]['name']).toEqual('No name');
|
||||
expect(component.rows[1]['endDate']).toBeNull();
|
||||
done();
|
||||
});
|
||||
|
||||
@ -340,24 +236,14 @@ describe('TaskListComponent', () => {
|
||||
expect(component.dataSort).toEqual(['fakeKey', 'fakeOrder']);
|
||||
});
|
||||
|
||||
it('should return selected true for the selected task', () => {
|
||||
component.data = new ObjectDataTableAdapter(
|
||||
[
|
||||
it('should return selected id for the selected task', () => {
|
||||
component.rows = [
|
||||
{ id: '999', name: 'Fake-name' },
|
||||
{ id: '888', name: 'Fake-name-888' }
|
||||
],
|
||||
[
|
||||
{type: 'text', key: 'id', title: 'Id'},
|
||||
{type: 'text', key: 'name', title: 'Name'}
|
||||
]
|
||||
);
|
||||
];
|
||||
component.selectTask('888');
|
||||
const dataRow = component.data.getRows();
|
||||
expect(dataRow).toBeDefined();
|
||||
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);
|
||||
expect(component.rows).toBeDefined();
|
||||
expect(component.currentInstanceId).toEqual('888');
|
||||
});
|
||||
|
||||
it('should reload tasks when reload() is called', (done) => {
|
||||
@ -366,10 +252,10 @@ describe('TaskListComponent', () => {
|
||||
component.ngAfterContentInit();
|
||||
component.success.subscribe((res) => {
|
||||
expect(res).toBeDefined();
|
||||
expect(component.data).toBeDefined();
|
||||
expect(component.rows).toBeDefined();
|
||||
expect(component.isListEmpty()).not.toBeTruthy();
|
||||
expect(component.data.getRows().length).toEqual(2);
|
||||
expect(component.data.getRows()[0].getValue('name')).toEqual('nameFake1');
|
||||
expect(component.rows.length).toEqual(2);
|
||||
expect(component.rows[0]['name']).toEqual('nameFake1');
|
||||
done();
|
||||
});
|
||||
fixture.detectChanges();
|
||||
@ -400,13 +286,7 @@ describe('TaskListComponent', () => {
|
||||
describe('component changes', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
component.data = new ObjectDataTableAdapter(
|
||||
[],
|
||||
[
|
||||
{type: 'text', key: 'fake-id', title: 'Name'}
|
||||
]
|
||||
);
|
||||
|
||||
component.rows = fakeGlobalTask.data;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
@ -414,43 +294,24 @@ describe('TaskListComponent', () => {
|
||||
spyOn(component, 'reload').and.stub();
|
||||
component.currentInstanceId = '999';
|
||||
|
||||
component.data = new ObjectDataTableAdapter(
|
||||
[
|
||||
{id: '999', name: 'Fake-name'}
|
||||
],
|
||||
[
|
||||
{type: 'text', key: 'id', title: 'Id'},
|
||||
{type: 'text', key: 'name', title: 'Name'}
|
||||
]
|
||||
);
|
||||
|
||||
component.rows = [{ id: '999', name: 'Fake-name' }];
|
||||
const landingTaskId = '999';
|
||||
let change = new SimpleChange(null, landingTaskId, true);
|
||||
component.ngOnChanges({'landingTaskId': change});
|
||||
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) => {
|
||||
component.currentInstanceId = '999';
|
||||
|
||||
component.data = new ObjectDataTableAdapter(
|
||||
[
|
||||
{id: '999', name: 'Fake-name'}
|
||||
],
|
||||
[
|
||||
{type: 'text', key: 'id', title: 'Id'},
|
||||
{type: 'text', key: 'name', title: 'Name'}
|
||||
]
|
||||
);
|
||||
|
||||
component.rows = [{ id: '999', name: 'Fake-name' }];
|
||||
const landingTaskId = '888';
|
||||
let change = new SimpleChange(null, landingTaskId, true);
|
||||
|
||||
component.success.subscribe((res) => {
|
||||
expect(res).toBeDefined();
|
||||
expect(component.data).toBeDefined();
|
||||
expect(component.data.getRows().length).toEqual(2);
|
||||
expect(component.rows).toBeDefined();
|
||||
expect(component.rows.length).toEqual(2);
|
||||
done();
|
||||
});
|
||||
|
||||
@ -463,9 +324,10 @@ describe('TaskListComponent', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('should NOT reload the process list when no parameters changed', () => {
|
||||
expect(component.isListEmpty()).toBeTruthy();
|
||||
it('should NOT reload the task list when no parameters changed', () => {
|
||||
component.rows = null;
|
||||
component.ngOnChanges({});
|
||||
fixture.detectChanges();
|
||||
expect(component.isListEmpty()).toBeTruthy();
|
||||
});
|
||||
|
||||
@ -475,10 +337,10 @@ describe('TaskListComponent', () => {
|
||||
|
||||
component.success.subscribe((res) => {
|
||||
expect(res).toBeDefined();
|
||||
expect(component.data).toBeDefined();
|
||||
expect(component.rows).toBeDefined();
|
||||
expect(component.isListEmpty()).not.toBeTruthy();
|
||||
expect(component.data.getRows().length).toEqual(2);
|
||||
expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
|
||||
expect(component.rows.length).toEqual(2);
|
||||
expect(component.rows[1]['name']).toEqual('No name');
|
||||
done();
|
||||
});
|
||||
component.ngOnChanges({ 'appId': change });
|
||||
@ -496,10 +358,10 @@ describe('TaskListComponent', () => {
|
||||
|
||||
component.success.subscribe((res) => {
|
||||
expect(res).toBeDefined();
|
||||
expect(component.data).toBeDefined();
|
||||
expect(component.rows).toBeDefined();
|
||||
expect(component.isListEmpty()).not.toBeTruthy();
|
||||
expect(component.data.getRows().length).toEqual(2);
|
||||
expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
|
||||
expect(component.rows.length).toEqual(2);
|
||||
expect(component.rows[1]['name']).toEqual('No name');
|
||||
done();
|
||||
});
|
||||
|
||||
@ -518,10 +380,10 @@ describe('TaskListComponent', () => {
|
||||
|
||||
component.success.subscribe((res) => {
|
||||
expect(res).toBeDefined();
|
||||
expect(component.data).toBeDefined();
|
||||
expect(component.rows).toBeDefined();
|
||||
expect(component.isListEmpty()).not.toBeTruthy();
|
||||
expect(component.data.getRows().length).toEqual(2);
|
||||
expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
|
||||
expect(component.rows.length).toEqual(2);
|
||||
expect(component.rows[1]['name']).toEqual('No name');
|
||||
done();
|
||||
});
|
||||
|
||||
@ -540,10 +402,10 @@ describe('TaskListComponent', () => {
|
||||
|
||||
component.success.subscribe((res) => {
|
||||
expect(res).toBeDefined();
|
||||
expect(component.data).toBeDefined();
|
||||
expect(component.rows).toBeDefined();
|
||||
expect(component.isListEmpty()).not.toBeTruthy();
|
||||
expect(component.data.getRows().length).toEqual(2);
|
||||
expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
|
||||
expect(component.rows.length).toEqual(2);
|
||||
expect(component.rows[1]['name']).toEqual('No name');
|
||||
done();
|
||||
});
|
||||
|
||||
@ -562,10 +424,10 @@ describe('TaskListComponent', () => {
|
||||
|
||||
component.success.subscribe((res) => {
|
||||
expect(res).toBeDefined();
|
||||
expect(component.data).toBeDefined();
|
||||
expect(component.rows).toBeDefined();
|
||||
expect(component.isListEmpty()).not.toBeTruthy();
|
||||
expect(component.data.getRows().length).toEqual(2);
|
||||
expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
|
||||
expect(component.rows.length).toEqual(2);
|
||||
expect(component.rows[1]['name']).toEqual('No name');
|
||||
done();
|
||||
});
|
||||
|
||||
@ -584,10 +446,10 @@ describe('TaskListComponent', () => {
|
||||
|
||||
component.success.subscribe((res) => {
|
||||
expect(res).toBeDefined();
|
||||
expect(component.data).toBeDefined();
|
||||
expect(component.rows).toBeDefined();
|
||||
expect(component.isListEmpty()).not.toBeTruthy();
|
||||
expect(component.data.getRows().length).toEqual(2);
|
||||
expect(component.data.getRows()[1].getValue('name')).toEqual('No name');
|
||||
expect(component.rows.length).toEqual(2);
|
||||
expect(component.rows[1]['name']).toEqual('No name');
|
||||
done();
|
||||
});
|
||||
|
||||
@ -645,10 +507,10 @@ describe('CustomTaskListComponent', () => {
|
||||
|
||||
it('should fetch custom schemaColumn from html', () => {
|
||||
fixture.detectChanges();
|
||||
expect(component.taskList.data.getColumns()).toBeDefined();
|
||||
expect(component.taskList.data.getColumns()[0].title).toEqual('ADF_TASK_LIST.PROPERTIES.NAME');
|
||||
expect(component.taskList.data.getColumns()[2].title).toEqual('ADF_TASK_LIST.PROPERTIES.CREATED');
|
||||
expect(component.taskList.data.getColumns().length).toEqual(3);
|
||||
expect(component.taskList.columnList).toBeDefined();
|
||||
expect(component.taskList.columns[0]['title']).toEqual('ADF_TASK_LIST.PROPERTIES.NAME');
|
||||
expect(component.taskList.columns[1]['title']).toEqual('ADF_TASK_LIST.PROPERTIES.CREATED');
|
||||
expect(component.taskList.columns.length).toEqual(3);
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -15,10 +15,9 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { DataColumn, DataRowEvent, DataTableAdapter, ObjectDataColumn,
|
||||
ObjectDataRow, ObjectDataTableAdapter, EmptyCustomContentDirective } from '@alfresco/adf-core';
|
||||
import { DataRowEvent, DataTableAdapter, DataTableSchema, EmptyCustomContentDirective } from '@alfresco/adf-core';
|
||||
import {
|
||||
AppConfigService, DataColumnListComponent, PaginationComponent, PaginatedComponent,
|
||||
AppConfigService, PaginationComponent, PaginatedComponent,
|
||||
UserPreferencesService, UserPreferenceValues, PaginationModel } from '@alfresco/adf-core';
|
||||
import {
|
||||
AfterContentInit, Component, ContentChild, EventEmitter,
|
||||
@ -36,13 +35,14 @@ import { TaskListService } from './../services/tasklist.service';
|
||||
templateUrl: './task-list.component.html',
|
||||
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;
|
||||
|
||||
@ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
|
||||
@ContentChild(EmptyCustomContentDirective) emptyCustomContent: EmptyCustomContentDirective;
|
||||
|
||||
/** The id of the app. */
|
||||
@Input()
|
||||
appId: number;
|
||||
@ -69,7 +69,7 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
|
||||
@Input()
|
||||
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`
|
||||
*/
|
||||
@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
|
||||
* you want to show.
|
||||
*/
|
||||
/** @deprecated 2.4.0 */
|
||||
@Input()
|
||||
data: DataTableAdapter;
|
||||
|
||||
@ -98,14 +99,14 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
|
||||
@Input()
|
||||
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 */
|
||||
@Input()
|
||||
multiselect: boolean = false;
|
||||
|
||||
/* Toggles default selection of the first row */
|
||||
@Input()
|
||||
selectFirstRow: boolean = true;
|
||||
|
||||
/** Emitted when a task in the list is clicked */
|
||||
@Output()
|
||||
rowClick: EventEmitter<string> = new EventEmitter<string>();
|
||||
@ -124,7 +125,6 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
|
||||
|
||||
currentInstanceId: string;
|
||||
selectedInstances: any[];
|
||||
layoutPresets = {};
|
||||
pagination: BehaviorSubject<PaginationModel>;
|
||||
|
||||
/** The page number of the tasks to fetch. */
|
||||
@ -135,6 +135,7 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
|
||||
@Input()
|
||||
size: number = PaginationComponent.DEFAULT_PAGINATION.maxItems;
|
||||
|
||||
rows: any[] = [];
|
||||
isLoading: boolean = true;
|
||||
sorting: any[] = ['created', 'desc'];
|
||||
|
||||
@ -148,9 +149,9 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
|
||||
hasCustomDataSource: boolean = false;
|
||||
|
||||
constructor(private taskListService: TaskListService,
|
||||
private appConfig: AppConfigService,
|
||||
appConfigService: AppConfigService,
|
||||
private userPreferences: UserPreferencesService) {
|
||||
|
||||
super(appConfigService, TaskListComponent.PRESET_KEY, taskPresetsDefaultModel);
|
||||
this.userPreferences.select(UserPreferenceValues.PaginationSize).subscribe((pageSize) => {
|
||||
this.size = pageSize;
|
||||
});
|
||||
@ -163,23 +164,20 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
|
||||
}
|
||||
|
||||
ngAfterContentInit() {
|
||||
this.loadLayoutPresets();
|
||||
this.setupSchema();
|
||||
this.createDatatableSchema();
|
||||
if (this.data && this.data.getColumns().length === 0) {
|
||||
this.data.setColumns(this.columns);
|
||||
}
|
||||
|
||||
if (this.appId) {
|
||||
this.reload();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup html-based (html definitions) or code behind (data adapter) schema.
|
||||
* If component is assigned with an empty data adater the default schema settings applied.
|
||||
*/
|
||||
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);
|
||||
setCustomDataSource(rows: any[]): void {
|
||||
if (rows) {
|
||||
this.rows = rows;
|
||||
this.hasCustomDataSource = true;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
let changed: boolean = true;
|
||||
|
||||
@ -217,6 +208,8 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
|
||||
if (!this.hasCustomDataSource) {
|
||||
this.requestNode = this.createRequestNode();
|
||||
this.load(this.requestNode);
|
||||
} else {
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
@ -224,8 +217,7 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
|
||||
this.isLoading = true;
|
||||
this.loadTasksByState().subscribe(
|
||||
(tasks) => {
|
||||
let instancesRow = this.createDataRow(tasks.data);
|
||||
this.renderInstances(instancesRow);
|
||||
this.rows = this.optimizeNames(tasks.data);
|
||||
this.selectTask(this.landingTaskId);
|
||||
this.success.emit(tasks);
|
||||
this.isLoading = false;
|
||||
@ -247,57 +239,25 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
|
||||
: 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
|
||||
*/
|
||||
selectTask(taskIdSelected: string): void {
|
||||
if (!this.isListEmpty()) {
|
||||
let rows = this.data.getRows();
|
||||
if (rows.length > 0) {
|
||||
let dataRow;
|
||||
if (taskIdSelected) {
|
||||
dataRow = rows.find((currentRow: any) => {
|
||||
return currentRow.getValue('id') === taskIdSelected;
|
||||
dataRow = this.rows.find((currentRow: any) => {
|
||||
return currentRow['id'] === taskIdSelected;
|
||||
});
|
||||
|
||||
if (!dataRow) {
|
||||
dataRow = rows[0];
|
||||
dataRow = this.rows[0];
|
||||
}
|
||||
} else {
|
||||
dataRow = rows[0];
|
||||
}
|
||||
|
||||
this.data.selectedRow = dataRow;
|
||||
dataRow.isSelected = true;
|
||||
this.currentInstanceId = dataRow.getValue('id');
|
||||
dataRow = this.rows[0];
|
||||
}
|
||||
this.rows[0] = dataRow;
|
||||
this.currentInstanceId = dataRow['id'];
|
||||
} else {
|
||||
if (this.data) {
|
||||
this.data.selectedRow = null;
|
||||
}
|
||||
|
||||
this.currentInstanceId = null;
|
||||
}
|
||||
}
|
||||
@ -329,8 +289,7 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
|
||||
* Check if the list is empty
|
||||
*/
|
||||
isListEmpty(): boolean {
|
||||
return this.data === undefined ||
|
||||
(this.data && this.data.getRows() && this.data.getRows().length === 0);
|
||||
return !this.rows || this.rows.length === 0;
|
||||
}
|
||||
|
||||
onRowClick(item: DataRowEvent) {
|
||||
@ -360,12 +319,14 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
|
||||
* Optimize name field
|
||||
* @param istances
|
||||
*/
|
||||
private optimizeNames(istances: any[]): any[] {
|
||||
istances = istances.map(t => {
|
||||
t.obj.name = t.obj.name || 'No name';
|
||||
private optimizeNames(instances: any[]): any[] {
|
||||
instances = instances.map(t => {
|
||||
if (!t.name) {
|
||||
t.name = 'No name';
|
||||
}
|
||||
return t;
|
||||
});
|
||||
return istances;
|
||||
return instances;
|
||||
}
|
||||
|
||||
private createRequestNode() {
|
||||
@ -386,41 +347,6 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
|
||||
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) {
|
||||
const needsReload = params.maxItems || params.skipCount;
|
||||
this.size = params.maxItems;
|
||||
|
Loading…
x
Reference in New Issue
Block a user