inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-09-24 14:31:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

#878 tasklist demo

Browse Source
This commit is contained in:
Mario Romano
2016-11-08 18:56:49 +00:00
parent 74dc82c445
commit ffbec87a6f
3 changed files with 73 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ng2-components/ng2-activiti-tasklist/demo/package.json
View File

@@ -16,7 +16,7 @@
}, },
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"ng2-activiti-tasklist": "0.3.3" "ng2-activiti-tasklist": "^0.3.3"
}, },
"devDependencies": { "devDependencies": {
"@types/core-js": "^0.9.32", "@types/core-js": "^0.9.32",

127
ng2-components/ng2-activiti-tasklist/demo/src/main.ts
View File

@@ -18,9 +18,14 @@
import { Input, NgModule, Component, OnInit, ViewChild } from '@angular/core'; import { Input, NgModule, Component, OnInit, ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppDefinitionRepresentationModel, ActivitiTaskListModule } from 'ng2-activiti-tasklist'; import {
ActivitiTaskListModule,
AppDefinitionRepresentationModel,
FilterRepresentationModel,
ActivitiApps,
ActivitiTaskList
} from 'ng2-activiti-tasklist';
import { CoreModule } from 'ng2-alfresco-core'; import { CoreModule } from 'ng2-alfresco-core';
import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core'; import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
import { ObjectDataTableAdapter, DataSorting } from 'ng2-alfresco-datatable'; import { ObjectDataTableAdapter, DataSorting } from 'ng2-alfresco-datatable';
@@ -45,7 +50,7 @@ import { ObjectDataTableAdapter, DataSorting } from 'ng2-alfresco-datatable';
<div class="mdl-layout__tab-bar mdl-js-ripple-effect" #tabheader> <div class="mdl-layout__tab-bar mdl-js-ripple-effect" #tabheader>
<a id="apps-header" href="#apps" class="mdl-layout__tab is-active">APPS</a> <a id="apps-header" href="#apps" class="mdl-layout__tab is-active">APPS</a>
<a id="processes-header" href="#processes" class="mdl-layout__tab">PROCESS LIST</a> <a id="tasks-header" href="#tasks" class="mdl-layout__tab">TASKS LIST</a>
</div> </div>
</header> </header>
@@ -59,38 +64,33 @@ import { ObjectDataTableAdapter, DataSorting } from 'ng2-alfresco-datatable';
</div> </div>
</section> </section>
<!-- PROCESS COMPONENT --> <!-- TASKS COMPONENT -->
<section class="mdl-layout__tab-panel" id="processes"> <section class="mdl-layout__tab-panel" id="tasks">
<div class="page-content"> <div class="page-content">
<div class="page-content"> <div class="mdl-grid">
<div class="mdl-grid"> <div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp">
<div class="mdl-cell mdl-cell--2-col task-column"> <span>Task Filters</span>
<span>Process Filters</span> <activiti-start-task [appId]="appId"
<activiti-start-process-instance [appId]="appId"></activiti-start-process-instance> (onSuccess)="onStartTaskSuccess($event)"></activiti-start-task>
<activiti-process-instance-filters <activiti-filters [appId]="appId"
[appId]="appId" (filterClick)="onTaskFilterClick($event)"
(filterClick)="onProcessFilterClick($event)" (onSuccess)="onSuccessTaskFilterList($event)"
(onSuccess)="onSuccessProcessFilterList($event)" #activitifilter></activiti-filters>
#activitiprocessfilter></activiti-process-instance-filters> </div>
</div> <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp">
<div class="mdl-cell mdl-cell--3-col task-column"> <span>Task List</span>
<span>Process List</span> <activiti-tasklist [taskFilter]="taskFilter"
<activiti-process-instance-list [data]="dataTasks"
[filter]="processFilter" (rowClick)="onTaskRowClick($event)"
[data]="dataProcesses" (onSuccess)="onSuccessTaskList($event)"
(rowClick)="onProcessRowClick($event)" #activititasklist></activiti-tasklist>
(onSuccess)="onSuccessProcessList($event)" </div>
#activitiprocesslist></activiti-process-instance-list> <div class="mdl-cell mdl-cell--7-col task-column mdl-shadow--2dp">
</div> <span>Task Details</span>
<div class="mdl-cell mdl-cell--7-col task-column"> <activiti-task-details [taskId]="currentTaskId"
<span>Process Details</span> (formCompleted)="onFormCompleted($event)"
<activiti-process-instance-details #activitidetails></activiti-task-details>
[processInstanceId]="currentProcessInstanceId"
(taskFormCompleted)="taskFormCompleted()"
(processCancelled)="processCancelled()"
#activitiprocessdetails></activiti-process-instance-details>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -108,29 +108,36 @@ class MyDemoApp implements OnInit {
ticket: string; ticket: string;
@ViewChild('activitiapps')
activitiapps: ActivitiApps;
@ViewChild('tabmain') @ViewChild('tabmain')
tabMain: any; tabMain: any;
@ViewChild('tabheader') @ViewChild('tabheader')
tabHeader: any; tabHeader: any;
@ViewChild('activitiprocessfilter') @ViewChild('activitifilter')
activitiprocessfilter: any; activitifilter: any;
@ViewChild('activitiprocesslist') @ViewChild('activitidetails')
activitiprocesslist: any; activitidetails: any;
@ViewChild('activitiprocessdetails') @ViewChild('activititasklist')
activitiprocessdetails: any; activititasklist: ActivitiTaskList;
@Input() @Input()
appId: number; appId: number;
processFilter: any; layoutType: string;
currentProcessInstanceId: string; currentTaskId: string;
dataProcesses: ObjectDataTableAdapter; taskSchemaColumns: any [] = [];
taskFilter: any;
dataTasks: ObjectDataTableAdapter;
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) { constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.bpmHost = this.host; settingsService.bpmHost = this.host;
@@ -140,14 +147,14 @@ class MyDemoApp implements OnInit {
this.ticket = this.authService.getTicketBpm(); this.ticket = this.authService.getTicketBpm();
} }
this.dataProcesses = new ObjectDataTableAdapter( this.dataTasks = new ObjectDataTableAdapter(
[], [],
[ [
{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: 'started', title: 'Started', cssClass: 'hidden', sortable: true} {type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true}
] ]
); );
this.dataProcesses.setSorting(new DataSorting('started', 'desc')); this.dataTasks.setSorting(new DataSorting('started', 'desc'));
} }
public updateTicket(): void { public updateTicket(): void {
@@ -179,31 +186,32 @@ class MyDemoApp implements OnInit {
onAppClick(app: AppDefinitionRepresentationModel) { onAppClick(app: AppDefinitionRepresentationModel) {
this.appId = app.id; this.appId = app.id;
this.processFilter = null; this.changeTab('apps', 'tasks');
this.currentProcessInstanceId = null;
this.changeTab('apps', 'processes');
} }
onProcessFilterClick(event: any) { onTaskFilterClick(event: FilterRepresentationModel) {
this.processFilter = event; this.taskFilter = event;
} }
onSuccessProcessFilterList(event: any) { onSuccessTaskFilterList(event: any) {
this.processFilter = this.activitiprocessfilter.getCurrentFilter(); this.taskFilter = this.activitifilter.getCurrentFilter();
} }
onSuccessProcessList(event: any) { onStartTaskSuccess(event: any) {
this.currentProcessInstanceId = this.activitiprocesslist.getCurrentProcessId(); this.activititasklist.reload();
} }
onProcessRowClick(processInstanceId) { onSuccessTaskList(event: FilterRepresentationModel) {
this.currentProcessInstanceId = processInstanceId; this.currentTaskId = this.activititasklist.getCurrentTaskId();
} }
processCancelled(data: any) { onTaskRowClick(taskId) {
this.currentProcessInstanceId = null; this.currentTaskId = taskId;
this.activitiprocesslist.reload(); }
onFormCompleted(form) {
this.activititasklist.load(this.taskFilter);
this.currentTaskId = null;
} }
changeTab(origin: string, destination: string) { changeTab(origin: string, destination: string) {
@@ -220,7 +228,6 @@ class MyDemoApp implements OnInit {
imports: [ imports: [
BrowserModule, BrowserModule,
CoreModule.forRoot(), CoreModule.forRoot(),
ActivitiProcessListModule,
ActivitiTaskListModule.forRoot() ActivitiTaskListModule.forRoot()
], ],
declarations: [MyDemoApp], declarations: [MyDemoApp],

7
ng2-components/ng2-activiti-tasklist/demo/systemjs.config.js
View File

@@ -26,7 +26,9 @@
'ng2-translate': 'npm:ng2-translate', 'ng2-translate': 'npm:ng2-translate',
'alfresco-js-api': 'npm:alfresco-js-api/dist', 'alfresco-js-api': 'npm:alfresco-js-api/dist',
'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist', 'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist',
'ng2-activiti-form': 'npm:ng2-activiti-form/dist' 'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable/dist',
'ng2-activiti-form': 'npm:ng2-activiti-form/dist',
'ng2-activiti-tasklist': 'npm:ng2-activiti-tasklist/dist'
}, },
// packages tells the System loader how to load when no filename and/or no extension // packages tells the System loader how to load when no filename and/or no extension
packages: { packages: {
@@ -41,7 +43,8 @@
'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'}, 'alfresco-js-api': { main: './alfresco-js-api.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'}, 'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'},
'ng2-activiti-form': { main: './index.js', defaultExtension: 'js'} 'ng2-activiti-form': { main: './index.js', defaultExtension: 'js'},
'ng2-activiti-tasklist': { main: './index.js', defaultExtension: 'js'}
} }
}); });
})(this); })(this);