<commit_before># Activiti Task List Component for Angular 2

## Prerequisites

Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).

## Install

```sh
npm install --save ng2-activiti-tasklist
```

### Dependencies

Add the following dependency to your index.html:

```html
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
```

You must separately install the following libraries for your application:

- [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)


```sh
npm install --save ng2-translate ng2-alfresco-core ng2-alfresco-datatable
```

#### 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">
```

## Basic usage example Activiti Task List
The component shows the list of all the tasks filter by the
FilterModel passed in input.
```html
<activiti-tasklist [taskFilter]="taskFilterModel"></activiti-tasklist>
```

#### Events
**onSuccess**: The event is emitted when the task list is loaded
**rowClick**: The event is emitted when the task in the list is
clicked<br />

#### Options

**taskFilter**: { FilterModel } required) FilterModel object that
is passed to the task list API to filter the task list.
Example:
```json
{
	"id": 4,
	"name": "<NAME>",
	"recent": false,
	"icon": "glyphicon-align-left",
	"filter": {
		"appDefinitionId": "1",
		"processDefinitionId": "1533",
		"sort": "created-desc",
		"name": "",
		"state": "open",
		"assignment": "involved",
		"page": "0",
		"size": "25"
	}
}
```
**schemaColumn**: { any[] } optional) JSON object that represent
the number and the type of the columns that you want show
Example:
```json
[
 {type: 'text', key: 'id', title: 'Id'},
 {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
 {type: 'text', key: 'formKey', title: 'Form Key', sortable: true},
 {type: 'text', key: 'created', title: 'Created', sortable: true}
]
```
<commit_msg>Improve doc<commit_after># Activiti Task List Component for Angular 2

## Prerequisites

Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).

## Install

```sh
npm install --save ng2-activiti-tasklist
```

### Dependencies

Add the following dependency to your index.html:

```html
<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>
```

You must separately install the following libraries for your application:

- [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)


```sh
npm install --save ng2-translate ng2-alfresco-core ng2-alfresco-datatable
```

#### 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">
```

## Basic usage example Activiti Task List
The component shows the list of all the tasks filter by the
FilterParamModel passed in input.
```html
<activiti-tasklist [taskFilter]="taskFilterModel"></activiti-tasklist>
```

#### Events
**onSuccess**: The event is emitted when the task list is loaded
**rowClick**: The event is emitted when the task in the list is
clicked<br />

#### Options

**taskFilter**: { FilterParamModel } required) FilterParamModel object that
is passed to the task list API to filter the task list.
Example:
```json
{
	"appDefinitionId": "1",
	"processDefinitionId": "1533",
	"sort": "created-desc",
	"text": "",
	"state": "open",
	"assignment": "involved",
	"page": "0",
	"size": "25"
}
```
**schemaColumn**: { any[] } optional) JSON object that represent
the number and the type of the columns that you want show
Example:
```json
[
 {type: 'text', key: 'id', title: 'Id'},
 {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
 {type: 'text', key: 'formKey', title: 'Form Key', sortable: true},
 {type: 'text', key: 'created', title: 'Created', sortable: true}
]
```

{'fraction_non_alphanumeric': 0.15121951219512195, 'fraction_numerical': 0.007407407407407408, 'mean_word_length': 5.063526834611172, 'pattern_counts': {'":': 21, '<': 24, '<?xml version=': 0, '>': 24, 'https://': 10, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3129726', 'n_tokens_mistral': 1798, 'n_tokens_neox': 1705, 'n_words': 556}