inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1549] Added doc files for Tasklist library (#2350)

Browse Source
This commit is contained in:
Andy Stark
2017-09-19 13:37:31 +01:00
committed by Eugenio Romano
parent 7a31a16178
commit a41afe0dbd
25 changed files with 737 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
docs/apps-list.component.md Normal file
View File

@@ -0,0 +1,70 @@
# Activiti Apps Component
Shows all available apps.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [Details](#details)
* [How filter the activiti apps](#how-filter-the-activiti-apps)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```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 |
## Details
### How filter the activiti apps
If you want to 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 shown.
![how-filter-apps](../docassets/images/how-filter-apps.png)
You can use inside the filter one of the following property
```json
{
"defaultAppId": "string",
"deploymentId": "string",
"name": "string",
"id": "number",
"modelId": "number",
"tenantId": "number"
}
```

32
docs/checklist.component.md Normal file
View File

@@ -0,0 +1,32 @@
# Activiti Checklist Component
Shows the checklist task functionality.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```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. |

39
docs/comments.component.md Normal file
View File

@@ -0,0 +1,39 @@
# ADF Comments Component
Displays comments from users involved in a specified task and allows an involved user to add a comment to the task.
![adf-comments](../docassets/images/adf-comments.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```html
<adf-comments
[taskId]="YOUR_TASK_ID"
[readOnly]="YOUR_READ_ONLY_FLAG">
</adf-comments>
```
### Properties
| Name | Type | Description |
| --- | --- | --- |
| taskId | string | The numeric ID of the task |
| readOnly | boolean | The boolean flag |
### Events
| Name | Description |
| --- | --- |
| error | Raised when an error occurs while displaying/adding a comment |

40
docs/create-task-attachment.component.md Normal file
View File

@@ -0,0 +1,40 @@
# Create Task Attachment Component
Displays Upload Component(Drag and Click) to upload the attachment to a specified task
![task-create-attachment](../docassets/images/task-create-attachment.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```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 occurred while creating/uploading the attachment by the user from within the component |
| success | Raised when the attachment created/uploaded successfully from within the component |

50
docs/people-search.component.md Normal file
View File

@@ -0,0 +1,50 @@
# People Search component
Searches users/people.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [Details](#details)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```html
<adf-people-search></adf-people-search>
```
### Properties
| Name | Type | Description |
| --- | --- | --- |
| results | Observable<User[]> | The params to show people list |
### Events
| Name | Description |
| --- | --- |
| searchPeople | Raised when the search people with new keyword |
| success | Raised when select the user and click action button |
| closeSearch | Raised when click the clse button |
## Details
```html
<adf-people-search
(searchPeople)="searchUser($event)"
(success)="involveUser($event)"
(closeSearch)="onCloseSearch()"
[results]="peopleSearch$">
<header-title>{{ 'TASK_DETAILS.LABELS.ADD_PEOPLE' | translate }}</header-title>
<action-button-label>{{ 'PEOPLE.ADD_USER' | translate }}</action-button-label>
</adf-people-search>
```

107
docs/people.component.md Normal file
View File

@@ -0,0 +1,107 @@
# Task People Component
Displays involved users to a specified task
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [Details](#details)
* [How to customize the people component behavior](#how-to-customize-the-people-component-behavior)
* [Involve People single click and close search](#involve-people-single-click-and-close-search)
* [Involve People single click without close search](#involve-people-single-click-without-close-search)
* [Involve People double click and close search](#involve-people-double-click-and-close-search)
* [Involve People double double without close search](#involve-people-double-double-without-close-search)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```html
<adf-people
[people]="YOUR_INVOLVED_PEOPLE_LIST"
[taskId]="YOUR_TASK_ID"
[readOnly]="YOUR_READ_ONLY_FLAG">
</adf-people>
```
![activiti-people](../docassets/images/activiti_people.png)
### 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
## Details
### How to customize the people component behavior
The people component provide two methods to customize the behavior:
- involveUserAndCloseSearch: The selected user is going to be added and the search section closed
- involveUserWithoutCloseSearch: The selected user is going to be added without close the search section
In this way will be easy customize the people component to involve the user with the single or double click event:
### Involve People single click and close search
```html
<adf-people #people
(row-click)="people.involveUserAndCloseSearch()"
[people]="YOUR_INVOLVED_PEOPLE_LIST"
[taskId]="YOUR_TASK_ID"
[readOnly]="YOUR_READ_ONLY_FLAG">
</adf-people>
```
![involve-people-single-click-and-close-search](../docassets/images/involve-people-single-click-and-close-search.gif)
### Involve People single click without close search
```html
<adf-people #people
(row-click)="people.involveUserWithoutCloseSearch()"
[people]="YOUR_INVOLVED_PEOPLE_LIST"
[taskId]="YOUR_TASK_ID"
[readOnly]="YOUR_READ_ONLY_FLAG">
</adf-people>
```
![involve-people-single-click-without-close-search](../docassets/images/involve-people-single-click-without-close-search.gif)
### Involve People double click and close search
```html
<adf-people #people
(row-dblclick)="people.involveUserAndCloseSearch()"
[people]="YOUR_INVOLVED_PEOPLE_LIST"
[taskId]="YOUR_TASK_ID"
[readOnly]="YOUR_READ_ONLY_FLAG">
</adf-people>
```
![involve-people-double-click-and-close-search](../docassets/images/involve-people-double-click-and-close-search.gif)
### Involve People double double without close search
```html
<adf-people #people
(row-dblclick)="people.involveUserWithoutCloseSearch()"
[people]="YOUR_INVOLVED_PEOPLE_LIST"
[taskId]="YOUR_TASK_ID"
[readOnly]="YOUR_READ_ONLY_FLAG">
</adf-people>
```
![involve-people-double-click-without-close-search](../docassets/images/involve-people-double-click-without-close-search.gif)

41
docs/task-attachment-list.component.md Normal file
View File

@@ -0,0 +1,41 @@
# Task Attachment List Component
Displays attached documents on a specified task
![task-attachment-list-sample](../docassets/images/task-attachment-list.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```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 |
| disabled | boolean | false | Disable/Enable read only mode for attachement list |
### 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 |

45
docs/task-audit.directive.md Normal file
View File

@@ -0,0 +1,45 @@
# Task Audit Directive
Provides a way to fetch the Task Audit information in the pdf or json format.
![adf-task-audit-directive](../docassets/images/adf-task-audit-directive.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```html
<button
adf-task-audit
[task-id]="taskId"
[download]="download"
md-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)" >
<md-icon>assignment_ind</md-icon>
</button>
```
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| taskId | string | | (**required**) The id of the task. |
| format | string | pdf | In whitch format you want the task audit information (pdf or json). |
| download | boolean | false | True If you want download the file on the click event. |
| fileName | string | Audit | Represent the name of the file to download in case the format is pdf. |
### Events
| Name | Description |
| --- | --- |
| clicked | Raised when the task audit info is ready |
| error | Raised if there is an error during fetching task information |

80
docs/task-details.component.md Normal file
View File

@@ -0,0 +1,80 @@
# Activiti Task Details component
Shows the details of the task id passed in input
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [Details](#details)
* [Custom 'empty Activiti Task Details' template](#custom-empty-activiti-task-details-template)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```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 |
| fieldValidators | FormFieldValidator[] | [] | Field validators for use with the form. |
### 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 |
## Details
### 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, including other Angular components.

94
docs/task-filters.component.md Normal file
View File

@@ -0,0 +1,94 @@
# Activiti Filter component
Shows all available filters.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [Details](#details)
* [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)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```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 |
## Details
### How filter the activiti task filters
```html
<adf-filters
[filterParam]="{name:'My tasks'}">
</adf-filters>
```
You can use inside the filterParam one of the properties from [FilterParamsModel](#filterparamsmodel) (see below).
### 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>
```
![how-create-accordion-menu](../docassets/images/how-to-create-accordion-menu.png)

43
docs/task-header.component.md Normal file
View File

@@ -0,0 +1,43 @@
# Activiti Task Header component
Shows all the information related to a task.
![adf-task-header](../docassets/images/adf-task-header.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [Details](#details)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```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. |
## Details
The purpose of the component is to populate the local variable called `properties` (array of CardViewModel), with all the information that we want to display.

82
docs/tasklist.component.md Normal file
View File

@@ -0,0 +1,82 @@
# Activiti Task List component
Renders a list containing all the tasks matched by the parameters specified.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [Details](#details)
* [DataTableAdapter example](#datatableadapter-example)
* [DataColumn Features](#datacolumn-features)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```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>
```
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| appId | string || The id of the app. |
| processDefinitionKey | string || The processDefinitionKey of the process. |
| processInstanceId | string || The processInstanceId of the process. |
| page | number | 0 | The page of the tasks to fetch. |
| size | number | 5 | The number of tasks to fetch. |
| 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 (see the [example](#datatableadapter-example) section below) |
### Events
| Name | Description |
| --- | --- |
| onSuccess | Raised when the task list is loaded |
| rowClick | Raised when the task in the list is clicked |
## Details
This component displays lists of process instances both active and completed, using any defined process filter, and
render details of any chosen instance.
### DataTableAdapter 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}
]
```
### DataColumn Features
You can customize the styling of a column and also add features like tooltips and automatic translation of column titles. See the DataColumn docs for more information about these features.