New README for process instance list components

- Renamed components to process-instance-*
 - Renamed ID parameter to processInstanceId

Refs #573

demo-shell-ng2/app/components/activiti/activiti-demo.component.html

@@ -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-start-process-instance [appId]="appId"></activiti-start-process-instance>
-                            <activiti-process-filters (filterClick)="onProcessFilterClick($event)"></activiti-process-filters>
+                            <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>

ng2-components/ng2-activiti-processlist/README.md

@@ -1,101 +1,254 @@
-# <ng-2-activiti-processlist>
+# Activiti Task List Component for Angular 2
-[![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
+Displays lists of process instances both active and completed, using any defined process filter, and 
-> Show available processes from the Activiti BPM suite
+render details of any chosen instance.
 
-## Installation
+## Prerequisites
 
-```bash
+Before you start using this development framework, make sure you have installed all required software and done all the
-npm install ng-2-activiti-processlist --save
+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
+- [ng2-translate](https://github.com/ocombe/ng2-translate)
----           | ---         | ---          | ---
+- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
-`foo`         | *string*    | `bar`        | Lorem ipsum dolor.
+- [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.
-
-## Develop command list 
-
-
-* To test your component
-
 ```sh
-    $ npm run test
+npm install --save ng2-translate ng2-alfresco-core ng2-alfresco-datatable ng2-activiti-tasklist
 ```
 
-* To run the test in the browser
+#### 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 run test-browser
+npm install --save material-design-icons material-design-lite
 ```
 
-* To run the test coverage
+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:
+
+
+```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
+}
+```
+
+**schemaColumn**: {any} List of columns to display in the process instances datatable
+
+Example:
+
+```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}
+]
+```
+
+#### Events
+
+- **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
+
+### Process Filters component
+
+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.
+
+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.
+
+```html
+<activiti-process-instance-filters appId="1001"></activiti-process-instance-filters>
+```
+
+#### 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
+
+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
+
+### 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 run coverage
+npm install
+npm run build
 ```
 
-* To build the component
+### Build the files and keep watching for changes
-
-    ```sh
-    $ npm run build
-    ```
-    
-* To build the component and keep watching the changes
 
 ```sh
 $ npm run build:w
 ```
 
-* To provide a live demo
+### Running unit tests
 
 ```sh
-    $ cd demo
+npm test
-    $ npm run start
 ```
 
-* To clean npm_modules and typings folder
+### Running unit tests in browser
 
 ```sh
-    $ npm run clean
+npm test-browser
 ```
 
-## History
+This task rebuilds all the code, runs tslint, license checks and other quality check tools
+before performing unit testing.
 
-For detailed changelog, check [Releases](https://github.com/Alfresco/ng-2-activiti-processlist/releases).
+### Code coverage
 
-## Contributors
+```sh
-
+npm run coverage
-[Contributors](https://github.com/Alfresco/ng-2-activiti-processlist/graphs/contributors)
+```
-
-
-[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

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) {
+        if (this.processInstanceId) {
-            this.load(this.processId);
+            this.load(this.processInstanceId);
         }
     }
 
     public load(taskId: string) {
         this.comments = [];
-        if (this.processId) {
+        if (this.processInstanceId) {
-            this.activitiProcess.getProcessInstanceComments(this.processId).subscribe(
+            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 = '';

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'],

ng2-components/ng2-activiti-processlist/src/components/activiti-process-instance-details.component.html

@@ -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>

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) {
+        if (this.processInstanceId) {
-            this.load(this.processId);
+            this.load(this.processInstanceId);
         }
     }
 
@@ -172,11 +172,11 @@ export class ActivitiProcessInstanceTasks implements OnInit {
 
     public taskFormCompleted() {
         this.closeDialog();
-        this.load(this.processId);
+        this.load(this.processInstanceId);
-        this.taskFormCompletedEmitter.emit(this.processId);
+        this.taskFormCompletedEmitter.emit(this.processInstanceId);
     }
 
     public onRefreshClicked() {
-        this.load(this.processId);
+        this.load(this.processInstanceId);
     }
 }

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'],