mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-31 17:38:48 +00:00
497 lines
16 KiB
Markdown
497 lines
16 KiB
Markdown
# APS Task List Component
|
|
|
|
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
|
|
|
|
<!-- toc -->
|
|
|
|
- [Prerequisites](#prerequisites)
|
|
- [Install](#install)
|
|
- [Activiti Task List](#activiti-task-list)
|
|
* [DataColumn Properties](#datacolumn-properties)
|
|
* [Events](#events)
|
|
* [Properties](#properties)
|
|
- [Activiti Task Details](#activiti-task-details)
|
|
* [Properties](#properties-1)
|
|
* [Events](#events-1)
|
|
* [Custom 'empty Activiti Task Details' template](#custom-empty-activiti-task-details-template)
|
|
- [Activiti Apps Component](#activiti-apps-component)
|
|
* [Properties](#properties-2)
|
|
* [Events](#events-2)
|
|
* [How filter the activiti apps](#how-filter-the-activiti-apps)
|
|
- [Activiti Filter](#activiti-filter)
|
|
* [Properties](#properties-3)
|
|
* [Events](#events-3)
|
|
* [How filter the activiti task filters](#how-filter-the-activiti-task-filters)
|
|
* [FilterParamsModel](#filterparamsmodel)
|
|
* [How to create an accordion menu with the task filter](#how-to-create-an-accordion-menu-with-the-task-filter)
|
|
- [Activiti Checklist Component](#activiti-checklist-component)
|
|
* [Properties](#properties-4)
|
|
- [Task Attachment List Component](#task-attachment-list-component)
|
|
* [Properties](#properties-5)
|
|
* [Events](#events-4)
|
|
- [Create Task Attachment Component](#create-task-attachment-component)
|
|
* [Properties](#properties-6)
|
|
+ [Events](#events-5)
|
|
- [Activiti Task Header](#activiti-task-header)
|
|
* [Properties](#properties-7)
|
|
* [Events](#events-6)
|
|
- [TaskDetailsModel](#taskdetailsmodel)
|
|
- [Task People Component](#task-people-component)
|
|
* [Properties](#properties-8)
|
|
+ [Events](#events-7)
|
|
- [Build from sources](#build-from-sources)
|
|
- [NPM scripts](#npm-scripts)
|
|
- [Demo](#demo)
|
|
- [License](#license)
|
|
|
|
<!-- tocstop -->
|
|
|
|
<!-- markdown-toc end -->
|
|
|
|
Displays lists of process instances both active and completed, using any defined process filter, and
|
|
render details of any chosen instance.
|
|
|
|
## 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).
|
|
|
|
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: [Using ADF with Angular CLI](https://github.com/Alfresco/alfresco-ng2-components/wiki/Angular-CLI)
|
|
|
|
## Install
|
|
|
|
```sh
|
|
npm install ng2-activiti-tasklist
|
|
```
|
|
|
|
## Activiti Task List
|
|
|
|
This component renders a list containing all the tasks matched by the parameters specified.
|
|
|
|
```html
|
|
<adf-tasklist
|
|
[appId]="'1'"
|
|
[state]="'open'"
|
|
[assignment]="'assignee'">
|
|
</adf-tasklist>
|
|
```
|
|
|
|
You can also use HTML-based schema declaration like shown below:
|
|
|
|
```html
|
|
<adf-tasklist ...>
|
|
<data-columns>
|
|
<data-column key="name" title="NAME" class="full-width name-column"></data-column>
|
|
<data-column key="created" title="Created" class="hidden"></data-column>
|
|
</data-columns>
|
|
</adf-tasklist>
|
|
```
|
|
|
|
### DataColumn Properties
|
|
|
|
Here's the list of available properties you can define for a Data Column definition.
|
|
|
|
| Name | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| key | string | | Data source key, can be either column/property key like `title` or property path like `createdBy.name` |
|
|
| type | string (text\|image\|date) | text | Value type |
|
|
| format | string | | Value format (if supported by components), for example format of the date |
|
|
| sortable | boolean | true | Toggles ability to sort by this column, for example by clicking the column header |
|
|
| title | string | | Display title of the column, typically used for column headers |
|
|
| template | `TemplateRef` | | Custom column template |
|
|
| sr-title | string | | Screen reader title, used for accessibility purposes |
|
|
| class | string | | Additional CSS class to be applied to column (header and cells) |
|
|
|
|
### Events
|
|
|
|
| Name | Description |
|
|
| --- | --- |
|
|
| onSuccess | Raised when the task list is loaded |
|
|
| rowClick | Raised when the task in the list is clicked |
|
|
|
|
### Properties
|
|
|
|
| Name | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| appId | string || The id of the app. |
|
|
| processDefinitionKey | string || The processDefinitionKey of the process. |
|
|
| assignment | string || The assignment of the process. <ul>Possible values are: <li>assignee : where the current user is the assignee</li> <li>candidate: where the current user is a task candidate </li><li>group_x: where the task is assigned to a group where the current user is a member of.</li> <li>no value: where the current user is involved</li> </ul> |
|
|
| state | string || Define state of the processes. Possible values are: `completed`, `active` |
|
|
| hasIcon | boolean | true | Toggle the icon on the left . |
|
|
| landingTaskId | string | | Define which task id should be selected after the reloading. If the task id doesn't exist or nothing is passed it will select the first task |
|
|
| sort | string | | Define the sort of the processes. Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc` |
|
|
| data | DataTableAdapter | | 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}
|
|
]
|
|
```
|
|
|
|
## Activiti Task Details
|
|
|
|
The component shows the details of the task id passed in input
|
|
|
|
```html
|
|
<adf-task-details
|
|
[taskId]="taskId">
|
|
</adf-task-details>
|
|
```
|
|
|
|
### Properties
|
|
|
|
| Name | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| taskId | string | | (**required**) The id of the task details that we are asking for. |
|
|
| showNextTask | boolean | true | Automatically render the next one, when the task is completed. |
|
|
| showFormTitle | boolean | true | Toggle rendering of the form title. |
|
|
| readOnlyForm | boolean | false | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
|
|
| showFormRefreshButton | boolean | true | Toggle rendering of the `Refresh` button. |
|
|
| showFormSaveButton | boolean | true| Toggle rendering of the `Save` outcome button. |
|
|
| showFormCompleteButton | boolean | true | Toggle rendering of the Form `Complete` outcome button |
|
|
| peopleIconImageUrl | string | | Define a custom people icon image |
|
|
| showHeader | boolean | true | Toggle task details Header component |
|
|
| showHeaderContent | boolean | true | Toggle collapsed/expanded state of the Header component |
|
|
| showInvolvePeople | boolean | true | Toggle `Involve People` feature for Header component |
|
|
| showComments | boolean | true | Toggle `Comments` feature for Header component |
|
|
| showChecklist | boolean | true | Toggle `Checklist` feature for Header component |
|
|
|
|
### Events
|
|
|
|
| Name | Description |
|
|
| --- | --- |
|
|
| formLoaded | Raised when form is loaded or reloaded. |
|
|
| formSaved | Raised when form is submitted with `Save` or custom outcomes. |
|
|
| formCompleted | Raised when form is submitted with `Complete` outcome. |
|
|
| taskCreated | Raised when a checklist task is created. |
|
|
| executeOutcome | Raised when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
|
|
| onError | Raised at any error |
|
|
|
|
### Custom 'empty Activiti Task Details' template
|
|
|
|
By default the Activiti Task Details provides the following message for the empty task details:
|
|
|
|
```html
|
|
No Tasks
|
|
```
|
|
|
|
This can be changed by adding the following custom html template:
|
|
|
|
```html
|
|
<adf-task-details [taskId]="taskId">
|
|
<no-task-details-template>
|
|
<template>
|
|
<h1>Sorry, no tasks here</h1>
|
|
<img src="example.jpg">
|
|
</template>
|
|
</no-task-details-template>
|
|
</adf-task-details>
|
|
```
|
|
|
|
Note that can put any HTML content as part of the template, includuing other Angualr components.
|
|
|
|
## Activiti Apps Component
|
|
|
|
The component shows all the available apps.
|
|
|
|
```html
|
|
<adf-apps
|
|
[layoutType]="'GRID'">
|
|
</adf-apps>
|
|
```
|
|
|
|
### Properties
|
|
|
|
| Name | Type | Description |
|
|
| --- | --- | --- |
|
|
| layoutType | string | (**required**) Define the layout of the apps. There are two possible values: GRID or LIST. |
|
|
| filtersAppId | Object | Provide a way to filter the apps to show. |
|
|
|
|
### Events
|
|
|
|
| Name | Description |
|
|
| --- | --- |
|
|
| appClick | Raised when an app entry is clicked |
|
|
|
|
### How filter the activiti apps
|
|
|
|
If you want show some specific apps you can specify them through the filtersAppId parameters
|
|
|
|
```html
|
|
<adf-apps
|
|
[filtersAppId]="'[
|
|
{defaultAppId: 'tasks'},
|
|
{deploymentId: '15037'},
|
|
{name : 'my app name'}]'">
|
|
</adf-apps>
|
|
```
|
|
|
|
In this specific case only the Tasks app, the app with deploymentId 15037 and the app with "my app name" will be showed
|
|
|
|
|
|
You can use inside the filter one of the following property
|
|
|
|
```json
|
|
{
|
|
"defaultAppId": "string",
|
|
"deploymentId": "string",
|
|
"name": "string",
|
|
"id": "number",
|
|
"modelId": "number",
|
|
"tenantId": "number"
|
|
}
|
|
```
|
|
|
|
## Activiti Filter
|
|
|
|
The component shows all the available filters.
|
|
|
|
```html
|
|
<adf-filters></adf-filters>
|
|
```
|
|
|
|
### Properties
|
|
|
|
| Name | Type | Description |
|
|
| --- | --- | --- |
|
|
| filterParam | [FilterParamsModel](#filterparamsmodel) | The params to filter the task filter. If there is no match the default one (first filter of the list) is selected |
|
|
| appId | string | Display filters available to the current user for the application with the specified ID. |
|
|
| `appName` | string | Display filters available to the current user for the application with the specified name. |
|
|
| `hasIcon` | boolean | Toggle to show or not the filter's icon. |
|
|
|
|
If both `appId` and `appName` are specified then `appName` will take precedence and `appId` will be ignored.
|
|
|
|
### Events
|
|
|
|
| Name | Description |
|
|
| --- | --- |
|
|
| filterClick | Raised when the filter in the list is clicked |
|
|
| onSuccess | Raised when the list is loaded |
|
|
| onError | Raised if there is an error during the loading |
|
|
|
|
### How filter the activiti task filters
|
|
|
|
```html
|
|
<adf-filters
|
|
[filterParam]="{name:'My tasks'}">
|
|
</adf-filters>
|
|
|
|
```
|
|
|
|
|
|
You can use inside the filterParam one of the following property.
|
|
|
|
### FilterParamsModel
|
|
|
|
```json
|
|
{
|
|
"id": "number",
|
|
"name": "string",
|
|
"index": "number"
|
|
}
|
|
```
|
|
|
|
| Name | Type | Description |
|
|
| --- | --- | --- |
|
|
| id | string | The id of the task filter |
|
|
| name | string | The name of the task filter, lowercase is checked |
|
|
| index | string | The zero-based position of the filter in the array. |
|
|
|
|
### How to create an accordion menu with the task filter
|
|
|
|
You can create an accordion menu using the AccordionComponent that wrap the activiti task filter.
|
|
The AccordionComponent is exposed by the alfresco-core.
|
|
|
|
```html
|
|
<adf-accordion>
|
|
<adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [headingIcon]="'assignment'">
|
|
<adf-filters
|
|
[appId]="appId"
|
|
[hasIcon]="false"
|
|
(filterClick)="onTaskFilterClick($event)"
|
|
(onSuccess)="onSuccessTaskFilterList($event)"
|
|
#activitifilter>
|
|
</adf-filters>
|
|
</adf-accordion-group>
|
|
</adf-accordion>
|
|
```
|
|
|
|
|
|
|
|
## Activiti Checklist Component
|
|
|
|
The component shows the checklist task functionality.
|
|
|
|
```html
|
|
<adf-checklist
|
|
[readOnly]="false"
|
|
[taskId]="taskId"
|
|
[assignee]="taskAssignee.id"
|
|
</adf-checklist>
|
|
```
|
|
|
|
### Properties
|
|
|
|
| Name | Type | Description |
|
|
| --- | --- | --- |
|
|
| taskId | string | (**required**) The id of the parent task which sub tasks are attached on. |
|
|
| readOnlyForm | boolean | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
|
|
| assignee | string | (**required**) The assignee id where the subtasks are assigned to. |
|
|
|
|
## Task Attachment List Component
|
|
|
|
This component displays attached documents on a specified task
|
|
|
|
```html
|
|
<adf-task-attachment-list
|
|
[taskId]="YOUR_TASK_ID"
|
|
(attachmentClick)="YOUR_HANDLER">
|
|
</adf-task-attachment-list>
|
|
```
|
|
|
|
|
|
### Properties
|
|
|
|
| Name | Type | Description |
|
|
| --- | --- | --- |
|
|
| taskId | string | (**required**): The ID of the task to display |
|
|
|
|
### Events
|
|
|
|
| Name | Description |
|
|
| --- | --- |
|
|
| attachmentClick | Raised when the attachment double clicked or selected view option from context menu by the user from within the component and return a Blob obj of the object clicker|
|
|
| success | Raised when the attachment list fetch all the attach and return a list of attachments |
|
|
| error | Raised when the attachment list is not able to fetch the attachments for example network error |
|
|
|
|
## Create Task Attachment Component
|
|
|
|
This component displays Upload Component(Drag and Click) to upload the attachment to a specified task
|
|
|
|
```html
|
|
<adf-create-task-attachment
|
|
[taskId]="YOUR_TASK_ID"
|
|
(error)="YOUR_CREATE_ATTACHMENT_ERROR_HANDLER"
|
|
(success)="YOUR_CREATE_ATTACHMENT_SUCCESS_HANDLER">
|
|
</adf-create-task-attachment>
|
|
```
|
|
|
|
|
|
|
|
### Properties
|
|
|
|
| Name | Type | Description |
|
|
| --- | --- | --- |
|
|
| taskId | string | (**required**): The numeric ID of the task to display |
|
|
|
|
#### Events
|
|
|
|
| Name | Description |
|
|
| --- | --- |
|
|
| error | Raised when the error occured while creating/uploading the attachment by the user from within the component |
|
|
| success | Raised when the attachement created/uploaded successfully from within the component |
|
|
|
|
## Activiti Task Header
|
|
|
|
The component shows all the information related to a task.
|
|
The purpose of the component is populate the local variable called `properties` (array of CardViewModel), with all the information that we want display.
|
|
|
|
```html
|
|
<adf-task-header
|
|
[taskDetails]="taskDetails">
|
|
</adf-task-header>
|
|
```
|
|
|
|
### Properties
|
|
|
|
| Name | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| taskDetails | [TaskDetailsModel](#taskdetailsmodel) | | (**required**) The task details related to the task. |
|
|
| formName | string | | The name of the form. |
|
|
|
|
|
|
|
|
### Events
|
|
|
|
| Name | Description |
|
|
| --- | --- |
|
|
| claim | Raised when the task is claimed. |
|
|
|
|
## TaskDetailsModel
|
|
|
|
```json
|
|
{
|
|
"id": "string",
|
|
"assignee": "User",
|
|
"dueDate": "data",
|
|
"endDate": "string",
|
|
"description": "string"
|
|
}
|
|
```
|
|
|
|
## Task People Component
|
|
|
|
This component displays involved users to a specified task
|
|
|
|
```html
|
|
<adf-people
|
|
[people]="YOUR_INVOLVED_PEOPLE_LIST"
|
|
[taskId]="YOUR_TASK_ID"
|
|
[readOnly]="YOUR_READ_ONLY_FLAG">
|
|
</adf-people>
|
|
```
|
|
|
|
|
|
|
|
### Properties
|
|
|
|
| Name | Type | Description |
|
|
| --- | --- | --- |
|
|
| people | User[] | The array of User object to display |
|
|
| taskId | string | The numeric ID of the task |
|
|
| readOnly | boolean | The boolean flag |
|
|
|
|
#### Events
|
|
|
|
No Events
|
|
|
|
## Build from sources
|
|
|
|
You can build component from sources with the following commands:
|
|
|
|
```sh
|
|
npm install
|
|
npm run build
|
|
```
|
|
|
|
> The `build` task rebuilds all the code, runs tslint, license checks
|
|
> and other quality check tools before performing unit testing.
|
|
|
|
## NPM scripts
|
|
|
|
| Command | Description |
|
|
| --- | --- |
|
|
| npm run build | Build component |
|
|
| npm run test | Run unit tests in the console |
|
|
| npm run test-browser | Run unit tests in the browser
|
|
| npm run coverage | Run unit tests and display code coverage report |
|
|
|
|
## Demo
|
|
|
|
Please check the demo folder for a demo project
|
|
|
|
```sh
|
|
cd demo
|
|
npm install
|
|
npm start
|
|
```
|
|
|
|
## License
|
|
|
|
[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
|