80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
import { FormControl } from '@angular/forms';
|
|
import { SearchService, SearchServiceResult } from './../../utils/search-service.interface';
|
|
import { Component, OnInit, Input, forwardRef, EventEmitter, Output } from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'app-search',
|
|
templateUrl: './search.component.html',
|
|
styleUrls: ['./search.component.scss']
|
|
})
|
|
export class SearchComponent implements OnInit {
|
|
|
|
@Input() searchService: SearchService;
|
|
@Output() resultClicked = new EventEmitter<number>();
|
|
|
|
public searchResults: SearchServiceResult[] = [];
|
|
public searchComplete = false;
|
|
|
|
public inputControl: FormControl;
|
|
|
|
public open = false;
|
|
|
|
constructor() { }
|
|
|
|
ngOnInit() {
|
|
this.inputControl = new FormControl('');
|
|
this.inputControl.valueChanges.debounceTime(500).subscribe(() => this.reloadResults());
|
|
}
|
|
|
|
public async reloadResults() {
|
|
if (this.inputControl.value.length === 0) {
|
|
this.searchResults = [];
|
|
this.searchComplete = false;
|
|
return;
|
|
}
|
|
|
|
this.searchComplete = false;
|
|
this.searchResults = await this.searchService.search(this.inputControl.value);
|
|
this.searchComplete = true;
|
|
}
|
|
|
|
public toggleOpen() {
|
|
this.open = !this.open;
|
|
}
|
|
|
|
public onClick(itemId: number) {
|
|
this.inputControl.reset('');
|
|
this.searchResults = [];
|
|
this.searchComplete = false;
|
|
this.open = false;
|
|
this.resultClicked.emit(itemId);
|
|
}
|
|
|
|
public onEnter() {
|
|
if (this.searchResults.length > 0) {
|
|
const itemId = this.searchResults[0].id;
|
|
this.inputControl.reset('');
|
|
this.searchResults = [];
|
|
this.searchComplete = false;
|
|
this.resultClicked.emit(itemId);
|
|
}
|
|
}
|
|
|
|
public onBlur() {
|
|
setTimeout(() => this.open = false, 100);
|
|
}
|
|
|
|
public hintText(): string | null {
|
|
if (this.inputControl.value.length === 0) {
|
|
return 'Type to search...';
|
|
} else if (this.searchComplete && this.searchResults.length === 0) {
|
|
return 'No results found.';
|
|
} else if (!this.searchComplete) {
|
|
return 'Searching...';
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
}
|