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
|
Displays lists of process instances both active and completed, using any defined process filter, and
|
||||||
render details of any chosen instance.
|
render details of any chosen instance.
|
||||||
@ -10,49 +41,68 @@ necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2
|
|||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
```sh
|
Follow the 3 steps below:
|
||||||
npm install --save ng2-activiti-processlist
|
|
||||||
```
|
|
||||||
|
|
||||||
### Dependencies
|
1. Npm
|
||||||
|
|
||||||
Add the following dependency to your index.html:
|
```sh
|
||||||
|
npm install ng2-activiti-processlist --save
|
||||||
|
```
|
||||||
|
|
||||||
```html
|
2. Html
|
||||||
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
|
|
||||||
```
|
|
||||||
|
|
||||||
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)
|
```html
|
||||||
- [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)
|
|
||||||
|
|
||||||
|
<!-- Moment js -->
|
||||||
|
<script src="node_modules/moment/min/moment.min.js"></script>
|
||||||
|
|
||||||
```sh
|
<!-- Date picker -->
|
||||||
npm install --save ng2-translate ng2-alfresco-core ng2-alfresco-datatable ng2-activiti-tasklist
|
<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
|
<!-- Polyfill(s) for Safari (pre-10.x) -->
|
||||||
design dependency to your project:
|
<script src="node_modules/intl/dist/Intl.min.js"></script>
|
||||||
|
<script src="node_modules/intl/locale-data/jsonp/en.js"></script>
|
||||||
|
|
||||||
```sh
|
<!-- Polyfill(s) for older browsers -->
|
||||||
npm install --save material-design-icons material-design-lite
|
<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
|
<!-- Modules -->
|
||||||
<!-- Google Material Design Lite -->
|
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||||
<link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
|
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||||
<script src="node_modules/material-design-lite/material.min.js"></script>
|
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||||
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
|
|
||||||
```
|
|
||||||
|
|
||||||
## 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
|
### 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>
|
<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
|
#### Options
|
||||||
|
|
||||||
**filter**: { FilterModel } (required) FilterModel object that
|
| Name | Description |
|
||||||
is passed to the process instance list API to filter the returned list.
|
| --- | --- |
|
||||||
|
|`filter`| { UserProcessInstanceFilterRepresentationModel } (required) UserProcessInstanceFilterRepresentationModel object that is passed to the process instance list API to filter the returned list. |
|
||||||
|
|
||||||
Example:
|
Example:
|
||||||
|
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"id": 4,
|
appId: '3003',
|
||||||
"name": "Running Processes",
|
filter:{
|
||||||
"recent": false,
|
processDefinitionKey: null,
|
||||||
"icon": "glyphicon-align-left",
|
name:null,
|
||||||
"filter": {
|
state:'running',
|
||||||
"appDefinitionId": "1",
|
sort: 'created-desc'
|
||||||
"sort": "created-desc",
|
}
|
||||||
"name": "",
|
|
||||||
"state": "open",
|
|
||||||
"page": "0",
|
|
||||||
"size": "25"
|
|
||||||
},
|
|
||||||
"appId": 1001
|
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
**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:
|
Example:
|
||||||
|
|
||||||
@ -122,17 +240,20 @@ process instances are displayed in the list.
|
|||||||
|
|
||||||
#### Options
|
#### Options
|
||||||
|
|
||||||
- **`appId`**: Display filters available to the current user for the application with the specified ID
|
| Name | Description |
|
||||||
- **`appName`**: Display filters available to the current user for the application with the specified name
|
| --- | --- |
|
||||||
|
| `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.
|
If both `appId` and `appName` are specified then `appName` will take precedence and `appId` will be ignored.
|
||||||
|
|
||||||
#### Events
|
#### Events
|
||||||
|
|
||||||
- **`onSuccess`**: Emitted when the list of filters hase been successfully loaded from the server
|
| Name | Description |
|
||||||
- **`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.
|
| `onSuccess` | Emitted when the list of filters hase been successfully loaded from the server |
|
||||||
- **`filterClick`**: Emitted when the user selects a filter from the list
|
| `onError` | Emitted when an error occurs |
|
||||||
|
| `ilterClick` | Emitted when the user selects a filter from the list |
|
||||||
|
|
||||||
### Start Process Button component
|
### Start Process Button component
|
||||||
|
|
||||||
@ -145,7 +266,10 @@ to specify some basic details needed to start a new process instance.
|
|||||||
|
|
||||||
#### Options
|
#### 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
|
#### Events
|
||||||
|
|
||||||
@ -161,12 +285,18 @@ This component displays detailed information on a specified process instance
|
|||||||
|
|
||||||
#### Options
|
#### 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
|
#### 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
|
### Process Instance Details Header component
|
||||||
|
|
||||||
@ -178,11 +308,17 @@ This is a sub-component of the process details component, which renders some gen
|
|||||||
|
|
||||||
#### Options
|
#### 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
|
#### 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
|
### Process Instance Tasks component
|
||||||
|
|
||||||
@ -194,12 +330,17 @@ Lists both the active and completed tasks associated with a particular process i
|
|||||||
|
|
||||||
#### Options
|
#### 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
|
#### 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
|
### Process Instance Comments component
|
||||||
|
|
||||||
@ -211,7 +352,10 @@ Displays comments associated with a particular process instances and allows the
|
|||||||
|
|
||||||
#### Options
|
#### 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
|
#### Events
|
||||||
|
|
||||||
@ -221,6 +365,7 @@ No events are emitted by this component
|
|||||||
|
|
||||||
Alternatively you can build component from sources with the following commands:
|
Alternatively you can build component from sources with the following commands:
|
||||||
|
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm install
|
npm install
|
||||||
npm run build
|
npm run build
|
||||||
@ -232,7 +377,7 @@ npm run build
|
|||||||
$ npm run build:w
|
$ npm run build:w
|
||||||
```
|
```
|
||||||
|
|
||||||
### Running unit tests
|
## Running unit tests
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm test
|
npm test
|
||||||
@ -251,4 +396,18 @@ before performing unit testing.
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm run coverage
|
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>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>ng2-activiti-processlist Angular 2</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<base href="/">
|
<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 -->
|
<body>
|
||||||
<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 older browsers -->
|
<alfresco-app-demo></alfresco-app-demo>
|
||||||
<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>
|
|
||||||
|
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -6,11 +6,11 @@
|
|||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"clean": "npm install rimraf && rimraf dist node_modules typings dist",
|
"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\" ",
|
"start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
|
||||||
"server": "wsrv -o -s -l",
|
"server": "wsrv -o -s -l",
|
||||||
"build": "npm run tslint && rimraf dist && npm run tsc",
|
"build": "npm run tslint && rimraf dist && tsc",
|
||||||
"build:w": "npm run tslint && rimraf dist && npm run tsc:w",
|
"build:w": "npm run tslint && rimraf dist && tsc -w",
|
||||||
"tsc": "tsc",
|
"tsc": "tsc",
|
||||||
"tsc:w": "tsc -w",
|
"tsc:w": "tsc -w",
|
||||||
"tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts"
|
"tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts"
|
||||||
@ -23,30 +23,7 @@
|
|||||||
"demo"
|
"demo"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@angular/common": "2.0.0",
|
"ng2-activiti-processlist": "^0.3.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"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/core-js": "^0.9.32",
|
"@types/core-js": "^0.9.32",
|
||||||
|
|||||||
@ -12,94 +12,221 @@
|
|||||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
* See the License for the specific language governing permissions and
|
* See the License for the specific language governing permissions and
|
||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { NgModule, Component, OnInit } 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 { CoreModule } from 'ng2-alfresco-core';
|
import { CoreModule } from 'ng2-alfresco-core';
|
||||||
import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
|
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';
|
||||||
@Component({
|
|
||||||
selector: 'alfresco-app-demo',
|
@Component({
|
||||||
template: `<label for="token"><b>Insert a valid access token / ticket:</b></label><br>
|
selector: 'alfresco-app-demo',
|
||||||
<input id="token" type="text" size="48" (change)="updateToken();documentList.reload()" [(ngModel)]="token"><br>
|
template: `
|
||||||
<label for="token"><b>Insert the ip of your Alfresco instance:</b></label><br>
|
<label for="ticket"><b>Insert a valid ticket:</b></label><br>
|
||||||
<input id="token" type="text" size="48" (change)="updateHost();documentList.reload()" [(ngModel)]="bpmHost"><br><br>
|
<input id="ticket" type="text" size="48" (change)="updateTicket()" [(ngModel)]="ticket"><br>
|
||||||
<div *ngIf="!authenticated" style="color:#FF2323">
|
<label for="host"><b>Insert the ip of your Activiti instance:</b></label><br>
|
||||||
Authentication failed to ip {{ bpmHost }} with user: admin, admin, you can still try to add a valid token to perform
|
<input id="host" type="text" size="48" (change)="updateHost()" [(ngModel)]="host"><br><br>
|
||||||
operations.
|
<div *ngIf="!authenticated" style="color:#FF2323">
|
||||||
</div>
|
Authentication failed to ip {{ host }} with user: admin, admin, you can still try to add a valid ticket to perform
|
||||||
<hr>
|
operations.
|
||||||
<label for="token"><b>Insert a scriptPath</b></label><br>
|
</div>
|
||||||
<input id="token" type="text" size="48" [(ngModel)]="scriptPath"><br>
|
<hr>
|
||||||
<label for="token"><b>Insert a contextRoot</b></label><br>
|
|
||||||
<input id="token" type="text" size="48" [(ngModel)]="contextRoot"><br>
|
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||||
<label for="token"><b>Insert a servicePath</b></label><br>
|
|
||||||
<input id="token" type="text" size="48" [(ngModel)]="servicePath"><br>
|
<header class="mdl-layout__header">
|
||||||
<div class="container" *ngIf="authenticated">
|
|
||||||
<activiti-process-instance-list></activiti-process-instance-list>
|
<!-- TABS -->
|
||||||
</div>`
|
|
||||||
})
|
<div class="mdl-layout__tab-bar mdl-js-ripple-effect" #tabheader>
|
||||||
class MyDemoApp implements OnInit {
|
<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>
|
||||||
authenticated: boolean;
|
</div>
|
||||||
bpmHost: string = 'http://127.0.0.1:9999';
|
</header>
|
||||||
token: string;
|
|
||||||
|
<main class="mdl-layout__content activiti" #tabmain>
|
||||||
constructor(
|
|
||||||
private authService: AlfrescoAuthenticationService,
|
<!-- APPPS COMPONENT -->
|
||||||
private settingsService: AlfrescoSettingsService
|
|
||||||
) {
|
<section class="mdl-layout__tab-panel is-active" id="apps">
|
||||||
console.log('constructor');
|
<div class="page-content">
|
||||||
|
<activiti-apps [layoutType]="'GRID'" (appClick)="onAppClick($event)" #activitiapps></activiti-apps>
|
||||||
settingsService.setProviders('BPM');
|
</div>
|
||||||
settingsService.bpmHost = this.bpmHost;
|
</section>
|
||||||
|
|
||||||
if (this.authService.getTicketBpm()) {
|
<!-- PROCESS COMPONENT -->
|
||||||
this.token = this.authService.getTicketBpm();
|
|
||||||
}
|
<section class="mdl-layout__tab-panel" id="processes">
|
||||||
}
|
<div class="page-content">
|
||||||
|
<div class="page-content">
|
||||||
ngOnInit() {
|
<div class="mdl-grid">
|
||||||
this.login();
|
<div class="mdl-cell mdl-cell--2-col task-column">
|
||||||
}
|
<span>Process Filters</span>
|
||||||
|
<activiti-start-process-instance [appId]="appId"></activiti-start-process-instance>
|
||||||
public updateToken(): void {
|
<activiti-process-instance-filters
|
||||||
localStorage.setItem('token', this.token);
|
[appId]="appId"
|
||||||
}
|
(filterClick)="onProcessFilterClick($event)"
|
||||||
|
(onSuccess)="onSuccessProcessFilterList($event)"
|
||||||
public updateHost(): void {
|
#activitiprocessfilter></activiti-process-instance-filters>
|
||||||
this.settingsService.bpmHost = this.bpmHost;
|
</div>
|
||||||
this.login();
|
<div class="mdl-cell mdl-cell--3-col task-column">
|
||||||
}
|
<span>Process List</span>
|
||||||
|
<activiti-process-instance-list
|
||||||
login() {
|
[filter]="processFilter"
|
||||||
this.authService.login('admin', 'admin').subscribe(
|
[data]="dataProcesses"
|
||||||
token => {
|
(rowClick)="onProcessRowClick($event)"
|
||||||
console.log(token);
|
(onSuccess)="onSuccessProcessList($event)"
|
||||||
this.token = token;
|
#activitiprocesslist></activiti-process-instance-list>
|
||||||
this.authenticated = true;
|
</div>
|
||||||
},
|
<div class="mdl-cell mdl-cell--7-col task-column">
|
||||||
error => {
|
<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);
|
console.log(error);
|
||||||
this.authenticated = false;
|
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({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
CoreModule.forRoot(),
|
CoreModule.forRoot(),
|
||||||
ActivitiProcessListModule
|
ActivitiProcessListModule,
|
||||||
|
ActivitiTaskListModule.forRoot()
|
||||||
],
|
],
|
||||||
declarations: [ MyDemoApp ],
|
declarations: [MyDemoApp],
|
||||||
bootstrap: [ MyDemoApp ]
|
bootstrap: [MyDemoApp]
|
||||||
})
|
})
|
||||||
export class AppModule { }
|
export class AppModule {
|
||||||
|
}
|
||||||
|
|
||||||
platformBrowserDynamic().bootstrapModule(AppModule);
|
platformBrowserDynamic().bootstrapModule(AppModule);
|
||||||
|
|||||||
@ -27,7 +27,9 @@
|
|||||||
'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-alfresco-datatable': 'npm:ng2-alfresco-datatable/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 tells the System loader how to load when no filename and/or no extension
|
||||||
packages: {
|
packages: {
|
||||||
@ -42,7 +44,9 @@
|
|||||||
'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-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);
|
})(this);
|
||||||
|
|||||||
@ -44,26 +44,9 @@
|
|||||||
"alfresco"
|
"alfresco"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"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-activiti-tasklist": "0.3.3",
|
||||||
"ng2-alfresco-core": "0.3.2",
|
"ng2-alfresco-core": "0.3.2",
|
||||||
"ng2-alfresco-datatable": "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"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/core-js": "^0.9.32",
|
"@types/core-js": "^0.9.32",
|
||||||
|
|||||||
@ -15,17 +15,18 @@
|
|||||||
* limitations under the License.
|
* 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 { AlfrescoTranslationService } from 'ng2-alfresco-core';
|
||||||
import { ObjectDataTableAdapter, DataRowEvent, DataTableAdapter, ObjectDataRow } from 'ng2-alfresco-datatable';
|
import { ObjectDataTableAdapter, DataRowEvent, DataTableAdapter, ObjectDataRow } from 'ng2-alfresco-datatable';
|
||||||
|
import { TaskQueryRequestRepresentationModel } from 'ng2-activiti-tasklist';
|
||||||
import { ActivitiProcessService } from '../services/activiti-process.service';
|
import { ActivitiProcessService } from '../services/activiti-process.service';
|
||||||
import { UserProcessInstanceFilterRepresentationModel, TaskQueryRequestRepresentationModel } from '../models/filter.model';
|
import { UserProcessInstanceFilterRepresentationModel } from '../models/filter.model';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
moduleId: module.id,
|
moduleId: module.id,
|
||||||
selector: 'activiti-process-instance-list',
|
selector: 'activiti-process-instance-list',
|
||||||
styles: [
|
styles: [
|
||||||
`
|
`
|
||||||
:host h1 {
|
:host h1 {
|
||||||
font-size:22px
|
font-size:22px
|
||||||
}
|
}
|
||||||
@ -60,7 +61,7 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges {
|
|||||||
{type: 'text', key: 'startedBy.email', title: 'Started By', sortable: true}
|
{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) {
|
if (translate !== null) {
|
||||||
translate.addTranslationFolder('node_modules/ng2-activiti-processlist/src');
|
translate.addTranslationFolder('node_modules/ng2-activiti-processlist/src');
|
||||||
}
|
}
|
||||||
@ -193,11 +194,13 @@ export class ActivitiProcessInstanceListComponent implements OnInit, OnChanges {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private convertProcessInstanceToTaskQuery(processFilter: UserProcessInstanceFilterRepresentationModel) {
|
private convertProcessInstanceToTaskQuery(processFilter: UserProcessInstanceFilterRepresentationModel) {
|
||||||
let requestNode = {appDefinitionId: processFilter.appId,
|
let requestNode = {
|
||||||
|
appDefinitionId: processFilter.appId,
|
||||||
processDefinitionKey: processFilter.filter.processDefinitionKey,
|
processDefinitionKey: processFilter.filter.processDefinitionKey,
|
||||||
text: processFilter.filter.name,
|
text: processFilter.filter.name,
|
||||||
state: processFilter.filter.state,
|
state: processFilter.filter.state,
|
||||||
sort: processFilter.filter.sort};
|
sort: processFilter.filter.sort
|
||||||
|
};
|
||||||
return new TaskQueryRequestRepresentationModel(requestNode);
|
return new TaskQueryRequestRepresentationModel(requestNode);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,37 +15,6 @@
|
|||||||
* limitations under the License.
|
* 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.
|
* This object represent the filter.
|
||||||
@ -108,50 +77,3 @@ export class ProcessInstanceFilterRepresentation extends FilterParamRepresentati
|
|||||||
super(obj);
|
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.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import {AlfrescoAuthenticationService} from 'ng2-alfresco-core';
|
import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
|
||||||
import {ProcessInstance} from '../models/process-instance';
|
import { ProcessInstance } from '../models/process-instance';
|
||||||
import {TaskQueryRequestRepresentationModel, UserProcessInstanceFilterRepresentationModel} from '../models/filter.model';
|
import { TaskQueryRequestRepresentationModel } from 'ng2-activiti-tasklist';
|
||||||
import {User} from '../models/user.model';
|
import { UserProcessInstanceFilterRepresentationModel } from '../models/filter.model';
|
||||||
import {Comment} from '../models/comment.model';
|
import { User } from '../models/user.model';
|
||||||
import {Injectable} from '@angular/core';
|
import { Comment } from '../models/comment.model';
|
||||||
import {Observable} from 'rxjs/Observable';
|
import { Injectable } from '@angular/core';
|
||||||
|
import { Observable } from 'rxjs/Observable';
|
||||||
import 'rxjs/add/operator/map';
|
import 'rxjs/add/operator/map';
|
||||||
import 'rxjs/add/operator/catch';
|
import 'rxjs/add/operator/catch';
|
||||||
|
|
||||||
@ -203,7 +204,7 @@ export class ActivitiProcessService {
|
|||||||
*/
|
*/
|
||||||
addProcessInstanceComment(id: string, message: string): Observable<Comment> {
|
addProcessInstanceComment(id: string, message: string): Observable<Comment> {
|
||||||
return Observable.fromPromise(
|
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(res => res)
|
||||||
.map((response: Comment) => {
|
.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
|
## Basic usage example Activiti Task List
|
||||||
The component shows the list of all the tasks filter by the
|
The component shows the list of all the tasks filter by the
|
||||||
FilterParamModel passed in input.
|
FilterParamRepresentationModel passed in input.
|
||||||
```html
|
```html
|
||||||
<activiti-tasklist [taskFilter]="taskFilterModel"></activiti-tasklist>
|
<activiti-tasklist [taskFilter]="taskFilterModel"></activiti-tasklist>
|
||||||
```
|
```
|
||||||
@ -82,7 +82,7 @@ clicked<br />
|
|||||||
|
|
||||||
#### Options
|
#### 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.
|
is passed to the task list API to filter the task list.
|
||||||
Example:
|
Example:
|
||||||
```json
|
```json
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user