MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Library | Trunk]: Add autocomplete on input component 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60665 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou 2021-03-18 10:29:54 +00:00
parent 4e7a8cd474
commit 4e00cd1caa
1 changed files with 30 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
sharedComponents/input/input.component.ts
View File

@ -52,6 +52,21 @@ export interface Option {
<input class="uk-input" [placeholder]="placeholder" [formControl]="formControl"> <input class="uk-input" [placeholder]="placeholder" [formControl]="formControl">
</div> </div>
</ng-template> </ng-template>
<ng-template [ngIf]="type === 'autocomplete'">
<div [ngClass]="inputClass"
[class.uk-form-danger]="formControl.invalid && formControl.touched"
[attr.uk-tooltip]="formControl.disabled?'title: This field is not editable; pos: bottom-left':''">
<input class="uk-input"
[placeholder]="placeholder"
[formControl]="formControl"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of autocompleteFilteredList | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</div>
</ng-template>
<ng-template [ngIf]="type === 'textarea'"> <ng-template [ngIf]="type === 'textarea'">
<div [ngClass]="inputClass" class="uk-padding-remove-right" <div [ngClass]="inputClass" class="uk-padding-remove-right"
[class.uk-form-danger]="formControl.invalid && formControl.touched" [class.uk-form-danger]="formControl.invalid && formControl.touched"
@ -141,7 +156,7 @@ export interface Option {
export class InputComponent implements OnInit, OnDestroy, OnChanges { export class InputComponent implements OnInit, OnDestroy, OnChanges {
/** Basic information */ /** Basic information */
@Input('formInput') formControl: AbstractControl; @Input('formInput') formControl: AbstractControl;
@Input('type') type: 'text' | 'URL' | 'logoURL' | 'textarea' | 'select' | 'checkbox' | 'chips' = 'text'; @Input('type') type: 'text' | 'URL' | 'logoURL' | 'autocomplete' | 'textarea' | 'select' | 'checkbox' | 'chips' = 'text';
@Input('label') label: string; @Input('label') label: string;
/** Textarea options */ /** Textarea options */
@Input('rows') rows: number = 3; @Input('rows') rows: number = 3;
@ -178,6 +193,10 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
public filteredOptions: Observable<Option[]>; public filteredOptions: Observable<Option[]>;
public searchControl: FormControl; public searchControl: FormControl;
private subscriptions: any[] = []; private subscriptions: any[] = [];
/** Autocomplete */
@Input()
public autocompleteList: string[] = [];
public autocompleteFilteredList: Observable<string[]>;
@ViewChild('select') select: MatSelect; @ViewChild('select') select: MatSelect;
@ViewChild('searchInput') searchInput: ElementRef; @ViewChild('searchInput') searchInput: ElementRef;
focused: boolean = false; focused: boolean = false;
@ -218,6 +237,11 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
this.filteredOptions = this.searchControl.valueChanges.pipe(startWith(''), this.filteredOptions = this.searchControl.valueChanges.pipe(startWith(''),
map(option => this.filter(option))); map(option => this.filter(option)));
} }
if(this.autocompleteList && this.type === 'autocomplete') {
this.autocompleteFilteredList = of(this.autocompleteList);
this.autocompleteFilteredList = this.formControl.valueChanges.pipe(startWith(''),
map(value => this.simpleFilter(value)));
}
if (this.formControl && this.formControl.validator) { if (this.formControl && this.formControl.validator) {
let validator = this.formControl.validator({} as AbstractControl); let validator = this.formControl.validator({} as AbstractControl);
this.required = (validator && validator.required); this.required = (validator && validator.required);
@ -285,6 +309,11 @@ export class InputComponent implements OnInit, OnDestroy, OnChanges {
return options.filter(option => option.label.toLowerCase().indexOf(filterValue) != -1); return options.filter(option => option.label.toLowerCase().indexOf(filterValue) != -1);
} }
private simpleFilter(value: string): string[] {
const filterValue = value.toLowerCase();
return this.autocompleteList.filter(option => option.toLowerCase().includes(filterValue));
}
add(event: MatChipInputEvent) { add(event: MatChipInputEvent) {
if (this.addExtraChips && event.value) { if (this.addExtraChips && event.value) {
this.stopPropagation(); this.stopPropagation();