mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
#878 process list documentation and demo
This commit is contained in:
Mario Romano
parent
de97a8a9f3
commit
d80947db35
@ -1,4 +1,35 @@
|
||||
# Activiti Task List Component for Angular 2
|
||||
# Activiti Process List Component for Angular 2
|
||||
<p>
|
||||
<a title='Build Status Travis' href="https://travis-ci.org/Alfresco/alfresco-ng2-components">
|
||||
<img src='https://travis-ci.org/Alfresco/alfresco-ng2-components.svg?branch=master' alt='travis
|
||||
Status' />
|
||||
</a>
|
||||
<a title='Build Status AppVeyor' href="https://ci.appveyor.com/project/alfresco/alfresco-ng2-components">
|
||||
<img src='https://ci.appveyor.com/api/projects/status/github/Alfresco/alfresco-ng2-components' alt='travis
|
||||
Status' />
|
||||
</a>
|
||||
<a href='https://codecov.io/gh/Alfresco/alfresco-ng2-components'>
|
||||
<img src='https://img.shields.io/codecov/c/github/Alfresco/alfresco-ng2-components/master.svg?maxAge=2592000' alt='Coverage Status' />
|
||||
</a>
|
||||
<a href='https://www.npmjs.com/package/ng2-activiti-processlist'>
|
||||
<img src='https://img.shields.io/npm/dt/ng2-activiti-processlist.svg' alt='npm downloads' />
|
||||
</a>
|
||||
<a href='https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE'>
|
||||
<img src='https://img.shields.io/hexpm/l/plug.svg' alt='license' />
|
||||
</a>
|
||||
<a href='https://www.alfresco.com/'>
|
||||
<img src='https://img.shields.io/badge/style-component-green.svg?label=alfresco' alt='alfresco component' />
|
||||
</a>
|
||||
<a href='https://angular.io/'>
|
||||
<img src='https://img.shields.io/badge/style-2-red.svg?label=angular' alt='angular 2' />
|
||||
</a>
|
||||
<a href='https://www.typescriptlang.org/docs/tutorial.html'>
|
||||
<img src='https://img.shields.io/badge/style-lang-blue.svg?label=typescript' alt='typescript' />
|
||||
</a>
|
||||
<a href='https://www.alfresco.com/'>
|
||||
<img src='https://img.shields.io/badge/style-%3E5.0.0-blue.svg?label=node%20version' alt='node version' />
|
||||
</a>
|
||||
</p>
|
||||
|
||||
Displays lists of process instances both active and completed, using any defined process filter, and
|
||||
render details of any chosen instance.
|
||||
@ -10,49 +41,68 @@ necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
npm install --save ng2-activiti-processlist
|
||||
```
|
||||
Follow the 3 steps below:
|
||||
|
||||
### Dependencies
|
||||
1. Npm
|
||||
|
||||
Add the following dependency to your index.html:
|
||||
```sh
|
||||
npm install ng2-activiti-processlist --save
|
||||
```
|
||||
|
||||
```html
|
||||
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
|
||||
```
|
||||
2. Html
|
||||
|
||||
You must separately install the following libraries for your application:
|
||||
Include these dependencies in your index.html page:
|
||||
|
||||
- [ng2-translate](https://github.com/ocombe/ng2-translate)
|
||||
- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
|
||||
- [ng2-alfresco-datatable](https://www.npmjs.com/package/ng2-alfresco-datatable)
|
||||
- [ng2-activiti-tasklist](https://www.npmjs.com/package/ng2-activiti-tasklist)
|
||||
```html
|
||||
|
||||
<!-- Moment js -->
|
||||
<script src="node_modules/moment/min/moment.min.js"></script>
|
||||
|
||||
```sh
|
||||
npm install --save ng2-translate ng2-alfresco-core ng2-alfresco-datatable ng2-activiti-tasklist
|
||||
```
|
||||
<!-- 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">
|
||||
|
||||
#### Material Design Lite
|
||||
<!-- 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">
|
||||
|
||||
The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material
|
||||
design dependency to your project:
|
||||
<!-- 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>
|
||||
|
||||
```sh
|
||||
npm install --save material-design-icons material-design-lite
|
||||
```
|
||||
<!-- 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>
|
||||
|
||||
Also make sure you include these dependencies in your `index.html` file:
|
||||
<!-- 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>
|
||||
|
||||
```html
|
||||
<!-- 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">
|
||||
```
|
||||
<!-- 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>
|
||||
|
||||
## Usage
|
||||
```
|
||||
|
||||
3. SystemJs
|
||||
|
||||
Add the following components to your systemjs.config.js file:
|
||||
|
||||
- ng2-translate
|
||||
- ng2-alfresco-core
|
||||
- ng2-activiti-form
|
||||
- ng2-activiti-tasklist
|
||||
- ng2-alfresco-datatable
|
||||
|
||||
Please refer to the following example file: [systemjs.config.js](demo/systemjs
|
||||
.config.js) .
|
||||
|
||||
## Basic usage
|
||||
|
||||
### Activiti Process Instance List
|
||||
|
||||
@ -62,33 +112,101 @@ This component renders a list containing all the process instances matched by th
|
||||
<activiti-process-instance-list [filter]="processFilterModel"></activiti-tasklist>
|
||||
```
|
||||
|
||||
**main.ts**
|
||||
```ts
|
||||
|
||||
import { NgModule, Component, OnInit } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
import { UserProcessInstanceFilterRepresentationModel } 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: `<activiti-process-instance-list [filter]="processInstanceFilterRepresentation" [data]="dataProcesses"
|
||||
#activitiprocesslist></activiti-process-instance-list>`
|
||||
})
|
||||
class MyDemoApp implements OnInit {
|
||||
|
||||
dataProcesses: ObjectDataTableAdapter;
|
||||
|
||||
processInstanceFilterRepresentation: UserProcessInstanceFilterRepresentationModel;
|
||||
|
||||
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
|
||||
settingsService.bpmHost = 'http://localhost:9999';
|
||||
|
||||
this.authService.login('admin', 'admin').subscribe(
|
||||
ticket => {
|
||||
console.log(ticket);
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
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'));
|
||||
|
||||
this.processInstanceFilterRepresentation = new UserProcessInstanceFilterRepresentationModel({
|
||||
appId: '3003',
|
||||
filter: {
|
||||
processDefinitionKey: null,
|
||||
name: null,
|
||||
state: 'running',
|
||||
sort: 'created-desc'
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
CoreModule.forRoot(),
|
||||
ActivitiProcessListModule
|
||||
],
|
||||
declarations: [MyDemoApp],
|
||||
bootstrap: [MyDemoApp]
|
||||
})
|
||||
export class AppModule {
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
|
||||
|
||||
```
|
||||
|
||||
#### Options
|
||||
|
||||
**filter**: { FilterModel } (required) FilterModel object that
|
||||
is passed to the process instance list API to filter the returned list.
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
|`filter`| { UserProcessInstanceFilterRepresentationModel } (required) UserProcessInstanceFilterRepresentationModel object that is passed to the process instance list API to filter the returned list. |
|
||||
|
||||
Example:
|
||||
|
||||
|
||||
```json
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Running Processes",
|
||||
"recent": false,
|
||||
"icon": "glyphicon-align-left",
|
||||
"filter": {
|
||||
"appDefinitionId": "1",
|
||||
"sort": "created-desc",
|
||||
"name": "",
|
||||
"state": "open",
|
||||
"page": "0",
|
||||
"size": "25"
|
||||
},
|
||||
"appId": 1001
|
||||
appId: '3003',
|
||||
filter:{
|
||||
processDefinitionKey: null,
|
||||
name:null,
|
||||
state:'running',
|
||||
sort: 'created-desc'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**schemaColumn**: {any} List of columns to display in the process instances datatable
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
|`schemaColumn`| {any} List of columns to display in the process instances datatable |
|
||||
|
||||
Example:
|
||||
|
||||
@ -122,17 +240,20 @@ process instances are displayed in the list.
|
||||
|
||||
#### Options
|
||||
|
||||
- **`appId`**: Display filters available to the current user for the application with the specified ID
|
||||
- **`appName`**: Display filters available to the current user for the application with the specified name
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `appId` | Display filters available to the current user for the application with the specified ID |
|
||||
| `appName` | Display filters available to the current user for the application with the specified name |
|
||||
|
||||
If both `appId` and `appName` are specified then `appName` will take precedence and `appId` will be ignored.
|
||||
|
||||
#### Events
|
||||
|
||||
- **`onSuccess`**: Emitted when the list of filters hase been successfully loaded from the server
|
||||
- **`onError`**: Emitted when an error occurred fetching the list of process instance filters, or fetching the
|
||||
list of deployed applications when an app name was specified.
|
||||
- **`filterClick`**: Emitted when the user selects a filter from the list
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `onSuccess` | Emitted when the list of filters hase been successfully loaded from the server |
|
||||
| `onError` | Emitted when an error occurs |
|
||||
| `ilterClick` | Emitted when the user selects a filter from the list |
|
||||
|
||||
### Start Process Button component
|
||||
|
||||
@ -145,7 +266,10 @@ to specify some basic details needed to start a new process instance.
|
||||
|
||||
#### Options
|
||||
|
||||
- **`appId`**: Limit the list of processes which can be started to those contained in the specified app
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `appId` | Limit the list of processes which can be started to those contained in the specified app |
|
||||
|
||||
#### Events
|
||||
|
||||
@ -161,12 +285,18 @@ This component displays detailed information on a specified process instance
|
||||
|
||||
#### Options
|
||||
|
||||
- **`processInstanceId`** (required): The numeric ID of the process instance to display
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `processInstanceId` | (required): The numeric ID of the process instance to display |
|
||||
|
||||
#### Events
|
||||
|
||||
- **`processCancelledEmitter`**: Emitted when the current process is cancelled by the user from within the component
|
||||
- **`taskFormCompletedEmitter`**: Emitted when the form associated with an active task is completed from within the component
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `processCancelledEmitter` | Emitted when the current process is cancelled by the user from within the component |
|
||||
| `taskFormCompletedEmitter` | Emitted when the form associated with an active task is completed from within the component |
|
||||
|
||||
### Process Instance Details Header component
|
||||
|
||||
@ -178,11 +308,17 @@ This is a sub-component of the process details component, which renders some gen
|
||||
|
||||
#### Options
|
||||
|
||||
- **`processInstance`** (required): Full details of the process instance to display information about
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `processInstance` | (required): Full details of the process instance to display information about |
|
||||
|
||||
#### Events
|
||||
|
||||
- **`processCancelled`**: Emitted when the Cancel Process button shown by the component is clicked
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `processCancelled` | Emitted when the Cancel Process button shown by the component is clicked |
|
||||
|
||||
### Process Instance Tasks component
|
||||
|
||||
@ -194,12 +330,17 @@ Lists both the active and completed tasks associated with a particular process i
|
||||
|
||||
#### Options
|
||||
|
||||
- **`processInstanceId`** (required): The numeric ID of the process instance to display tasks for
|
||||
- **`showRefreshButton`** (default: `true`): Whether to show a refresh button next to the list of tasks to allow this to be updated from the server
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `processInstanceId` | (required): The numeric ID of the process instance to display tasks for |
|
||||
| `showRefreshButton` | (default: `true`): Whether to show a refresh button next to the list of tasks to allow this to be updated from the server |
|
||||
|
||||
#### Events
|
||||
|
||||
- **`taskFormCompletedEmitter`**: Emitted when the form associated with an active task is completed from within the component
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `taskFormCompletedEmitter` | Emitted when the form associated with an active task is completed from within the component |
|
||||
|
||||
### Process Instance Comments component
|
||||
|
||||
@ -211,7 +352,10 @@ Displays comments associated with a particular process instances and allows the
|
||||
|
||||
#### Options
|
||||
|
||||
- **`processInstanceId`** (required): The numeric ID of the process instance to display comments for
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `processInstanceId` | (required): The numeric ID of the process instance to display comments for |
|
||||
|
||||
#### Events
|
||||
|
||||
@ -221,6 +365,7 @@ No events are emitted by this component
|
||||
|
||||
Alternatively you can build component from sources with the following commands:
|
||||
|
||||
|
||||
```sh
|
||||
npm install
|
||||
npm run build
|
||||
@ -232,7 +377,7 @@ npm run build
|
||||
$ npm run build:w
|
||||
```
|
||||
|
||||
### Running unit tests
|
||||
## Running unit tests
|
||||
|
||||
```sh
|
||||
npm test
|
||||
@ -251,4 +396,18 @@ before performing unit testing.
|
||||
|
||||
```sh
|
||||
npm run coverage
|
||||
```
|
||||
```
|
||||
|
||||
## Demo
|
||||
|
||||
If you want have a demo of how the component works, please check the demo folder :
|
||||
|
||||
```sh
|
||||
cd demo
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -44,26 +44,9 @@
|
||||
"alfresco"
|
||||
],
|
||||
"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",
|
||||
"alfresco-js-api": "^0.3.0",
|
||||
"core-js": "^2.4.1",
|
||||
"ng2-activiti-tasklist": "0.3.3",
|
||||
"ng2-alfresco-core": "0.3.2",
|
||||
"ng2-alfresco-datatable": "0.3.2",
|
||||
"ng2-translate": "2.5.0",
|
||||
"reflect-metadata": "^0.1.3",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.27",
|
||||
"zone.js": "^0.6.23"
|
||||
"ng2-alfresco-datatable": "0.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/core-js": "^0.9.32",
|
||||
|
||||
@ -15,17 +15,18 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
|
||||
import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
|
||||
import { AlfrescoTranslationService } from 'ng2-alfresco-core';
|
||||
import { ObjectDataTableAdapter, DataRowEvent, DataTableAdapter, ObjectDataRow } from 'ng2-alfresco-datatable';
|
||||
import { TaskQueryRequestRepresentationModel } from 'ng2-activiti-tasklist';
|
||||
import { ActivitiProcessService } from '../services/activiti-process.service';
|
||||
import { UserProcessInstanceFilterRepresentationModel, TaskQueryRequestRepresentationModel } from '../models/filter.model';
|
||||
import { UserProcessInstanceFilterRepresentationModel } from '../models/filter.model';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'activiti-process-instance-list',
|
||||
styles: [
|
||||
`
|
||||
`
|
||||
:host h1 {
|
||||
font-size:22px
|
||||
}
|
||||
@ -60,7 +61,7 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges {
|
||||
{type: 'text', key: 'startedBy.email', title: 'Started By', sortable: true}
|
||||
];
|
||||
|
||||
constructor (private processService: ActivitiProcessService, private translate: AlfrescoTranslationService) {
|
||||
constructor(private processService: ActivitiProcessService, private translate: AlfrescoTranslationService) {
|
||||
if (translate !== null) {
|
||||
translate.addTranslationFolder('node_modules/ng2-activiti-processlist/src');
|
||||
}
|
||||
@ -193,11 +194,13 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges {
|
||||
}
|
||||
|
||||
private convertProcessInstanceToTaskQuery(processFilter: UserProcessInstanceFilterRepresentationModel) {
|
||||
let requestNode = {appDefinitionId: processFilter.appId,
|
||||
let requestNode = {
|
||||
appDefinitionId: processFilter.appId,
|
||||
processDefinitionKey: processFilter.filter.processDefinitionKey,
|
||||
text: processFilter.filter.name,
|
||||
state: processFilter.filter.state,
|
||||
sort: processFilter.filter.sort};
|
||||
sort: processFilter.filter.sort
|
||||
};
|
||||
return new TaskQueryRequestRepresentationModel(requestNode);
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,37 +15,6 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/**
|
||||
*
|
||||
* This object represent the app definition.
|
||||
*
|
||||
*
|
||||
* @returns {AppDefinitionRepresentationModel} .
|
||||
*/
|
||||
export class AppDefinitionRepresentationModel {
|
||||
defaultAppId: string;
|
||||
deploymentId: string;
|
||||
name: string;
|
||||
description: string;
|
||||
theme: string;
|
||||
icon: string;
|
||||
id: number;
|
||||
modelId: number;
|
||||
tenantId: number;
|
||||
|
||||
constructor(obj?: any) {
|
||||
this.defaultAppId = obj && obj.defaultAppId || null;
|
||||
this.deploymentId = obj && obj.deploymentId || false;
|
||||
this.name = obj && obj.name || null;
|
||||
this.description = obj && obj.description || null;
|
||||
this.theme = obj && obj.theme || null;
|
||||
this.icon = obj && obj.icon || null;
|
||||
this.id = obj && obj.id;
|
||||
this.modelId = obj && obj.modelId;
|
||||
this.tenantId = obj && obj.tenantId;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* This object represent the filter.
|
||||
@ -108,50 +77,3 @@ export class ProcessInstanceFilterRepresentation extends FilterParamRepresentati
|
||||
super(obj);
|
||||
}
|
||||
}
|
||||
|
||||
export class UserTaskFilterRepresentationModel extends FilterRepresentationModel {
|
||||
public filter: TaskFilterRepresentationModel;
|
||||
constructor(obj?: any) {
|
||||
super(obj);
|
||||
this.filter = new TaskFilterRepresentationModel(obj.filter);
|
||||
}
|
||||
}
|
||||
|
||||
export class TaskFilterRepresentationModel extends FilterParamRepresentationModel {
|
||||
assignment: string;
|
||||
dueAfter: Date;
|
||||
dueBefore: Date;
|
||||
|
||||
constructor(obj?: any) {
|
||||
super(obj);
|
||||
this.assignment = obj && obj.assignment || null;
|
||||
this.dueAfter = obj && obj.dueAfter || null;
|
||||
this.dueBefore = obj && obj.dueBefore || null;
|
||||
}
|
||||
}
|
||||
|
||||
export class TaskQueryRequestRepresentationModel {
|
||||
appDefinitionId: string;
|
||||
processInstanceId: string;
|
||||
processDefinitionId: string;
|
||||
processDefinitionKey: string;
|
||||
text: string;
|
||||
assignment: string;
|
||||
state: string;
|
||||
sort: string;
|
||||
page: number;
|
||||
size: number;
|
||||
|
||||
constructor(obj?: any) {
|
||||
this.appDefinitionId = obj && obj.appDefinitionId || null;
|
||||
this.processInstanceId = obj && obj.processInstanceId || null;
|
||||
this.processDefinitionId = obj && obj.processDefinitionId || null;
|
||||
this.processDefinitionKey = obj && obj.processDefinitionKey || null;
|
||||
this.text = obj && obj.text || null;
|
||||
this.assignment = obj && obj.assignment || null;
|
||||
this.state = obj && obj.state || null;
|
||||
this.sort = obj && obj.sort || null;
|
||||
this.page = obj && obj.page || 0;
|
||||
this.size = obj && obj.size || 25;
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,13 +15,14 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import {AlfrescoAuthenticationService} from 'ng2-alfresco-core';
|
||||
import {ProcessInstance} from '../models/process-instance';
|
||||
import {TaskQueryRequestRepresentationModel, UserProcessInstanceFilterRepresentationModel} from '../models/filter.model';
|
||||
import {User} from '../models/user.model';
|
||||
import {Comment} from '../models/comment.model';
|
||||
import {Injectable} from '@angular/core';
|
||||
import {Observable} from 'rxjs/Observable';
|
||||
import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||
import { ProcessInstance } from '../models/process-instance';
|
||||
import { TaskQueryRequestRepresentationModel } from 'ng2-activiti-tasklist';
|
||||
import { UserProcessInstanceFilterRepresentationModel } from '../models/filter.model';
|
||||
import { User } from '../models/user.model';
|
||||
import { Comment } from '../models/comment.model';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import 'rxjs/add/operator/map';
|
||||
import 'rxjs/add/operator/catch';
|
||||
|
||||
@ -203,7 +204,7 @@ export class ActivitiProcessService {
|
||||
*/
|
||||
addProcessInstanceComment(id: string, message: string): Observable<Comment> {
|
||||
return Observable.fromPromise(
|
||||
this.authService.getAlfrescoApi().activiti.commentsApi.addProcessInstanceComment({message: message}, id)
|
||||
this.authService.getAlfrescoApi().activiti.commentsApi.addProcessInstanceComment({message: message}, id)
|
||||
)
|
||||
.map(res => res)
|
||||
.map((response: Comment) => {
|
||||
|
||||
@ -70,7 +70,7 @@ Also make sure you include these dependencies in your `index.html` file:
|
||||
|
||||
## Basic usage example Activiti Task List
|
||||
The component shows the list of all the tasks filter by the
|
||||
FilterParamModel passed in input.
|
||||
FilterParamRepresentationModel passed in input.
|
||||
```html
|
||||
<activiti-tasklist [taskFilter]="taskFilterModel"></activiti-tasklist>
|
||||
```
|
||||
@ -82,7 +82,7 @@ clicked<br />
|
||||
|
||||
#### Options
|
||||
|
||||
**taskFilter**: { FilterParamModel } required) FilterParamModel object that
|
||||
**taskFilter**: { FilterParamRepresentationModel } required) FilterParamRepresentationModel object that
|
||||
is passed to the task list API to filter the task list.
|
||||
Example:
|
||||
```json
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user