siva kumar 84dac48d9b [ADF-5031][PeopleCloudComponent] [PeopleCloudComponent] Provide a way to make selected items read-only (not remove) (#5289)
* [DW-1618] Admin App -Application Instances - Able to delete all the admin users in Manage app permissions.

* [ADF-5031] [PeopleCloudComponent] Do not delete selected users completely.

* Added flag for not to remove last chip
* Added unit tests to the changes.

* * Added doc

* * Changed removeLastChip to remove

* * Added readonly strategy
* Removed remove input
* Updated unit tests

* * Added  tooltip
* Hiding remove icon.

* * Fixed unit tests
2019-12-09 10:40:33 +00:00

64 lines
2.9 KiB
Markdown

---
Title: People Cloud Component
Added: v3.0.0
Status: Experimental
Last reviewed: 2019-03-20
---
# [People Cloud Component](../../../lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.ts "Defined in people-cloud.component.ts")
Allows one or more users to be selected (with auto-suggestion) based on the input parameters.
## Basic Usage
```html
<adf-cloud-people
[appName]="'simple-app'"
[mode]="'multiple'">
</adf-cloud-people>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| appName | `string` | | Name of the application. If specified, this shows the users who have access to the app. |
| mode | `string` | | User selection mode (single/multiple). |
| preSelectUsers | [`IdentityUserModel`](../../../lib/core/models/identity-user.model.ts)`[]` | | Array of users to be pre-selected. All users in the array are pre-selected in multi selection mode, but only the first user is pre-selected in single selection mode. Mandatory properties are: id, email, username |
| roles | `string[]` | | Role names of the users to be listed. |
| searchUserCtrl | `FormControl` | new FormControl() | FormControl to search the user |
| title | `string` | | Placeholder translation key |
| validate | `Boolean` | false | This flag enables the validation on the preSelectUsers passed as input. In case the flag is true the components call the [identity service](../../../lib/testing/src/lib/core/actions/identity/identity.service.ts) to verify the validity of the information passed as input. Otherwise, no check will be done. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| removeUser | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`IdentityUserModel`](../../../lib/core/models/identity-user.model.ts)`>` | Emitted when a selected user is removed in multi selection mode. |
| selectUser | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`IdentityUserModel`](../../../lib/core/models/identity-user.model.ts)`>` | Emitted when a user is selected. |
| warning | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an warning occurs. |
## Details
### Read-only
You can use `readonly` property to make preselected users read-only in `multiple` mode.
```ts
const preSelectUsers = [
{ "id": "1", "username": "username1", "firstName": "user 1", "readonly": true },
{ "id": "2", "username": "username2", "firstName": "user 2", "readonly": false },
{ "id": "3", "username": "username3", "firstName": "user 3", "readonly": true }
];
```
```html
<adf-cloud-people
[mode]="'multiple'",
[preSelectUsers]="preSelectUsers">
</adf-cloud-people>
```
from above `preSelectUsers`, `username2` is removable from the `preSelectUsers` whereas `username1`, `username3` are readonly you can not remove them.