arditdomi 3c3aa7599a [AAE-1372] Refactor People/Group cloud component (#5355)
* [AAE-1372] Fix read-only preselected users can be deleted

* [AAE-1372] Fix people/group cloud component readonly mode

* [AAE-1372] Refactor People/Group Cloud components

* [AAE-1372] Refactor People/Group Cloud components

* [AAE-1372] Clear invalid user in single mode after replacing with a valid user

* [AAE-1372] Add progress bar while validation loading. When user gets removed remove from validation

* [AAE-1372] Fix lint errors

* [AAE-1372] Fix single selection e2e

* [AAE-1372] Fix unit tests - people/group cloud components

* [AAE-1372] Fix e2e, set People/Group formControls invalid when has preselect errors

* [AAE-1372] Fix invalid form control bug
2020-01-21 13:37:57 +00:00

3.8 KiB

Title, Added, Status, Last reviewed
Title Added Status Last reviewed
Group Cloud component v3.0.0 Experimental 2019-03-20

Group Cloud component

Searches Groups.

Basic Usage

<adf-cloud-group
    [appName]="'simple-app'"
    [mode]="'multiple'">
</adf-cloud-group>

adf-cloud-group

Class members

Properties

Name Type Default value Description
appName string Name of the application. If specified this shows the groups who have access to the app.
readOnly boolean false readOnly mode (true/false).
mode string User selection mode (single/multiple).
preSelectGroups IdentityGroupModel[] [] Array of groups to be pre-selected. This pre-selects all groups in multi selection mode and only the first group of the array in single selection mode.
roles string[] [] Role names of the groups to be listed.
searchGroupsControl FormControl new FormControl() FormControl to search the group
title string Title of the field

Events

Name Type Description
removeGroup EventEmitter<IdentityGroupModel> Emitted when a group is removed.
selectGroup EventEmitter<IdentityGroupModel> Emitted when a group is selected.

Details

Selection Mode

You can specify either single selection or multiple selection (single is the default):

Single selection

<adf-cloud-group></adf-cloud-group>

adf-cloud-group

Multiple selection

<adf-cloud-group
    [mode]="'multiple'">
</adf-cloud-group>

adf-cloud-group

Pre-selection

Usage example:

import { ObjectDataTableAdapter }  from '@alfresco/adf-core';

@Component({...})
export class MyComponent {
    groups: any;

    constructor() {
        this.groups =
            [
                {id: 1, name: 'Group 1'},
                {id: 2, name: 'Group 2'}
            ];
    }
}
<adf-cloud-group
    [mode]="'multiple'"
    [preSelectGroups]="groups">
</adf-cloud-group>

Read-only

You can use readonly property to set the component in readonly mode. Readonly mode will disable any interaction with the component.

<adf-cloud-group
    [appName]="'simple-app'"
    [mode]="'multiple'"
    [preSelectGroups]="groups"
    [readOnly]="true">
</adf-cloud-group>

If you want to manage each group seperately you can set their readonly property at your preference. You need to have component's readonly property set to false. Component's readonly mode overwrites groups level.

You can use readonly property to make preselected groups read-only in multiple mode.

Usage example:

import { ObjectDataTableAdapter }  from '@alfresco/adf-core';

@Component({...})
export class MyComponent {
    groups: any;

    constructor() {
        this.groups =
            [
                {id: 1, name: 'Group 1', readonly: true},
                {id: 2, name: 'Group 2', readonly: false}
            ];
    }
}
<adf-cloud-group
    [mode]="'multiple'"
    [preSelectGroups]="groups">
</adf-cloud-group>

from above preSelectGroups, Group 2 is removable from the preSelectGroups whereas Group 1 is readonly you can not remove them.