mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
Merge pull request #698 from Alfresco/dev-wabson-573
New README for process instance list components
This commit is contained in:
Mario Romano
GitHub
@@ -34,8 +34,8 @@
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-cell mdl-cell--2-col task-column">
|
||||
<span>Process Filters</span>
|
||||
<activiti-start-process [appId]="appId"></activiti-start-process>
|
||||
<activiti-process-filters (filterClick)="onProcessFilterClick($event)"></activiti-process-filters>
|
||||
<activiti-start-process-instance [appId]="appId"></activiti-start-process-instance>
|
||||
<activiti-process-instance-filters (filterClick)="onProcessFilterClick($event)"></activiti-process-instance-filters>
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--3-col task-column">
|
||||
<span>Process List</span>
|
||||
|
||||
@@ -1,101 +1,254 @@
|
||||
# <ng-2-activiti-processlist>
|
||||
[![NPM version][npm-image]][npm-url]
|
||||
[![Build Status][travis-image]][travis-url]
|
||||
[![Dependency Status][daviddm-image]][daviddm-url]
|
||||
[![Coverage percentage][coveralls-image]][coveralls-url]
|
||||
[![Style guide][style-image]][style-url]
|
||||
[![Alfresco component][alfrescocomponent-image]][alfrescocomponent-url]
|
||||
|
||||
## About ng-2-activiti-processlist
|
||||
> Show available processes from the Activiti BPM suite
|
||||
# Activiti Task List Component for Angular 2
|
||||
|
||||
## Installation
|
||||
Displays lists of process instances both active and completed, using any defined process filter, and
|
||||
render details of any chosen instance.
|
||||
|
||||
```bash
|
||||
npm install ng-2-activiti-processlist --save
|
||||
## Prerequisites
|
||||
|
||||
Before you start using this development framework, make sure you have installed all required software and done all the
|
||||
necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
|
||||
|
||||
## Install
|
||||
|
||||
```sh
|
||||
npm install --save ng2-activiti-processlist
|
||||
```
|
||||
|
||||
## Example
|
||||
### Dependencies
|
||||
|
||||
Add the following dependency to your index.html:
|
||||
|
||||
```html
|
||||
<ng-2-activiti-processlist></ng-2-activiti-processlist>
|
||||
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
|
||||
```
|
||||
|
||||
## Reference
|
||||
You must separately install the following libraries for your application:
|
||||
|
||||
Attribute | Options | Default | Description
|
||||
--- | --- | --- | ---
|
||||
`foo` | *string* | `bar` | Lorem ipsum dolor.
|
||||
- [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)
|
||||
|
||||
|
||||
Method | Parameters | Returns | Description
|
||||
--- | --- | --- | ---
|
||||
`methodName()` | None. | void | Lorem ipsum dolor.
|
||||
```sh
|
||||
npm install --save ng2-translate ng2-alfresco-core ng2-alfresco-datatable ng2-activiti-tasklist
|
||||
```
|
||||
|
||||
## Develop command list
|
||||
#### Material Design Lite
|
||||
|
||||
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:
|
||||
|
||||
```sh
|
||||
npm install --save material-design-icons material-design-lite
|
||||
```
|
||||
|
||||
Also make sure you include these dependencies in your `index.html` file:
|
||||
|
||||
```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">
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Activiti Process Instance List
|
||||
|
||||
This component renders a list containing all the process instances matched by the filter specified.
|
||||
|
||||
```html
|
||||
<activiti-process-instance-list [filter]="processFilterModel"></activiti-tasklist>
|
||||
```
|
||||
|
||||
#### Options
|
||||
|
||||
**filter**: { FilterModel } (required) FilterModel object that
|
||||
is passed to the process instance list API to filter the returned list.
|
||||
|
||||
Example:
|
||||
|
||||
|
||||
* To test your component
|
||||
```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
|
||||
}
|
||||
```
|
||||
|
||||
```sh
|
||||
$ npm run test
|
||||
```
|
||||
|
||||
* To run the test in the browser
|
||||
**schemaColumn**: {any} List of columns to display in the process instances datatable
|
||||
|
||||
```sh
|
||||
$ npm run test-browser
|
||||
```
|
||||
Example:
|
||||
|
||||
* To run the test coverage
|
||||
```json
|
||||
[
|
||||
{type: 'text', key: 'id', title: 'Id', sortable: true},
|
||||
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
|
||||
{type: 'text', key: 'started', title: 'Started', sortable: true},
|
||||
{type: 'text', key: 'startedBy.email', title: 'Started By', sortable: true}
|
||||
]
|
||||
```
|
||||
|
||||
```sh
|
||||
$ npm run coverage
|
||||
```
|
||||
|
||||
* To build the component
|
||||
#### Events
|
||||
|
||||
```sh
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
* To build the component and keep watching the changes
|
||||
- **rowClick**: Emitted when a row in the process list is clicked
|
||||
- **onSuccess**: Emitted when the list of process instances has been loaded successfully from the server
|
||||
- **onError**: Emitted when an error is encountered loading the list of process instances from the server
|
||||
|
||||
```sh
|
||||
$ npm run build:w
|
||||
```
|
||||
### Process Filters component
|
||||
|
||||
* To provide a live demo
|
||||
Process filters are a collection of criteria used to filter process instances, which may be customized
|
||||
by users. This component displays a list of available filters and allows the user to select any given
|
||||
filter as the active filter.
|
||||
|
||||
```sh
|
||||
$ cd demo
|
||||
$ npm run start
|
||||
```
|
||||
|
||||
* To clean npm_modules and typings folder
|
||||
The most common usage is in driving a process instance list in order to allow the user to choose which
|
||||
process instances are displayed in the list.
|
||||
|
||||
```sh
|
||||
$ npm run clean
|
||||
```
|
||||
|
||||
## History
|
||||
```html
|
||||
<activiti-process-instance-filters appId="1001"></activiti-process-instance-filters>
|
||||
```
|
||||
|
||||
For detailed changelog, check [Releases](https://github.com/Alfresco/ng-2-activiti-processlist/releases).
|
||||
#### Options
|
||||
|
||||
## Contributors
|
||||
- **`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
|
||||
|
||||
[Contributors](https://github.com/Alfresco/ng-2-activiti-processlist/graphs/contributors)
|
||||
If both `appId` and `appName` are specified then `appName` will take precedence and `appId` will be ignored.
|
||||
|
||||
#### Events
|
||||
|
||||
[npm-image]: https://badge.fury.io/js/ng-2-activiti-processlist.svg
|
||||
[npm-url]: https://npmjs.org/package/ng-2-activiti-processlist
|
||||
[travis-image]: https://travis-ci.org/Alfresco/ng-2-activiti-processlist.svg?branch=master
|
||||
[travis-url]: https://travis-ci.org/Alfresco/ng-2-activiti-processlist
|
||||
[daviddm-image]: https://david-dm.org/Alfresco/ng-2-activiti-processlist.svg?theme=shields.io
|
||||
[daviddm-url]: https://david-dm.org/Alfresco/ng-2-activiti-processlist
|
||||
[coveralls-image]: https://coveralls.io/repos/Alfresco/ng-2-activiti-processlist/badge.svg
|
||||
[coveralls-url]: https://coveralls.io/r/Alfresco/ng-2-activiti-processlist
|
||||
[style-url]: https://github.com/mgechev/angular2-style-guide
|
||||
[style-image]: https://mgechev.github.io/angular2-style-guide/images/badge.svg
|
||||
[alfrescocomponent-image]: https://img.shields.io/badge/Alfresco%20component-approved-green.svg
|
||||
[alfrescocomponent-url]: https://www.alfresco.com
|
||||
- **`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
|
||||
|
||||
### Start Process Button component
|
||||
|
||||
Displays a button which in turn displays a dialog when clicked, allowing the user
|
||||
to specify some basic details needed to start a new process instance.
|
||||
|
||||
```html
|
||||
<activiti-start-process-instance></activiti-start-process-instance>
|
||||
```
|
||||
|
||||
#### Options
|
||||
|
||||
- **`appId`**: Limit the list of processes which can be started to those contained in the specified app
|
||||
|
||||
#### Events
|
||||
|
||||
No events are emitted by this component
|
||||
|
||||
### Process Details component
|
||||
|
||||
This component displays detailed information on a specified process instance
|
||||
|
||||
```html
|
||||
<activiti-process-instance-details processInstanceId="123"></activiti-process-instance-details>
|
||||
```
|
||||
|
||||
#### Options
|
||||
|
||||
- **`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
|
||||
|
||||
### Process Instance Details Header component
|
||||
|
||||
This is a sub-component of the process details component, which renders some general information about the selected process.
|
||||
|
||||
```html
|
||||
<activiti-process-instance-header processInstance="localProcessDetails"></activiti-process-instance-details>
|
||||
```
|
||||
|
||||
#### Options
|
||||
|
||||
- **`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
|
||||
|
||||
### Process Instance Tasks component
|
||||
|
||||
Lists both the active and completed tasks associated with a particular process instance
|
||||
|
||||
```html
|
||||
<activiti-process-instance-tasks processInstanceId="123" showRefreshButton="true"></activiti-process-instance-tasks>
|
||||
```
|
||||
|
||||
#### 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
|
||||
|
||||
#### Events
|
||||
|
||||
- **`taskFormCompletedEmitter`**: Emitted when the form associated with an active task is completed from within the component
|
||||
|
||||
### Process Instance Comments component
|
||||
|
||||
Displays comments associated with a particular process instances and allows the user to add new comments
|
||||
|
||||
```html
|
||||
<activiti-process-instance-comments processInstanceId="123"></activiti-process-instance-comments>
|
||||
```
|
||||
|
||||
#### Options
|
||||
|
||||
- **`processInstanceId`** (required): The numeric ID of the process instance to display comments for
|
||||
|
||||
#### Events
|
||||
|
||||
No events are emitted by this component
|
||||
|
||||
## Build from sources
|
||||
|
||||
Alternatively you can build component from sources with the following commands:
|
||||
|
||||
```sh
|
||||
npm install
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Build the files and keep watching for changes
|
||||
|
||||
```sh
|
||||
$ npm run build:w
|
||||
```
|
||||
|
||||
### Running unit tests
|
||||
|
||||
```sh
|
||||
npm test
|
||||
```
|
||||
|
||||
### Running unit tests in browser
|
||||
|
||||
```sh
|
||||
npm test-browser
|
||||
```
|
||||
|
||||
This task rebuilds all the code, runs tslint, license checks and other quality check tools
|
||||
before performing unit testing.
|
||||
|
||||
### Code coverage
|
||||
|
||||
```sh
|
||||
npm run coverage
|
||||
```
|
||||
@@ -26,7 +26,7 @@ declare let componentHandler: any;
|
||||
declare let __moduleName: string;
|
||||
|
||||
@Component({
|
||||
selector: 'activiti-comments',
|
||||
selector: 'activiti-process-instance-comments',
|
||||
moduleId: __moduleName,
|
||||
templateUrl: './activiti-comments.component.html',
|
||||
styleUrls: ['./activiti-comments.component.css'],
|
||||
@@ -37,7 +37,7 @@ declare let __moduleName: string;
|
||||
export class ActivitiComments implements OnInit {
|
||||
|
||||
@Input()
|
||||
processId: string;
|
||||
processInstanceId: string;
|
||||
|
||||
@ViewChild('dialog')
|
||||
dialog: any;
|
||||
@@ -71,15 +71,15 @@ export class ActivitiComments implements OnInit {
|
||||
this.comments.push(comment);
|
||||
});
|
||||
|
||||
if (this.processId) {
|
||||
this.load(this.processId);
|
||||
if (this.processInstanceId) {
|
||||
this.load(this.processInstanceId);
|
||||
}
|
||||
}
|
||||
|
||||
public load(taskId: string) {
|
||||
this.comments = [];
|
||||
if (this.processId) {
|
||||
this.activitiProcess.getProcessInstanceComments(this.processId).subscribe(
|
||||
if (this.processInstanceId) {
|
||||
this.activitiProcess.getProcessInstanceComments(this.processInstanceId).subscribe(
|
||||
(res: Comment[]) => {
|
||||
res.forEach((comment) => {
|
||||
this.commentObserver.next(comment);
|
||||
@@ -101,7 +101,7 @@ export class ActivitiComments implements OnInit {
|
||||
}
|
||||
|
||||
public add() {
|
||||
this.activitiProcess.addProcessInstanceComment(this.processId, this.message).subscribe(
|
||||
this.activitiProcess.addProcessInstanceComment(this.processInstanceId, this.message).subscribe(
|
||||
(res: Comment) => {
|
||||
this.comments.push(res);
|
||||
this.message = '';
|
||||
|
||||
@@ -26,7 +26,7 @@ declare let componentHandler: any;
|
||||
declare let __moduleName: string;
|
||||
|
||||
@Component({
|
||||
selector: 'activiti-process-filters',
|
||||
selector: 'activiti-process-instance-filters',
|
||||
moduleId: __moduleName,
|
||||
templateUrl: './activiti-filters.component.html',
|
||||
styleUrls: ['activiti-filters.component.css'],
|
||||
|
||||
@@ -4,10 +4,10 @@
|
||||
<activiti-process-instance-header [processInstance]="processInstanceDetails" (processCancelled)="processCancelled()" #activitiprocessheader></activiti-process-instance-header>
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-cell mdl-cell--8-col">
|
||||
<activiti-process-instance-tasks [processId]="processInstanceDetails.id" (taskFormCompleted)="taskFormCompleted()" #activitiprocesstasks></activiti-process-instance-tasks>
|
||||
<activiti-process-instance-tasks [processInstanceId]="processInstanceDetails.id" (taskFormCompleted)="taskFormCompleted()" #activitiprocesstasks></activiti-process-instance-tasks>
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--4-col">
|
||||
<activiti-comments [processId]="processInstanceDetails.id" #activitiprocesscomments></activiti-comments>
|
||||
<activiti-process-instance-comments [processInstanceId]="processInstanceDetails.id" #activitiprocesscomments></activiti-process-instance-comments>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -39,7 +39,7 @@ declare let __moduleName: string;
|
||||
export class ActivitiProcessInstanceTasks implements OnInit {
|
||||
|
||||
@Input()
|
||||
processId: string;
|
||||
processInstanceId: string;
|
||||
|
||||
@Input()
|
||||
showRefreshButton: boolean = true;
|
||||
@@ -93,8 +93,8 @@ export class ActivitiProcessInstanceTasks implements OnInit {
|
||||
this.completedTasks.push(task);
|
||||
});
|
||||
|
||||
if (this.processId) {
|
||||
this.load(this.processId);
|
||||
if (this.processInstanceId) {
|
||||
this.load(this.processInstanceId);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -172,11 +172,11 @@ export class ActivitiProcessInstanceTasks implements OnInit {
|
||||
|
||||
public taskFormCompleted() {
|
||||
this.closeDialog();
|
||||
this.load(this.processId);
|
||||
this.taskFormCompletedEmitter.emit(this.processId);
|
||||
this.load(this.processInstanceId);
|
||||
this.taskFormCompletedEmitter.emit(this.processInstanceId);
|
||||
}
|
||||
|
||||
public onRefreshClicked() {
|
||||
this.load(this.processId);
|
||||
this.load(this.processInstanceId);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@ declare let componentHandler: any;
|
||||
declare let __moduleName: string;
|
||||
|
||||
@Component({
|
||||
selector: 'activiti-start-process',
|
||||
selector: 'activiti-start-process-instance',
|
||||
moduleId: __moduleName,
|
||||
templateUrl: './activiti-start-process.component.html',
|
||||
styleUrls: ['./activiti-start-process.component.css'],
|
||||
|
||||
Reference in New Issue
Block a user