mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-4152] Updated doc folder structure and index tool (#4403)
* [ADF-4152] Initial GraphQL implementation * [ADF-4152] Schema updates * [ADF-4152] Rounded out basic fields * [ADF-4152] Added basic template functionality * [ADF-4152] Added full template generation * [ADF-4152] Moved proc services doc files to new folders * [ADF-4152] Updated README.md with section from new template * [ADF-4152] Fixed another problem with relative URLs * [ADF-4152] Fixed links and some more bugs * [ADF-4152] Removed proc services folder README file
This commit is contained in:
committed by
Eugenio Romano
parent
75b90c5e08
commit
e74f545aa8
89
docs/process-services/components/people-list.component.md
Normal file
89
docs/process-services/components/people-list.component.md
Normal file
@@ -0,0 +1,89 @@
|
||||
---
|
||||
Title: People list component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-14
|
||||
---
|
||||
|
||||
# [People list component](../../../lib/process-services/people/components/people-list/people-list.component.ts "Defined in people-list.component.ts")
|
||||
|
||||
Shows a list of users (people).
|
||||
|
||||

|
||||
|
||||
## Basic Usage
|
||||
|
||||
Populate the users in the component class:
|
||||
|
||||
```ts
|
||||
import { UserProcessModel } from '@alfresco/adf-core';
|
||||
|
||||
export class SomeComponent implements OnInit {
|
||||
|
||||
people: UserProcessModel[] = [
|
||||
{
|
||||
id: 1,
|
||||
email: 'john.doe@alfresco.com',
|
||||
firstName: 'John',
|
||||
lastName: 'Doe'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
email: 'jane.doe@alfresco.com',
|
||||
firstName: 'Jane',
|
||||
lastName: 'Doe'
|
||||
}
|
||||
];
|
||||
|
||||
onClickPeopleRow(user: UserProcessModel) {
|
||||
console.log('Clicked row: ', user);
|
||||
}
|
||||
|
||||
onClickPeopleAction($event: Event) {
|
||||
console.log('Clicked action: ', $event);
|
||||
}
|
||||
```
|
||||
|
||||
You can use column templates with the [people list component](people-list.component.md), since it is based on the
|
||||
[Datatable component](../../core/datatable.component.md):
|
||||
|
||||
<!-- {% raw %} -->
|
||||
|
||||
```html
|
||||
<adf-people-list
|
||||
[users]="people"
|
||||
[actions]="true"
|
||||
(clickRow)="onClickPeopleRow($event)"
|
||||
(clickAction)="onClickPeopleAction($event)">
|
||||
<data-columns>
|
||||
<data-column key="firstName" class="people-pic">
|
||||
<ng-template let-entry="$implicit">
|
||||
{{entry.row.obj.firstName + ' ' + entry.row.obj.lastName}}
|
||||
</ng-template>
|
||||
</data-column>
|
||||
<data-column key="email" class="full-width">
|
||||
<ng-template let-entry="$implicit">
|
||||
<div class="adf-people-email">{{ entry.row.obj.email }}</div>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
</data-columns>
|
||||
</adf-people-list>
|
||||
```
|
||||
|
||||
<!-- {% endraw %} -->
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| actions | `boolean` | false | Toggles whether or not actions should be visible, i.e. the 'Three-Dots' menu. |
|
||||
| users | [`UserProcessModel`](../../core/user-process.model.md)`[]` | | The array of user data used to populate the people list. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| clickAction | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`UserEventModel`](../../../lib/process-services/task-list/models/user-event.model.ts)`>` | Emitted when the user clicks in the 'Three Dots' drop down menu for a row. |
|
||||
| clickRow | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`UserProcessModel`](../../core/user-process.model.md)`>` | Emitted when the user clicks a row in the people list. |
|
Reference in New Issue
Block a user