add custom columns support for process list (#1787)

demo-shell-ng2/app/components/activiti/activiti-demo.component.html

@@ -83,14 +83,23 @@
                         <div class="mdl-cell mdl-cell--3-col task-column list-column mdl-shadow--2dp" *ngIf="processFilter && !isStartProcessMode()">
                             <span><h5>Process List</h5></span>
                             <hr>
-                            <activiti-process-instance-list *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
+                            <activiti-process-instance-list
-                                                            [processDefinitionKey]="processFilter.filter.processDefinitionKey"
+                                *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
-                                                            [name]="processFilter.filter.name"
+                                [processDefinitionKey]="processFilter.filter.processDefinitionKey"
-                                                            [state]="processFilter.filter.state"
+                                [name]="processFilter.filter.name"
-                                                            [sort]="processFilter.filter.sort"
+                                [state]="processFilter.filter.state"
-                                                            [data]="dataProcesses"
+                                [sort]="processFilter.filter.sort"
-                                                            (rowClick)="onProcessRowClick($event)"
+                                [data]="dataProcesses"
-                                                            (onSuccess)="onSuccessProcessList($event)"></activiti-process-instance-list>
+                                (rowClick)="onProcessRowClick($event)"
+                                (onSuccess)="onSuccessProcessList($event)">
+                                <!-- Custom column definition demo -->
+                                <!--
+                                <data-columns>
+                                    <data-column key="name" title="NAME" class="full-width name-column"></data-column>
+                                    <data-column key="created" title="Created" class="hidden"></data-column>
+                                </data-columns>
+                                -->
+                            </activiti-process-instance-list>
                         </div>
                         <div class="mdl-cell task-column mdl-shadow--2dp" *ngIf="!isStartProcessMode()"
                             [class.mdl-cell--7-col]="processFilter && !isStartProcessMode()"

ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.spec.ts

@@ -62,9 +62,9 @@ describe('ActivitiProcessInstanceListComponent', () => {
     }));
 
     it('should use the default schemaColumn as default', () => {
-        component.ngOnInit();
+        component.ngAfterContentInit();
         expect(component.data.getColumns()).toBeDefined();
-        expect(component.data.getColumns().length).toEqual(4);
+        expect(component.data.getColumns().length).toEqual(2);
     });
 
     it('should use the schemaColumn passed in input', () => {
@@ -75,13 +75,13 @@ describe('ActivitiProcessInstanceListComponent', () => {
             ]
         );
 
-        component.ngOnInit();
+        component.ngAfterContentInit();
         expect(component.data.getColumns()).toBeDefined();
         expect(component.data.getColumns().length).toEqual(1);
     });
 
     it('should return an empty process list when no input parameters are passed', () => {
-        component.ngOnInit();
+        component.ngAfterContentInit();
         expect(component.data).toBeDefined();
         expect(component.isListEmpty()).toBeTruthy();
     });

ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts

@@ -16,9 +16,9 @@
  */
 
 import { DatePipe } from '@angular/common';
-import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges, ContentChild, AfterContentInit } from '@angular/core';
-import { AlfrescoTranslationService } from 'ng2-alfresco-core';
+import { AlfrescoTranslationService, DataColumnListComponent } from 'ng2-alfresco-core';
-import { ObjectDataTableAdapter, DataTableAdapter, DataRowEvent, ObjectDataRow, DataSorting } from 'ng2-alfresco-datatable';
+import { ObjectDataTableAdapter, DataTableAdapter, DataRowEvent, ObjectDataRow, DataSorting, DataColumn } from 'ng2-alfresco-datatable';
 import { ProcessFilterRequestRepresentation } from '../models/process-instance-filter.model';
 import { ProcessInstance } from '../models/process-instance.model';
 import { ActivitiProcessService } from '../services/activiti-process.service';
@@ -29,7 +29,9 @@ import { ActivitiProcessService } from '../services/activiti-process.service';
     styleUrls: ['./activiti-processlist.component.css'],
     templateUrl: './activiti-processlist.component.html'
 })
-export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges {
+export class ActivitiProcessInstanceListComponent implements OnChanges, AfterContentInit {
+
+    @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
 
     @Input()
     appId: string;
@@ -62,11 +64,9 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges {
 
     currentInstanceId: string;
 
-    private defaultSchemaColumn: any[] = [
+    private defaultSchema: DataColumn[] = [
-        {type: 'text', key: 'id', title: 'Id'},
+        { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
-        {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
+        { type: 'text', key: 'created', title: 'Created', cssClass: 'hidden', sortable: true }
-        {type: 'text', key: 'started', title: 'Started', sortable: true},
-        {type: 'text', key: 'startedBy.email', title: 'Started By', sortable: true}
     ];
 
     constructor(private processService: ActivitiProcessService,
@@ -76,15 +76,36 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges {
         }
     }
 
-    ngOnInit() {
+    ngAfterContentInit() {
-        if (!this.data) {
+        this.setupSchema();
-            this.data = this.initDefaultSchemaColumns();
+
-        }
         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() {
+        let schema: DataColumn[] = [];
+
+        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.defaultSchema);
+        } else {
+            if (schema && schema.length > 0) {
+                this.data.setColumns(schema);
+            } else if (this.data.getColumns().length === 0) {
+                this.data.setColumns(this.defaultSchema);
+            }
+        }
+    }
+
     ngOnChanges(changes: SimpleChanges) {
         if (this.isPropertyChanged(changes)) {
             this.reload();
@@ -119,17 +140,6 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges {
         this.load(this.requestNode);
     }
 
-    /**
-     * Return an initDefaultSchemaColumns instance with the default Schema Column
-     * @returns {ObjectDataTableAdapter}
-     */
-    initDefaultSchemaColumns(): ObjectDataTableAdapter {
-        return new ObjectDataTableAdapter(
-            [],
-            this.defaultSchemaColumn
-        );
-    }
-
     private load(requestNode: ProcessFilterRequestRepresentation) {
         this.processService.getProcessInstances(requestNode)
             .subscribe(