[ACA-3000][ACA-2999] FE - Provide way to show ContextMenu on Task/Process list (#5596)

* [ACA-3000] FE - Provide way to show ContextMenu on Task list

* * Updated docs

* * Added unit tests to the recent changes
This commit is contained in:
siva kumar
2020-04-14 14:22:57 +05:30
committed by GitHub
parent ecca9220f1
commit 63063699fd
13 changed files with 394 additions and 11 deletions

View File

@@ -73,6 +73,7 @@ when the task list is empty:
| start | `number` | | Starting point of the list within the full set of tasks. |
| state | `string` | | Current state of the process. Possible values are: `completed`, `active`. |
| taskId | `string` | | The id of a task |
| showContextMenu | `boolean` | false | Toggles custom context menu for the component. |
### Events
@@ -82,6 +83,7 @@ when the task list is empty:
| rowClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when a task in the list is clicked |
| rowsSelected | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any[]>` | Emitted when rows are selected/unselected |
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the task list is loaded |
| showRowContextMenu | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`DataCellEvent`](../../../lib/core/datatable/components/datatable/data-cell.event.ts)`>` | Emitted before the context menu is displayed for a row. |
## Details
@@ -228,6 +230,50 @@ typical tasklist:
You can customize the styling of a column and also add features like tooltips and automatic translation of column titles. See the [Data Column component](../../core/components/data-column.component.md) page for more information about these features.
#### showRowContextMenu event
Emitted before the context menu is displayed for a row.
Note that the TaskListComponent itself does not populate the context menu with items.
You can provide all necessary content via the handler.
```html
<adf-tasklist
[contextMenu]="true"
(showRowContextMenu)="onShowRowContextMenu($event)">
</adf-tasklist>
```
Event properties:
```ts
value: {
row: DataRow,
col: DataColumn,
actions: []
}
```
Handler example:
```ts
onShowRowContextMenu(event: DataCellEvent) {
event.value.actions = [
{ title: 'Task List Context Menu' },
{ ... }
]
}
```
![](../../docassets/images/task-list-context-menu.png)
This event is cancellable. You can use `event.preventDefault()` to prevent the default behavior.
The TaskListComponent will automatically render the supplied menu items.
See the [ContextMenu](https://www.npmjs.com/package/ng2-alfresco-core)
documentation for more details on the format and behavior of context actions.
## See also
- [Data column component](../../core/components/data-column.component.md)