#7183: Do not query for authors (DMP invitation) until 3 letters have been typed.

1. multiple-auto-complete.component.ts:
   a. Added @Input field minLength (default 0)
   b. In method "_onInputFocus()" filter results, only if query >= minLength.
2. dmp-invitation-dialog.component.html: In <app-multiple-auto-complete>, added property [minLength]="3" (invite users to a DMP).
This commit is contained in:
Konstantina Galouni 2021-11-22 13:36:02 +02:00
parent c0599d5fed
commit 52c7796e8e
3 changed files with 5 additions and 3 deletions

View File

@ -75,6 +75,7 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
get shouldLabelFloat() { return this.focused || !this.empty; } get shouldLabelFloat() { return this.focused || !this.empty; }
@Input() minLength: number = 0;
@Input() showNoResultsLabel: boolean = true; @Input() showNoResultsLabel: boolean = true;
@Input() hidePlaceholder: boolean = false; @Input() hidePlaceholder: boolean = false;
@Input() @Input()
@ -268,7 +269,7 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
distinctUntilChanged(), distinctUntilChanged(),
distinctUntilChanged(), distinctUntilChanged(),
tap(query => this.queryValue = query), tap(query => this.queryValue = query),
switchMap(query => this.filter(query))); switchMap(query => (!this.minLength || (query && query.length >= this.minLength)) ? this.filter(query) : observableOf([])));
if (this.configuration.groupingFn) { this._groupedItems = this._items.pipe(map(items => this.configuration.groupingFn(items))); } if (this.configuration.groupingFn) { this._groupedItems = this._items.pipe(map(items => this.configuration.groupingFn(items))); }
} }

View File

@ -10,7 +10,8 @@
<mat-form-field class="col pt-0 pb-2 mb-4 search"> <mat-form-field class="col pt-0 pb-2 mb-4 search">
<!-- <mat-label>{{'INVITATION-EDITOR.AUTOCOMPLETE-USER-EMAIL' | translate}}</mat-label> --> <!-- <mat-label>{{'INVITATION-EDITOR.AUTOCOMPLETE-USER-EMAIL' | translate}}</mat-label> -->
<app-multiple-auto-complete [formControl]="formGroup.get('users')" placeholder="{{'INVITATION-EDITOR.AUTOCOMPLETE-USER-EMAIL' | translate}}" <app-multiple-auto-complete [formControl]="formGroup.get('users')" placeholder="{{'INVITATION-EDITOR.AUTOCOMPLETE-USER-EMAIL' | translate}}"
[configuration]="usersAutoCompleteConfiguration" [showNoResultsLabel]="false"> [configuration]="usersAutoCompleteConfiguration" [showNoResultsLabel]="false"
[minLength]="3">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</mat-form-field> </mat-form-field>
<p class="d-flex m-0 hint"> <p class="d-flex m-0 hint">