mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
[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:
parent
fe84522ce2
commit
a5e6d9abcf
@ -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
|
||||
}
|
||||
]
|
||||
}
|
||||
|
@ -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 |
|
||||
|
@ -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', () => {
|
||||
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user