mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
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:
@@ -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>
|
||||
|
@@ -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) {
|
||||
|
Reference in New Issue
Block a user