Add processlist component to demo shell

- Improvements to and rename list component
  - Add many more processlist components (filters, details, header,
    tasks)
  - Add dependency on tasklist component
  - Glue into demo-shell
  - Add Karma config but not actual tests yet

Refs #492
This commit is contained in:
Will Abson
2016-08-29 10:37:35 -04:00
parent 95eb606cc1
commit 3b87b450c0
32 changed files with 1441 additions and 47 deletions

View File

@@ -13,12 +13,12 @@
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp">
<span>Task Filters</span>
<activiti-filters (filterClick)="onFilterClick($event)"></activiti-filters>
<activiti-filters (filterClick)="onTaskFilterClick($event)"></activiti-filters>
</div>
<div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp">
<span>Task List</span>
<activiti-tasklist *ngIf="isTaskListSelected()" [taskFilter]="taskFilter" [schemaColumn]="schemaColumn"
(rowClick)="onRowClick($event)" #activititasklist></activiti-tasklist>
<activiti-tasklist *ngIf="isTaskListSelected()" [taskFilter]="taskFilter" [schemaColumn]="taskSchemaColumns"
(rowClick)="onTaskRowClick($event)" #activititasklist></activiti-tasklist>
</div>
<div class="mdl-cell mdl-cell--7-col task-column mdl-shadow--2dp">
<span>Task Details</span>
@@ -33,12 +33,16 @@
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--2-col task-column">
<span>Process Filters</span>
<activiti-process-filters (filterClick)="onProcessFilterClick($event)"></activiti-process-filters>
</div>
<div class="mdl-cell mdl-cell--3-col task-column">
<span>Process List</span>
<activiti-process-instance-list [filter]="processFilter" [schemaColumn]="processSchemaColumns"
(rowClick)="onProcessRowClick($event)" #activitiprocesslist></activiti-process-instance-list>
</div>
<div class="mdl-cell mdl-cell--7-col task-column">
<span>Process Details</span>
<activiti-process-instance-details [processInstanceId]="currentProcessInstanceId" (taskFormCompleted)="taskFormCompleted()" (processCancelled)="processCancelled()" #activitiprocessdetails></activiti-process-instance-details>
</div>
</div>
</div>

View File

@@ -17,6 +17,7 @@
import { Component, AfterViewChecked, ViewChild } from '@angular/core';
import { ALFRESCO_TASKLIST_DIRECTIVES } from 'ng2-activiti-tasklist';
import { ACTIVITI_PROCESSLIST_DIRECTIVES } from 'ng2-activiti-processlist';
import { ActivitiForm } from 'ng2-activiti-form';
declare let __moduleName: string;
@@ -27,7 +28,7 @@ declare var componentHandler;
selector: 'activiti-demo',
templateUrl: './activiti-demo.component.html',
styleUrls: ['./activiti-demo.component.css'],
directives: [ALFRESCO_TASKLIST_DIRECTIVES, ActivitiForm]
directives: [ALFRESCO_TASKLIST_DIRECTIVES, ACTIVITI_PROCESSLIST_DIRECTIVES, ActivitiForm]
})
export class ActivitiDemoComponent implements AfterViewChecked {
@@ -39,11 +40,20 @@ export class ActivitiDemoComponent implements AfterViewChecked {
@ViewChild('activititasklist')
activititasklist: any;
currentTaskId: string;
@ViewChild('activitiprocesslist')
activitiprocesslist: any;
schemaColumn: any [] = [];
@ViewChild('activitiprocessdetails')
activitiprocessdetails: any;
currentTaskId: string;
currentProcessInstanceId: string;
taskSchemaColumns: any [] = [];
processSchemaColumns: any [] = [];
taskFilter: any;
processFilter: any;
setChoice($event) {
this.currentChoice = $event.target.value;
@@ -58,23 +68,44 @@ export class ActivitiDemoComponent implements AfterViewChecked {
}
constructor() {
console.log('Activiti demo component');
this.schemaColumn = [
this.taskSchemaColumns = [
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true}
// {type: 'text', key: 'created', title: 'Created', sortable: true}
];
this.processSchemaColumns = [
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true}
];
}
onFilterClick(event: any) {
onTaskFilterClick(event: any) {
this.taskFilter = event;
this.activititasklist.load(this.taskFilter);
}
onRowClick(taskId) {
onProcessFilterClick(event: any) {
this.processFilter = event.filter;
this.activitiprocesslist.load(this.processFilter);
}
onTaskRowClick(taskId) {
this.currentTaskId = taskId;
this.activitidetails.loadDetails(this.currentTaskId);
}
onProcessRowClick(processInstanceId) {
this.currentProcessInstanceId = processInstanceId;
this.activitiprocessdetails.load(this.currentProcessInstanceId);
}
processCancelled(data: any) {
this.currentProcessInstanceId = null;
this.activitiprocesslist.reload();
}
taskFormCompleted(data: any) {
this.activitiprocesslist.reload();
}
ngAfterViewChecked() {
// workaround for MDL issues with dynamic components
if (componentHandler) {