[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.

demo-shell/src/app.config.json

@@ -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
                 }
             ]
         }

docs/task-list.component.md

@@ -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 |

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

@@ -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', () => {

lib/process-services/task-list/components/task-list.component.ts

@@ -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[] = [];
+        let schema = this.getSchema();
-
-        if (this.columnList && this.columnList.columns && this.columnList.columns.length > 0) {
-            schema = this.columnList.columns.map(c => <DataColumn> c);
-        }
-
         if (!this.data) {
-            this.data = new ObjectDataTableAdapter([], schema.length > 0 ? schema :  this.presetColumn  ? this.getLayoutPreset(this.presetColumn) : this.getLayoutPreset());
+            this.data = new ObjectDataTableAdapter([], schema);
-
+        } else if (this.data.getColumns().length === 0) {
-        } else {
+            this.data.setColumns(schema);
-            if (schema && schema.length > 0) {
-                this.data.setColumns(schema);
-            } else if (this.data.getColumns().length === 0) {
-                this.presetColumn ? this.setupDefaultColumns(this.presetColumn) : this.setupDefaultColumns();
-            }
         }
     }
 
@@ -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[] {
+    getSchema(): any {
-        return (this.layoutPresets[name] || this.layoutPresets['default']).map(col => new ObjectDataColumn(col));
+        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));
     }
 }