Use datatable for displaying process instances

Refs #344
This commit is contained in:
Will Abson
2016-07-19 12:45:53 +01:00
parent c9600ef5b6
commit 4ce45f4f49
3 changed files with 25 additions and 20 deletions

View File

@@ -25,7 +25,8 @@
'rxjs': 'node_modules/rxjs',
'ng2-translate': 'node_modules/ng2-translate',
'ng2-activiti-processlist': 'node_modules/ng2-activiti-processlist',
'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/dist'
'ng2-alfresco-core': 'node_modules/ng2-alfresco-core/dist',
'ng2-alfresco-datatable': 'node_modules/ng2-alfresco-datatable/dist'
};
// packages tells the System loader how to load when no filename and/or no extension
@@ -35,7 +36,8 @@
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
'ng2-translate': { defaultExtension: 'js' },
'ng2-activiti-processlist': { main: 'index.js', defaultExtension: 'js' },
'ng2-alfresco-core': { main: 'index.js', defaultExtension: 'js' }
'ng2-alfresco-core': { main: 'index.js', defaultExtension: 'js' },
'ng2-alfresco-datatable': { main: 'index.js', defaultExtension: 'js' }
};
var ngPackageNames = [

View File

@@ -1,20 +1,6 @@
<h1>My Activiti Processes</h1>
<p *ngIf="processInstances && processInstances.length == 0">{{ 'PROCESSLIST.NONE' | translate }}</p>
<table *ngIf="processInstances && processInstances.length" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
<caption>{{ 'PROCESSLIST.SUMMARY' | translate:{total: processInstances.length} }}</caption>
<thead>
<tr>
<td class="mdl-data-table__cell--non-numeric">{{ 'PROCESSLIST.COLUMN.NAME' | translate }}</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let instance of processInstances; let idx = index" (click)="onItemClick(instance, $event)">
<td class="mdl-data-table__cell--non-numeric">{{instance.name}}</td>
</tr>
</tbody>
</table>
<p *ngIf="errorMessage">{{ 'PROCESSLIST.ERROR' | translate:{errorMessage: errorMessage} }}</p>
<alfresco-datatable
[data]="data">
</alfresco-datatable>

View File

@@ -20,6 +20,10 @@ import {
OnInit
} from '@angular/core';
import { AlfrescoPipeTranslate, AlfrescoTranslationService } from 'ng2-alfresco-core';
import {
ALFRESCO_DATATABLE_DIRECTIVES,
ObjectDataTableAdapter
} from 'ng2-alfresco-datatable';
import { ActivitiProcessService } from '../services/activiti-process-service.service';
import { ProcessInstance } from '../models/process-instance';
@@ -36,12 +40,14 @@ declare let __moduleName: string;
`
],
templateUrl: './ng2-activiti-processlist.component.html',
directives: [ ALFRESCO_DATATABLE_DIRECTIVES ],
pipes: [ AlfrescoPipeTranslate ]
})
export class Ng2ActivitiProcesslistComponent implements OnInit {
errorMessage: string;
processInstances: ProcessInstance[];
data: ObjectDataTableAdapter;
constructor (
private processService: ActivitiProcessService,
@@ -59,7 +65,18 @@ export class Ng2ActivitiProcesslistComponent implements OnInit {
getProcesses() {
this.processService.getProcesses()
.subscribe(
processInstances => this.processInstances = processInstances,
(processInstances) => {
// this.processInstances = processInstances;
this.data = new ObjectDataTableAdapter(
processInstances,
[
{type: 'text', key: 'id', title: 'Id', sortable: true},
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
{type: 'text', key: 'started', title: 'Started', sortable: true},
{type: 'text', key: 'startedBy.email', title: 'Started By', sortable: true}
]
);
},
error => this.errorMessage = <any>error);
}