[ADF-2326] Process List - Provide a way to support custom html template and static columns at same time. (#2975)

* [ADF-2326] Process List - Provide a way to support custom html template and static columns at same time.

* Fixed support custom html template and static columns at same time

* Updated process list documentation with recent changes.

* * Added testcases for recent changes .

docs/process-list.component.md

@@ -46,6 +46,43 @@ define custom schema in the app.config.json as shown below json format.
 </adf-process-instance-list>
 ```
 
+You can also use both HTML-based and app.config.json custom schema declaration at same time like shown below:
+
+```json
+"adf-process-list": {
+        "presets": {
+            "customSchema": [
+            {
+                    "key": "id",
+                    "type": "text",
+                    "title": "Id",
+                    "sortable": true
+            }],
+            "default": [
+                {
+                    "key": "name",
+                    "type": "text",
+                    "title": "name",
+                    "sortable": true
+            }],
+        }
+}
+```
+
+```html
+<adf-process-instance-list
+    [appId]="'1'" 
+    [presetColumn]="'customSchema'">
+    <data-columns>
+        <data-column key="key" title="title" class="full-width name-column">
+            <ng-template let-entry="$implicit">
+                    <div>{{getFullName(entry.row.obj.assignee)}}</div>
+            </ng-template>
+        </data-column>
+    </data-columns>
+</adf-process-instance-list>
+```
+
 ### Pagination strategy
 
 adf-process-instance-list also supports pagination and the same can be used as shown below.

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { SimpleChange } from '@angular/core';
+import { Component, SimpleChange, ViewChild } from '@angular/core';
 import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { MatProgressSpinnerModule } from '@angular/material';
 import { Observable } from 'rxjs/Observable';
@@ -135,7 +135,7 @@ describe('ProcessInstanceListComponent', () => {
     });
 
     it('should fetch custom schemaColumn when the input presetColumn is defined', () => {
-        component.presetColumn = 'fakeCutomColumns';
+        component.presetColumn = 'fakeCutomSchema';
         component.ngAfterContentInit();
         fixture.detectChanges();
         expect(component.data.getColumns()).toBeDefined();
@@ -483,3 +483,60 @@ describe('ProcessInstanceListComponent', () => {
         });
     });
 });
+
+@Component({
+    template: `
+    <adf-process-instance-list #processlistComponentInstance>
+        <data-columns>
+            <data-column key="name" title="ADF_PROCESS_LIST.PROPERTIES.NAME" class="full-width name-column"></data-column>
+            <data-column key="created" title="ADF_PROCESS_LIST.PROPERTIES.END_DATE" class="hidden"></data-column>
+            <data-column key="startedBy" title="ADF_PROCESS_LIST.PROPERTIES.CREATED" class="desktop-only dw-dt-col-3 ellipsis-cell">
+                <ng-template let-entry="$implicit">
+                    <div>{{getFullName(entry.row.obj.startedBy)}}</div>
+                </ng-template>
+            </data-column>
+        </data-columns>
+    </adf-process-instance-list>`
+})
+
+class CustomProcessListComponent {
+
+    @ViewChild(ProcessInstanceListComponent)
+    processList: ProcessInstanceListComponent;
+}
+
+describe('CustomProcessListComponent', () => {
+    let fixture: ComponentFixture<CustomProcessListComponent>;
+    let component: CustomProcessListComponent;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                ProcessInstanceListComponent,
+                CustomProcessListComponent
+            ],
+            providers: [
+                ProcessService
+            ],
+            imports: []
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CustomProcessListComponent);
+        fixture.detectChanges();
+        component = fixture.componentInstance;
+    });
+
+    it('should create instance of CustomProcessListComponent', () => {
+        expect(component instanceof CustomProcessListComponent).toBe(true, 'should create CustomProcessListComponent');
+    });
+
+    it('should fetch custom schemaColumn from html', () => {
+        fixture.detectChanges();
+        expect(component.processList.data.getColumns()).toBeDefined();
+        expect(component.processList.data.getColumns()[1].title).toEqual('ADF_PROCESS_LIST.PROPERTIES.END_DATE');
+        expect(component.processList.data.getColumns()[2].title).toEqual('ADF_PROCESS_LIST.PROPERTIES.CREATED');
+        expect(component.processList.data.getColumns().length).toEqual(3);
+    });
+});

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

@@ -141,20 +141,11 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
      * If component is assigned with an empty data adater the default schema settings applied.
      */
     setupSchema() {
-        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.getLayoutPreset(this.presetColumn));
+            this.data = new ObjectDataTableAdapter([], schema);
-        } else {
+        } else if (this.data.getColumns().length === 0) {
-            if (schema && schema.length > 0) {
+            this.data.setColumns(schema);
-                this.data.setColumns(schema);
-            } else if (this.data.getColumns().length === 0) {
-                this.presetColumn ? this.setupDefaultColumns(this.presetColumn) : this.setupDefaultColumns();
-            }
         }
     }
 
@@ -355,13 +346,6 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
         return new ProcessFilterParamRepresentationModel(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-process-list.presets', null);
 
@@ -370,11 +354,31 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
         } else {
             this.layoutPresets = processPresetsDefaultModel;
         }
-
     }
 
-    private getLayoutPreset(name: string = 'default'): DataColumn[] {
+    getSchema(): any {
-        return (this.layoutPresets[name] || this.layoutPresets['default']).map(col => new ObjectDataColumn(col));
+        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: PaginationQueryParams) {

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { SimpleChange } from '@angular/core';
+import { Component, SimpleChange, ViewChild } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MaterialModule } from '../../material.module';
 import { AppConfigService } from '@alfresco/adf-core';
@@ -628,3 +628,60 @@ describe('TaskListComponent', () => {
         });
     });
 });
+
+@Component({
+    template: `
+    <adf-tasklist #taskList>
+        <data-columns>
+            <data-column key="name" title="ADF_TASK_LIST.PROPERTIES.NAME" class="full-width name-column"></data-column>
+            <data-column key="created" title="ADF_TASK_LIST.PROPERTIES.CREATED" class="hidden"></data-column>
+            <data-column key="startedBy" title="ADF_TASK_LIST.PROPERTIES.CREATED" class="desktop-only dw-dt-col-3 ellipsis-cell">
+                <ng-template let-entry="$implicit">
+                    <div>{{getFullName(entry.row.obj.startedBy)}}</div>
+                </ng-template>
+            </data-column>
+        </data-columns>
+    </adf-tasklist>`
+})
+
+class CustomTaskListComponent {
+
+    @ViewChild(TaskListComponent)
+    taskList: TaskListComponent;
+}
+
+describe('CustomTaskListComponent', () => {
+    let fixture: ComponentFixture<CustomTaskListComponent>;
+    let component: CustomTaskListComponent;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                TaskListComponent,
+                CustomTaskListComponent
+            ],
+            providers: [
+                TaskListService
+            ],
+            imports: []
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CustomTaskListComponent);
+        fixture.detectChanges();
+        component = fixture.componentInstance;
+    });
+
+    it('should create instance of CustomTaskListComponent', () => {
+        expect(component instanceof CustomTaskListComponent).toBe(true, 'should create 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);
+    });
+});