mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
#878 process list documentation and demo
This commit is contained in:
Mario Romano
@@ -1,34 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>ng2-activiti-processlist Angular 2</title>
|
||||
<base href="/">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Alfresco Angular 2 Activiti Analytics - Demo</title>
|
||||
<base href="./">
|
||||
|
||||
<!-- Moment js -->
|
||||
<script src="node_modules/moment/min/moment.min.js"></script>
|
||||
|
||||
<!-- Date picker -->
|
||||
<script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
|
||||
<script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
|
||||
<link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
|
||||
|
||||
<!-- Google Material Design Lite -->
|
||||
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
|
||||
<script src="node_modules/material-design-lite/material.min.js"></script>
|
||||
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
|
||||
|
||||
<!-- Polyfill(s) for Safari (pre-10.x) -->
|
||||
<script src="node_modules/intl/dist/Intl.min.js"></script>
|
||||
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
|
||||
<script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
|
||||
|
||||
<!-- Polyfill(s) for dialogs -->
|
||||
<script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
|
||||
<style>._dialog_overlay { position: static !important; } </style>
|
||||
|
||||
<!-- Modules -->
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<style> .chart {display: block; width: 100%;}</style>
|
||||
|
||||
|
||||
<!-- Google Material Design Lite -->
|
||||
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
|
||||
<script src="node_modules/material-design-lite/material.min.js"></script>
|
||||
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
|
||||
<body>
|
||||
|
||||
<!-- Polyfill(s) for older browsers -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script src="systemjs.config.js"></script>
|
||||
<script>
|
||||
System.import('app').catch(function(err){ console.error(err); });
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<alfresco-app-demo>
|
||||
<div id="loader-spin" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
|
||||
</alfresco-app-demo>
|
||||
</body>
|
||||
<alfresco-app-demo></alfresco-app-demo>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@@ -6,11 +6,11 @@
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"clean": "npm install rimraf && rimraf dist node_modules typings dist",
|
||||
"postinstall": "npm run typings && npm run build",
|
||||
"postinstall": "npm run build",
|
||||
"start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
|
||||
"server": "wsrv -o -s -l",
|
||||
"build": "npm run tslint && rimraf dist && npm run tsc",
|
||||
"build:w": "npm run tslint && rimraf dist && npm run tsc:w",
|
||||
"build": "npm run tslint && rimraf dist && tsc",
|
||||
"build:w": "npm run tslint && rimraf dist && tsc -w",
|
||||
"tsc": "tsc",
|
||||
"tsc:w": "tsc -w",
|
||||
"tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts"
|
||||
@@ -23,30 +23,7 @@
|
||||
"demo"
|
||||
],
|
||||
"dependencies": {
|
||||
"@angular/common": "2.0.0",
|
||||
"@angular/compiler": "2.0.0",
|
||||
"@angular/core": "2.0.0",
|
||||
"@angular/forms": "2.0.0",
|
||||
"@angular/http": "2.0.0",
|
||||
"@angular/platform-browser": "2.0.0",
|
||||
"@angular/platform-browser-dynamic": "2.0.0",
|
||||
"@angular/router": "3.0.0",
|
||||
"@angular/upgrade": "2.0.0",
|
||||
"@types/node": "^6.0.42",
|
||||
"core-js": "^2.4.1",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23",
|
||||
|
||||
"material-design-icons": "2.2.3",
|
||||
"material-design-lite": "1.2.1",
|
||||
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-alfresco-datatable": "0.3.2",
|
||||
"ng2-activiti-processlist": "^0.3.0",
|
||||
"ng2-activiti-tasklist": "0.3.3"
|
||||
"ng2-activiti-processlist": "^0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/core-js": "^0.9.32",
|
||||
|
||||
@@ -12,94 +12,221 @@
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { NgModule, Component, OnInit } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { CoreModule } from 'ng2-alfresco-core';
|
||||
import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
|
||||
import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
|
||||
|
||||
@Component({
|
||||
selector: 'alfresco-app-demo',
|
||||
template: `<label for="token"><b>Insert a valid access token / ticket:</b></label><br>
|
||||
<input id="token" type="text" size="48" (change)="updateToken();documentList.reload()" [(ngModel)]="token"><br>
|
||||
<label for="token"><b>Insert the ip of your Alfresco instance:</b></label><br>
|
||||
<input id="token" type="text" size="48" (change)="updateHost();documentList.reload()" [(ngModel)]="bpmHost"><br><br>
|
||||
<div *ngIf="!authenticated" style="color:#FF2323">
|
||||
Authentication failed to ip {{ bpmHost }} with user: admin, admin, you can still try to add a valid token to perform
|
||||
operations.
|
||||
</div>
|
||||
<hr>
|
||||
<label for="token"><b>Insert a scriptPath</b></label><br>
|
||||
<input id="token" type="text" size="48" [(ngModel)]="scriptPath"><br>
|
||||
<label for="token"><b>Insert a contextRoot</b></label><br>
|
||||
<input id="token" type="text" size="48" [(ngModel)]="contextRoot"><br>
|
||||
<label for="token"><b>Insert a servicePath</b></label><br>
|
||||
<input id="token" type="text" size="48" [(ngModel)]="servicePath"><br>
|
||||
<div class="container" *ngIf="authenticated">
|
||||
<activiti-process-instance-list></activiti-process-instance-list>
|
||||
</div>`
|
||||
})
|
||||
class MyDemoApp implements OnInit {
|
||||
|
||||
authenticated: boolean;
|
||||
bpmHost: string = 'http://127.0.0.1:9999';
|
||||
token: string;
|
||||
|
||||
constructor(
|
||||
private authService: AlfrescoAuthenticationService,
|
||||
private settingsService: AlfrescoSettingsService
|
||||
) {
|
||||
console.log('constructor');
|
||||
|
||||
settingsService.setProviders('BPM');
|
||||
settingsService.bpmHost = this.bpmHost;
|
||||
|
||||
if (this.authService.getTicketBpm()) {
|
||||
this.token = this.authService.getTicketBpm();
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.login();
|
||||
}
|
||||
|
||||
public updateToken(): void {
|
||||
localStorage.setItem('token', this.token);
|
||||
}
|
||||
|
||||
public updateHost(): void {
|
||||
this.settingsService.bpmHost = this.bpmHost;
|
||||
this.login();
|
||||
}
|
||||
|
||||
login() {
|
||||
this.authService.login('admin', 'admin').subscribe(
|
||||
token => {
|
||||
console.log(token);
|
||||
this.token = token;
|
||||
this.authenticated = true;
|
||||
},
|
||||
error => {
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Input, NgModule, Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { AppDefinitionRepresentationModel, ActivitiTaskListModule } from 'ng2-activiti-tasklist';
|
||||
import { CoreModule } from 'ng2-alfresco-core';
|
||||
import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
|
||||
import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
|
||||
import { ObjectDataTableAdapter, DataSorting } from 'ng2-alfresco-datatable';
|
||||
|
||||
@Component({
|
||||
selector: 'alfresco-app-demo',
|
||||
template: `
|
||||
<label for="ticket"><b>Insert a valid ticket:</b></label><br>
|
||||
<input id="ticket" type="text" size="48" (change)="updateTicket()" [(ngModel)]="ticket"><br>
|
||||
<label for="host"><b>Insert the ip of your Activiti instance:</b></label><br>
|
||||
<input id="host" type="text" size="48" (change)="updateHost()" [(ngModel)]="host"><br><br>
|
||||
<div *ngIf="!authenticated" style="color:#FF2323">
|
||||
Authentication failed to ip {{ host }} with user: admin, admin, you can still try to add a valid ticket to perform
|
||||
operations.
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||
|
||||
<header class="mdl-layout__header">
|
||||
|
||||
<!-- TABS -->
|
||||
|
||||
<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="processes-header" href="#processes" class="mdl-layout__tab">PROCESS LIST</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="mdl-layout__content activiti" #tabmain>
|
||||
|
||||
<!-- APPPS COMPONENT -->
|
||||
|
||||
<section class="mdl-layout__tab-panel is-active" id="apps">
|
||||
<div class="page-content">
|
||||
<activiti-apps [layoutType]="'GRID'" (appClick)="onAppClick($event)" #activitiapps></activiti-apps>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PROCESS COMPONENT -->
|
||||
|
||||
<section class="mdl-layout__tab-panel" id="processes">
|
||||
<div class="page-content">
|
||||
<div class="page-content">
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-cell mdl-cell--2-col task-column">
|
||||
<span>Process Filters</span>
|
||||
<activiti-start-process-instance [appId]="appId"></activiti-start-process-instance>
|
||||
<activiti-process-instance-filters
|
||||
[appId]="appId"
|
||||
(filterClick)="onProcessFilterClick($event)"
|
||||
(onSuccess)="onSuccessProcessFilterList($event)"
|
||||
#activitiprocessfilter></activiti-process-instance-filters>
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--3-col task-column">
|
||||
<span>Process List</span>
|
||||
<activiti-process-instance-list
|
||||
[filter]="processFilter"
|
||||
[data]="dataProcesses"
|
||||
(rowClick)="onProcessRowClick($event)"
|
||||
(onSuccess)="onSuccessProcessList($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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
class MyDemoApp implements OnInit {
|
||||
|
||||
authenticated: boolean;
|
||||
|
||||
host: string = 'http://localhost:9999';
|
||||
|
||||
ticket: string;
|
||||
|
||||
@ViewChild('tabmain')
|
||||
tabMain: any;
|
||||
|
||||
@ViewChild('tabheader')
|
||||
tabHeader: any;
|
||||
|
||||
@ViewChild('activitiprocessfilter')
|
||||
activitiprocessfilter: any;
|
||||
|
||||
@ViewChild('activitiprocesslist')
|
||||
activitiprocesslist: any;
|
||||
|
||||
@ViewChild('activitiprocessdetails')
|
||||
activitiprocessdetails: any;
|
||||
|
||||
@Input()
|
||||
appId: number;
|
||||
|
||||
processFilter: any;
|
||||
|
||||
currentProcessInstanceId: string;
|
||||
|
||||
dataProcesses: ObjectDataTableAdapter;
|
||||
|
||||
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
|
||||
settingsService.bpmHost = this.host;
|
||||
settingsService.setProviders('BPM');
|
||||
|
||||
if (this.authService.getTicketBpm()) {
|
||||
this.ticket = this.authService.getTicketBpm();
|
||||
}
|
||||
|
||||
this.dataProcesses = new ObjectDataTableAdapter(
|
||||
[],
|
||||
[
|
||||
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
|
||||
{type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true}
|
||||
]
|
||||
);
|
||||
this.dataProcesses.setSorting(new DataSorting('started', 'desc'));
|
||||
}
|
||||
|
||||
public updateTicket(): void {
|
||||
localStorage.setItem('ticket-BPM', this.ticket);
|
||||
}
|
||||
|
||||
public updateHost(): void {
|
||||
this.settingsService.bpmHost = this.host;
|
||||
this.login();
|
||||
}
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.login();
|
||||
}
|
||||
|
||||
login() {
|
||||
this.authService.login('admin', 'admin').subscribe(
|
||||
ticket => {
|
||||
console.log(ticket);
|
||||
this.ticket = this.authService.getTicketBpm();
|
||||
this.authenticated = true;
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
this.authenticated = false;
|
||||
});
|
||||
}
|
||||
|
||||
onAppClick(app: AppDefinitionRepresentationModel) {
|
||||
this.appId = app.id;
|
||||
|
||||
this.processFilter = null;
|
||||
this.currentProcessInstanceId = null;
|
||||
|
||||
this.changeTab('apps', 'processes');
|
||||
}
|
||||
|
||||
onProcessFilterClick(event: any) {
|
||||
this.processFilter = event;
|
||||
}
|
||||
|
||||
onSuccessProcessFilterList(event: any) {
|
||||
this.processFilter = this.activitiprocessfilter.getCurrentFilter();
|
||||
}
|
||||
|
||||
onSuccessProcessList(event: any) {
|
||||
this.currentProcessInstanceId = this.activitiprocesslist.getCurrentProcessId();
|
||||
}
|
||||
|
||||
onProcessRowClick(processInstanceId) {
|
||||
this.currentProcessInstanceId = processInstanceId;
|
||||
}
|
||||
|
||||
processCancelled(data: any) {
|
||||
this.currentProcessInstanceId = null;
|
||||
this.activitiprocesslist.reload();
|
||||
}
|
||||
|
||||
changeTab(origin: string, destination: string) {
|
||||
this.tabMain.nativeElement.children[origin].classList.remove('is-active');
|
||||
this.tabMain.nativeElement.children[destination].classList.add('is-active');
|
||||
|
||||
this.tabHeader.nativeElement.children[`${origin}-header`].classList.remove('is-active');
|
||||
this.tabHeader.nativeElement.children[`${destination}-header`].classList.add('is-active');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
CoreModule.forRoot(),
|
||||
ActivitiProcessListModule
|
||||
ActivitiProcessListModule,
|
||||
ActivitiTaskListModule.forRoot()
|
||||
],
|
||||
declarations: [ MyDemoApp ],
|
||||
bootstrap: [ MyDemoApp ]
|
||||
declarations: [MyDemoApp],
|
||||
bootstrap: [MyDemoApp]
|
||||
})
|
||||
export class AppModule { }
|
||||
export class AppModule {
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
||||
@@ -27,7 +27,9 @@
|
||||
'alfresco-js-api': 'npm:alfresco-js-api/dist',
|
||||
'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist',
|
||||
'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable/dist',
|
||||
'ng2-activiti-tasklist': 'npm:ng2-activiti-tasklist/dist'
|
||||
'ng2-activiti-form': 'npm:ng2-activiti-form/dist',
|
||||
'ng2-activiti-tasklist': 'npm:ng2-activiti-tasklist/dist',
|
||||
'ng2-activiti-processlist': 'npm:ng2-activiti-processlist/dist'
|
||||
},
|
||||
// packages tells the System loader how to load when no filename and/or no extension
|
||||
packages: {
|
||||
@@ -42,7 +44,9 @@
|
||||
'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
|
||||
'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
|
||||
'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'},
|
||||
'ng2-activiti-tasklist': { main: './index.js', defaultExtension: 'js'}
|
||||
'ng2-activiti-form': { main: './index.js', defaultExtension: 'js'},
|
||||
'ng2-activiti-tasklist': { main: './index.js', defaultExtension: 'js'},
|
||||
'ng2-activiti-processlist': { main: './index.js', defaultExtension: 'js'}
|
||||
}
|
||||
});
|
||||
})(this);
|
||||
|
||||
Reference in New Issue
Block a user