[ADF-2102] Task List - Provide a way to support custom html template and static columns at same time (#2787)

* * Removed unused adf-task-list keys from app.config
* Fix can add/remove the static property through the app.config and can put custom columns into the html in adf-tasklist component

* Fix add/remove the static property through the app.config and can put custom columns into the html in adf-tasklist component

* * Fixed support custom html template and static columns.
* Updated tasklist doc.
* Fixed failing test case.

* * Fixed support custom html template and static columns

* * Updated task-list documentation.
This commit is contained in:
siva kumar 2017-12-15 19:23:30 +05:30 committed by Maurizio Vitale
parent fe84522ce2
commit a5e6d9abcf
4 changed files with 101 additions and 70 deletions

View File

@ -337,48 +337,6 @@
"type": "text",
"title": "ADF_TASK_LIST.PROPERTIES.NAME",
"sortable": true
},
{
"key": "noassignee",
"type": "text",
"title": "ADF_TASK_LIST.PROPERTIES.ASSIGNEE_DEFAULT",
"cssClass": "hidden",
"sortable": true
},
{
"key": "nodueDate",
"type": "text",
"title": "ADF_TASK_LIST.PROPERTIES.DUE_DATE_DEFAULT",
"cssClass": "hidden",
"sortable": true
},
{
"key": "nocategory",
"type": "text",
"title": "ADF_TASK_LIST.PROPERTIES.CATEGORY_DEFAULT",
"cssClass": "hidden",
"sortable": true
},
{
"key": "noparentname",
"type": "text",
"title": "ADF_TASK_LIST.PROPERTIES.PARENT_NAME_DEFAULT",
"cssClass": "hidden",
"sortable": true
},
{
"key": "nodescription",
"type": "date",
"title": "ADF_TASK_LIST.PROPERTIES.DESCRIPTION_DEFAULT",
"cssClass": "hidden",
"sortable": true
},
{
"key": "noformName",
"type": "date",
"title": "ADF_TASK_LIST.PROPERTIES.FORM_NAME_DEFAULT",
"cssClass": "hidden",
"sortable": true
}
]
}

View File

@ -11,6 +11,38 @@ Renders a list containing all the tasks matched by the parameters specified.
[assignment]="'assignee'">
</adf-tasklist>
```
You can pass schema as data adapter for the tasklist like 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>
```
You can also use HTML-based schema declaration like shown below:
@ -23,9 +55,9 @@ You can also use HTML-based schema declaration like shown below:
</adf-tasklist>
```
You can also use custom schema declaration as shown below:
You can also use static custom schema declaration as shown below:
define custom schema in the app.config.json as shown below json format.
define static custom schema in the app.config.json as shown below json format.
```json
"adf-task-list": {
@ -53,6 +85,42 @@ define custom schema in the app.config.json as shown below json format.
[presetColumn]="'customSchema'">
</adf-tasklist>
```
You can also use both HTML-based and app.config.json custom schema declaration at same time like shown below:
```json
"adf-task-list": {
"presets": {
"customSchema": [
{
"key": "id",
"type": "text",
"title": "Id",
"sortable": true
}],
"default": [
{
"key": "name",
"type": "text",
"title": "name",
"sortable": true
}],
}
}
```
```html
<adf-tasklist
[appId]="'1'"
[presetColumn]="'customSchema'">
<data-columns>
<data-column key="assignee" title="Assignee" class="full-width name-column">
<ng-template let-entry="$implicit">
<div>{{getFullName(entry.row.obj.assignee)}}</div>
</ng-template>
</data-column>
</data-columns>
</adf-tasklist>
```
### Properties
| Name | Type | Default | Description |

View File

@ -206,10 +206,10 @@ describe('TaskListComponent', () => {
});
it('should fetch custom schemaColumn when the input presetColumn is defined', () => {
component.presetColumn = 'fakeCutomColumns';
component.presetColumn = 'fakeCutomSchema';
fixture.detectChanges();
expect(component.data.getColumns()).toBeDefined();
expect(component.data.getColumns().length).toEqual(3);
expect(component.data.getColumns().length).toEqual(2);
});
it('should return an empty task list when no input parameters are passed', () => {

View File

@ -19,6 +19,7 @@ import { DataColumn, DataRowEvent, DataTableAdapter, ObjectDataColumn, ObjectDat
import { AppConfigService, DataColumnListComponent } from '@alfresco/adf-core';
import { AfterContentInit, Component, ContentChild, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import * as _ from 'lodash';
import { TaskQueryRequestRepresentationModel } from '../models/filter.model';
import { TaskListModel } from '../models/task-list.model';
import { taskPresetsDefaultModel } from '../models/task-preset.model';
@ -145,21 +146,11 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
* If component is assigned with an empty data adater the default schema settings applied.
*/
setupSchema(): void {
let schema: DataColumn[] = [];
if (this.columnList && this.columnList.columns && this.columnList.columns.length > 0) {
schema = this.columnList.columns.map(c => <DataColumn> c);
}
let schema = this.getSchema();
if (!this.data) {
this.data = new ObjectDataTableAdapter([], schema.length > 0 ? schema : this.presetColumn ? this.getLayoutPreset(this.presetColumn) : this.getLayoutPreset());
} else {
if (schema && schema.length > 0) {
this.data.setColumns(schema);
} else if (this.data.getColumns().length === 0) {
this.presetColumn ? this.setupDefaultColumns(this.presetColumn) : this.setupDefaultColumns();
}
this.data = new ObjectDataTableAdapter([], schema);
} else if (this.data.getColumns().length === 0) {
this.data.setColumns(schema);
}
}
@ -341,13 +332,6 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
return new TaskQueryRequestRepresentationModel(requestNode);
}
setupDefaultColumns(preset: string = 'default'): void {
if (this.data) {
const columns = this.getLayoutPreset(preset);
this.data.setColumns(columns);
}
}
private loadLayoutPresets(): void {
const externalSettings = this.appConfig.get('adf-task-list.presets', null);
@ -356,10 +340,31 @@ export class TaskListComponent implements OnChanges, OnInit, AfterContentInit {
} else {
this.layoutPresets = taskPresetsDefaultModel;
}
}
private getLayoutPreset(name: string = 'default'): DataColumn[] {
return (this.layoutPresets[name] || this.layoutPresets['default']).map(col => new ObjectDataColumn(col));
getSchema(): any {
let customSchemaColumns = [];
customSchemaColumns = _.concat(customSchemaColumns, this.getSchemaFromConfig(this.presetColumn));
customSchemaColumns = _.concat(customSchemaColumns, 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));
}
}