Displays lists of process instances both active and completed, using any defined process filter, and
render details of any chosen instance.
@@ -10,49 +41,68 @@ necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2
## Install
-```sh
-npm install --save ng2-activiti-processlist
-```
+Follow the 3 steps below:
-### Dependencies
+1. Npm
-Add the following dependency to your index.html:
+ ```sh
+ npm install ng2-activiti-processlist --save
+ ```
-```html
-
-```
+2. Html
-You must separately install the following libraries for your application:
+ Include these dependencies in your index.html page:
-- [ng2-translate](https://github.com/ocombe/ng2-translate)
-- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
-- [ng2-alfresco-datatable](https://www.npmjs.com/package/ng2-alfresco-datatable)
-- [ng2-activiti-tasklist](https://www.npmjs.com/package/ng2-activiti-tasklist)
+ ```html
+
+
-```sh
-npm install --save ng2-translate ng2-alfresco-core ng2-alfresco-datatable ng2-activiti-tasklist
-```
+
+
+
+
-#### 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
+ ```
+
+3. SystemJs
+
+ Add the following components to your systemjs.config.js file:
+
+ - ng2-translate
+ - ng2-alfresco-core
+ - ng2-activiti-form
+ - ng2-activiti-tasklist
+ - ng2-alfresco-datatable
+
+ Please refer to the following example file: [systemjs.config.js](demo/systemjs
+ .config.js) .
+
+## Basic usage
### Activiti Process Instance List
@@ -62,33 +112,101 @@ This component renders a list containing all the process instances matched by th
```
+**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: ``
+})
+class MyDemoApp implements OnInit {
+
+ dataProcesses: ObjectDataTableAdapter;
+
+ processInstanceFilterRepresentation: UserProcessInstanceFilterRepresentationModel;
+
+ constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
+ settingsService.bpmHost = 'http://localhost:9999';
+
+ this.authService.login('admin', 'admin').subscribe(
+ ticket => {
+ console.log(ticket);
+ },
+ error => {
+ console.log(error);
+ });
+
+ this.dataProcesses = new ObjectDataTableAdapter([],
+ [
+ {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
+ {type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true}
+ ]
+ );
+ this.dataProcesses.setSorting(new DataSorting('started', 'desc'));
+
+ this.processInstanceFilterRepresentation = new UserProcessInstanceFilterRepresentationModel({
+ appId: '3003',
+ filter: {
+ processDefinitionKey: null,
+ name: null,
+ state: 'running',
+ sort: 'created-desc'
+ }
+ });
+ }
+}
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ CoreModule.forRoot(),
+ ActivitiProcessListModule
+ ],
+ declarations: [MyDemoApp],
+ bootstrap: [MyDemoApp]
+})
+export class AppModule {
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+
+
+```
+
#### Options
-**filter**: { FilterModel } (required) FilterModel object that
-is passed to the process instance list API to filter the returned list.
+| Name | Description |
+| --- | --- |
+|`filter`| { UserProcessInstanceFilterRepresentationModel } (required) UserProcessInstanceFilterRepresentationModel object that is passed to the process instance list API to filter the returned list. |
Example:
```json
{
- "id": 4,
- "name": "Running Processes",
- "recent": false,
- "icon": "glyphicon-align-left",
- "filter": {
- "appDefinitionId": "1",
- "sort": "created-desc",
- "name": "",
- "state": "open",
- "page": "0",
- "size": "25"
- },
- "appId": 1001
+ appId: '3003',
+ filter:{
+ processDefinitionKey: null,
+ name:null,
+ state:'running',
+ sort: 'created-desc'
+ }
}
```
-**schemaColumn**: {any} List of columns to display in the process instances datatable
+| Name | Description |
+| --- | --- |
+|`schemaColumn`| {any} List of columns to display in the process instances datatable |
Example:
@@ -122,17 +240,20 @@ process instances are displayed in the list.
#### Options
-- **`appId`**: Display filters available to the current user for the application with the specified ID
-- **`appName`**: Display filters available to the current user for the application with the specified name
+| Name | Description |
+| --- | --- |
+| `appId` | Display filters available to the current user for the application with the specified ID |
+| `appName` | Display filters available to the current user for the application with the specified name |
If both `appId` and `appName` are specified then `appName` will take precedence and `appId` will be ignored.
#### Events
-- **`onSuccess`**: Emitted when the list of filters hase been successfully loaded from the server
-- **`onError`**: Emitted when an error occurred fetching the list of process instance filters, or fetching the
-list of deployed applications when an app name was specified.
-- **`filterClick`**: Emitted when the user selects a filter from the list
+| Name | Description |
+| --- | --- |
+| `onSuccess` | Emitted when the list of filters hase been successfully loaded from the server |
+| `onError` | Emitted when an error occurs |
+| `ilterClick` | Emitted when the user selects a filter from the list |
### Start Process Button component
@@ -145,7 +266,10 @@ to specify some basic details needed to start a new process instance.
#### Options
-- **`appId`**: Limit the list of processes which can be started to those contained in the specified app
+
+| Name | Description |
+| --- | --- |
+| `appId` | Limit the list of processes which can be started to those contained in the specified app |
#### Events
@@ -161,12 +285,18 @@ This component displays detailed information on a specified process instance
#### Options
-- **`processInstanceId`** (required): The numeric ID of the process instance to display
+
+| Name | Description |
+| --- | --- |
+| `processInstanceId` | (required): The numeric ID of the process instance to display |
#### Events
-- **`processCancelledEmitter`**: Emitted when the current process is cancelled by the user from within the component
-- **`taskFormCompletedEmitter`**: Emitted when the form associated with an active task is completed from within the component
+
+| Name | Description |
+| --- | --- |
+| `processCancelledEmitter` | Emitted when the current process is cancelled by the user from within the component |
+| `taskFormCompletedEmitter` | Emitted when the form associated with an active task is completed from within the component |
### Process Instance Details Header component
@@ -178,11 +308,17 @@ This is a sub-component of the process details component, which renders some gen
#### Options
-- **`processInstance`** (required): Full details of the process instance to display information about
+
+| Name | Description |
+| --- | --- |
+| `processInstance` | (required): Full details of the process instance to display information about |
#### Events
-- **`processCancelled`**: Emitted when the Cancel Process button shown by the component is clicked
+
+| Name | Description |
+| --- | --- |
+| `processCancelled` | Emitted when the Cancel Process button shown by the component is clicked |
### Process Instance Tasks component
@@ -194,12 +330,17 @@ Lists both the active and completed tasks associated with a particular process i
#### Options
-- **`processInstanceId`** (required): The numeric ID of the process instance to display tasks for
-- **`showRefreshButton`** (default: `true`): Whether to show a refresh button next to the list of tasks to allow this to be updated from the server
+
+| Name | Description |
+| --- | --- |
+| `processInstanceId` | (required): The numeric ID of the process instance to display tasks for |
+| `showRefreshButton` | (default: `true`): Whether to show a refresh button next to the list of tasks to allow this to be updated from the server |
#### Events
-- **`taskFormCompletedEmitter`**: Emitted when the form associated with an active task is completed from within the component
+| Name | Description |
+| --- | --- |
+| `taskFormCompletedEmitter` | Emitted when the form associated with an active task is completed from within the component |
### Process Instance Comments component
@@ -211,7 +352,10 @@ Displays comments associated with a particular process instances and allows the
#### Options
-- **`processInstanceId`** (required): The numeric ID of the process instance to display comments for
+
+| Name | Description |
+| --- | --- |
+| `processInstanceId` | (required): The numeric ID of the process instance to display comments for |
#### Events
@@ -221,6 +365,7 @@ No events are emitted by this component
Alternatively you can build component from sources with the following commands:
+
```sh
npm install
npm run build
@@ -232,7 +377,7 @@ npm run build
$ npm run build:w
```
-### Running unit tests
+## Running unit tests
```sh
npm test
@@ -251,4 +396,18 @@ before performing unit testing.
```sh
npm run coverage
-```
\ No newline at end of file
+```
+
+## 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)
diff --git a/ng2-components/ng2-activiti-processlist/demo/index.html b/ng2-components/ng2-activiti-processlist/demo/index.html
index 3394cbf243..64d933f40c 100644
--- a/ng2-components/ng2-activiti-processlist/demo/index.html
+++ b/ng2-components/ng2-activiti-processlist/demo/index.html
@@ -1,34 +1,55 @@
-
-
-
- ng2-activiti-processlist Angular 2
-
+
+
+
+
+ Alfresco Angular 2 Activiti Analytics - Demo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
diff --git a/ng2-components/ng2-activiti-processlist/demo/package.json b/ng2-components/ng2-activiti-processlist/demo/package.json
index 029062ca9d..bdced43f72 100644
--- a/ng2-components/ng2-activiti-processlist/demo/package.json
+++ b/ng2-components/ng2-activiti-processlist/demo/package.json
@@ -6,11 +6,11 @@
"main": "index.js",
"scripts": {
"clean": "npm install rimraf && rimraf dist node_modules typings dist",
- "postinstall": "npm run typings && npm run build",
+ "postinstall": "npm run build",
"start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
"server": "wsrv -o -s -l",
- "build": "npm run tslint && rimraf dist && npm run tsc",
- "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
+ "build": "npm run tslint && rimraf dist && tsc",
+ "build:w": "npm run tslint && rimraf dist && tsc -w",
"tsc": "tsc",
"tsc:w": "tsc -w",
"tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts"
@@ -23,30 +23,7 @@
"demo"
],
"dependencies": {
- "@angular/common": "2.0.0",
- "@angular/compiler": "2.0.0",
- "@angular/core": "2.0.0",
- "@angular/forms": "2.0.0",
- "@angular/http": "2.0.0",
- "@angular/platform-browser": "2.0.0",
- "@angular/platform-browser-dynamic": "2.0.0",
- "@angular/router": "3.0.0",
- "@angular/upgrade": "2.0.0",
- "@types/node": "^6.0.42",
- "core-js": "^2.4.1",
- "reflect-metadata": "^0.1.3",
- "rxjs": "5.0.0-beta.12",
- "systemjs": "0.19.27",
- "zone.js": "^0.6.23",
-
- "material-design-icons": "2.2.3",
- "material-design-lite": "1.2.1",
-
- "alfresco-js-api": "^0.3.0",
- "ng2-alfresco-core": "0.3.2",
- "ng2-alfresco-datatable": "0.3.2",
- "ng2-activiti-processlist": "^0.3.0",
- "ng2-activiti-tasklist": "0.3.3"
+ "ng2-activiti-processlist": "^0.3.0"
},
"devDependencies": {
"@types/core-js": "^0.9.32",
diff --git a/ng2-components/ng2-activiti-processlist/demo/src/main.ts b/ng2-components/ng2-activiti-processlist/demo/src/main.ts
index 930fc783c1..252ab72fcf 100644
--- a/ng2-components/ng2-activiti-processlist/demo/src/main.ts
+++ b/ng2-components/ng2-activiti-processlist/demo/src/main.ts
@@ -12,94 +12,221 @@
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { NgModule, Component, OnInit } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { CoreModule } from 'ng2-alfresco-core';
-import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
-import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
-
-@Component({
- selector: 'alfresco-app-demo',
- template: `
-
-
-
-
- Authentication failed to ip {{ bpmHost }} with user: admin, admin, you can still try to add a valid token to perform
- operations.
-
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+