diff --git a/docs/process-services-cloud/components/people-cloud.component.md b/docs/process-services-cloud/components/people-cloud.component.md index 3deabad3c04..82b94b0e106 100644 --- a/docs/process-services-cloud/components/people-cloud.component.md +++ b/docs/process-services-cloud/components/people-cloud.component.md @@ -35,6 +35,10 @@ Allows one or more users to be selected (with auto-suggestion) based on the inpu | roles | `string[]` | | Role names of the users to be listed. | | searchUserCtrl | `FormControl` | | FormControl to search the user | | title | `string` | | Placeholder translation key | +| hideInputOnSingleSelection | `boolean` | false | Hide the input field when a user is selected in single selection mode. The input will be shown again when the user is removed using the icon on the chip. | +| formFieldAppearance | [`MatFormFieldAppearance`](https://material.angular.io/components/form-field/api#MatFormFieldAppearance) | "fill" | Material form field appearance (fill / outline). | +| formFieldSubscriptSizing | [`SubscriptSizing`](https://material.angular.io/components/form-field/api#SubscriptSizing) | "fixed" | Material form field subscript sizing (fixed / dynamic). | +| showErrors | `boolean` | true | Show errors under the form field. | | userChipsCtrl | `UntypedFormControl` | | FormControl to list of users | | 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 to verify the validity of the information passed as input. Otherwise, no check will be done. | diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html index 4ed75926824..bb964142faf 100644 --- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html +++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html @@ -1,5 +1,11 @@
- + -
+
error_outline
{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName : validateUsersMessage } }}
diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts index 84343fbb9c0..674e25b3fdd 100644 --- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts @@ -28,7 +28,8 @@ import { OnDestroy, ViewChild, ElementRef, - Inject + Inject, + AfterViewInit } from '@angular/core'; import { BehaviorSubject, Observable, Subject } from 'rxjs'; import { switchMap, debounceTime, distinctUntilChanged, mergeMap, tap, filter, takeUntil } from 'rxjs/operators'; @@ -38,6 +39,7 @@ import { ComponentSelectionMode } from '../../types'; import { IdentityUserModel } from '../models/identity-user.model'; import { IdentityUserServiceInterface } from '../services/identity-user.service.interface'; import { IDENTITY_USER_SERVICE_TOKEN } from '../services/identity-user-service.token'; +import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field'; @Component({ selector: 'adf-cloud-people', @@ -52,7 +54,7 @@ import { IDENTITY_USER_SERVICE_TOKEN } from '../services/identity-user-service.t providers: [FullNamePipe], encapsulation: ViewEncapsulation.None }) -export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy { +export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit { /** Name of the application. If specified, this shows the users who have access to the app. */ @Input() appName: string; @@ -122,6 +124,31 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy { @Input() title: string; + /** + * Hide the matInput associated with the chip grid when a single user is selected in single selection mode. + * The input will be shown again when the user is removed using the icon on the chip. + */ + @Input() + hideInputOnSingleSelection = false; + + /** + * Material form field appearance (fill / outline) + */ + @Input() + formFieldAppearance: MatFormFieldAppearance = 'fill'; + + /** + * Material form field subscript sizing (fixed / dynamic) + */ + @Input() + formFieldSubscriptSizing: SubscriptSizing = 'fixed'; + + /** + * Show errors under the form field + */ + @Input() + showErrors: boolean = true; + /** Emitted when a user is selected. */ @Output() selectUser = new EventEmitter(); @@ -190,6 +217,14 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy { } } + ngAfterViewInit(): void { + if (this.hideInputOnSingleSelection) { + if (this.selectedUsers.length === 1 && this.isSingleMode() && this.userInput) { + this.userInput.nativeElement.style.display = 'none'; + } + } + } + private initSearch(): void { this.initializeStream(); this.typingUniqueValueNotEmpty$ @@ -341,6 +376,9 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy { } else { this.invalidUsers = []; this.selectedUsers = [user]; + if (this.hideInputOnSingleSelection) { + this.userInput.nativeElement.style.display = 'none'; + } } this.userInput.nativeElement.value = ''; @@ -358,6 +396,9 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy { this.changedUsers.emit(this.selectedUsers); if (this.selectedUsers.length === 0) { this.userChipsControlValue(''); + if (this.hideInputOnSingleSelection) { + this.userInput.nativeElement.style.display = 'block'; + } } else { this.userChipsControlValue(this.selectedUsers[0].username); }