diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html index 19de46d0f9..1292a0a30f 100644 --- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html +++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html @@ -34,8 +34,8 @@
Process Filters - - + +
Process List diff --git a/ng2-components/ng2-activiti-processlist/README.md b/ng2-components/ng2-activiti-processlist/README.md index f4c967396b..85227b0a49 100644 --- a/ng2-components/ng2-activiti-processlist/README.md +++ b/ng2-components/ng2-activiti-processlist/README.md @@ -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 - + ``` -## 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 + + + + +``` + +## Usage + +### Activiti Process Instance List + +This component renders a list containing all the process instances matched by the filter specified. + +```html + +``` + +#### 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 + +``` -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 + +``` + +#### 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 + +``` + +#### 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 + +``` + +#### 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 + +``` + +#### 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 + +``` + +#### 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 +``` \ No newline at end of file diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-comments.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-comments.component.ts index 95f1219c92..d8ef814616 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/activiti-comments.component.ts +++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-comments.component.ts @@ -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 = ''; diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.ts index 9032d2f173..a040f8a8f8 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.ts +++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.ts @@ -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'], diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.html b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.html index 741dcabc47..401bd6c011 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.html +++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.html @@ -4,10 +4,10 @@
- +
- +
diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-tasks.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-tasks.component.ts index 5b2cfae098..c0a5f3dab3 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-tasks.component.ts +++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-tasks.component.ts @@ -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); } } diff --git a/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.ts b/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.ts index d51de06c9e..9b852dbd58 100644 --- a/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.ts +++ b/ng2-components/ng2-activiti-processlist/src/components/activiti-start-process.component.ts @@ -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'],