alfresco-ng2-components/demo-shell/src/app/components/cloud/people-groups-cloud-demo.component.html

<mat-card class="app-section">
    <mat-card-title>
        {{ 'APP_LAYOUT.PEOPLE_CLOUD' | translate}}
    </mat-card-title>

    <mat-card-content>
        <br>
        <mat-radio-group (change)="onChangePeopleMode($event)">
            <mat-radio-button checked="true" class="app-people-single-mode" data-automation-id="app-people-single-mode" value="{{ peopleSingleMode }}">{{
                'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
            <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-people-multiple-mode" value="{{ peopleMultipleMode }}">{{
                'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
        </mat-radio-group>
        <div class="app-people-control-options">
            <mat-radio-group (change)="onChangePeopleFilterMode($event)">
                <mat-radio-button checked="true" class="app-people-single-mode" value="appName">{{
                    'PEOPLE_GROUPS_CLOUD.APP_FILTER_MODE' | translate }}</mat-radio-button>
                <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-people-filter-role" value="role">{{
                    'PEOPLE_GROUPS_CLOUD.ROLE_FILTER_MODE' | translate }}</mat-radio-button>
            </mat-radio-group>
            <mat-form-field *ngIf="!isPeopleAppNameSelected()" class="app-preselect-value">
                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ["ACTIVITI_ADMIN", "ACTIVITI_USER"]</mat-label>
                <input matInput (input)="setPeopleRoles($event)" data-automation-id="app-people-roles-input" />
            </mat-form-field>
            <mat-form-field *ngIf="isPeopleAppNameSelected()" class="app-preselect-value">
                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
                <input matInput (input)="setPeopleAppName($event)" data-automation-id="app-people-app-input" />
            </mat-form-field>
            <mat-form-field class="app-preselect-value-full">
                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }} {{ DEFAULT_PEOPLE_PLACEHOLDER }}</mat-label>
                <input matInput (input)="setPeoplePreselectValue($event)"  data-automation-id="app-people-preselect-input" />
            </mat-form-field>
            <mat-checkbox class="app-preselect-value" (change)="onChangePeopleValidation($event)">{{
                'PEOPLE_GROUPS_CLOUD.PRESELECT_VALIDATION' | translate }}</mat-checkbox>
        </div>
        <div>
            <adf-cloud-people
                [preSelectUsers]="preSelectUsers"
                [validate]="peoplePreselectValidation"
                [appName]="peopleAppName"
                [roles]="peopleRoles"
                [title]="'ADF_TASK_LIST.START_TASK.FORM.LABEL.ASSIGNEE'"
                [mode]="peopleMode"
                (selectUser)="onSelectUser($event)"
                (warning)="onUsersWarning($event)"></adf-cloud-people>
        </div>

        <div class="app-people-list" *ngIf="canShowPeopleList()">
            <h4>{{ 'PEOPLE_GROUPS_CLOUD.ALL_SELECTED_USERS' | translate }}</h4>
            <mat-list role="list">
                <mat-list-item *ngFor="let item of preSelectUsers" role="listitem">
                    <mat-icon mat-list-icon>person</mat-icon>
                    {{item | fullName}}
                </mat-list-item>
            </mat-list>

            <div *ngIf="invalidUsers.length > 0">
                <h4>{{ 'PEOPLE_GROUPS_CLOUD.INVALID_USERS' | translate }} <mat-icon>warning</mat-icon> </h4>
                <mat-list role="list">
                    <mat-list-item *ngFor="let invalidUser of invalidUsers" role="listitem">
                        <mat-icon mat-list-icon>person</mat-icon>
                        {{invalidUser | fullName}}
                    </mat-list-item>
                </mat-list>
            </div>
        </div>
    </mat-card-content>
</mat-card>

<mat-card class="app-section">
    <mat-card-title>
        {{ 'APP_LAYOUT.GROUPS_CLOUD' | translate}}
    </mat-card-title>

    <mat-card-content>
        <br>
        <mat-radio-group (change)="onChangeGroupsMode($event)">
            <mat-radio-button checked="true" class="app-people-single-mode" data-automation-id="app-group-single-mode" value="{{ groupSingleMode }}">{{
                'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
            <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-group-multiple-mode" value="{{ groupMultipleMode }}">{{
                'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
        </mat-radio-group>
        <div class="app-groups-control-options">
            <mat-radio-group (change)="onChangeGroupsFilterMode($event)">
                <mat-radio-button checked="true" class="app-people-single-mode" value="appName">{{
                    'PEOPLE_GROUPS_CLOUD.APP_FILTER_MODE' | translate }}</mat-radio-button>
                <mat-radio-button class="app-people-multiple-mode" data-automation-id="app-group-filter-role" value="role">{{
                    'PEOPLE_GROUPS_CLOUD.ROLE_FILTER_MODE' | translate }}</mat-radio-button>
            </mat-radio-group>
            <mat-form-field *ngIf="!isGroupAppNameSelected()" class="app-preselect-value">
                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }} ["ACTIVITI_ADMIN", "ACTIVITI_USER"]</mat-label>
                <input matInput (input)="setGroupRoles($event)" data-automation-id="app-group-roles-input"/>
            </mat-form-field>
            <mat-form-field *ngIf="isGroupAppNameSelected()" class="app-preselect-value">
                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.APP_NAME' | translate }}</mat-label>
                <input matInput (input)="setGroupAppName($event)" data-automation-id="app-group-app-input"/>
            </mat-form-field>
            <mat-form-field class="app-preselect-value-full">
                <mat-label>Preselect: {{ DEFAULT_GROUP_PLACEHOLDER }}</mat-label>
                <input matInput (input)="setGroupsPreselectValue($event)" data-automation-id="app-group-preselect-input" />
            </mat-form-field>
            <mat-checkbox class="app-group-preselect-validation" (change)="onChangeGroupValidation($event)">{{
                'PEOPLE_GROUPS_CLOUD.PRESELECT_VALIDATION' | translate }}</mat-checkbox>
        </div>
        <div>
            <adf-cloud-group
                [mode]="groupMode"
                [validate]="groupPreselectValidation"
                [roles]="groupRoles"
                [appName]="groupAppName"
                [preSelectGroups]="preSelectGroup"
                (selectGroup)="onSelectGroup($event)"
                (removeGroup)="onRemoveGroup($event)"
                (warning)="onGroupsWarning($event)"></adf-cloud-group>
        </div>

        <div class="app-group-list" *ngIf="canShowGroupList()">
            <h4>{{ 'PEOPLE_GROUPS_CLOUD.ALL_SELECTED_GROUPS' | translate }}</h4>
            <mat-list role="list">
                <mat-list-item *ngFor="let item of preSelectGroup" role="listitem">
                    <mat-icon mat-list-icon>group</mat-icon>
                    {{ item.name }}
                </mat-list-item>
            </mat-list>

            <div *ngIf="invalidGroups.length > 0">
                <h4>{{ 'PEOPLE_GROUPS_CLOUD.INVALID_GROUPS' | translate }} <mat-icon>warning</mat-icon> </h4>
                <mat-list role="list">
                    <mat-list-item *ngFor="let invalidGroup of invalidGroups" role="listitem">
                        <mat-icon mat-list-icon>group</mat-icon>
                        {{invalidGroup?.name}}
                    </mat-list-item>
                </mat-list>
            </div>
        </div>
    </mat-card-content>
</mat-card>