import { Component , Inject , Input , ChangeDetectorRef , OnInit , PLATFORM_ID , EventEmitter , Output , } from '@angular/core' ; import { Location , isPlatformServer } from '@angular/common' ; import { Session } from '../../../services/session' ; import { Client } from '../../../services/api' ; import { RecentService } from '../../../services/ux/recent' ; import { ConfigsService } from '../../../common/services/configs.service' ; @ Component ( { selector : 'm-searchBar__suggestions' , templateUrl : 'suggestions.component.html' , styleUrls : [ 'suggestions.component.ng.scss' ] , } ) export class SearchBarSuggestionsComponent implements OnInit { @ Output ( ) mousedownEvent : EventEmitter < any > = new EventEmitter ( ) ; @ Input ( ) active : boolean ; @ Input ( ) disabled : boolean = false ; q : string = '' ; readonly cdnUrl : string ; private searchTimeout ; recent : Array < any > = [ ] ; suggestions : Array < any > = [ ] ; noResults : boolean = false ; noRecents : boolean = false ; inProgress : boolean = true ; constructor ( public session , public client , public location , public recentService , private cd , @ Inject ( PLATFORM_ID ) private platformId , private configs ) { this . cdnUrl = this . configs . get ( 'cdn_url' ) ; } @ Input ( 'q' ) set _q ( value ) { this . noResults = false ; if ( this . searchTimeout ) { clearTimeout ( this . searchTimeout ) ; this . inProgress = true ; } this . q = value || '' ; if ( isPlatformServer ( this . platformId ) ) return ; if ( ! value ) { this . inProgress = false ; this . loadRecent ( ) ; this . suggestions = [ ] ; return ; } this . searchTimeout = setTimeout ( async ( ) => { this . suggestions = [ ] ; this . inProgress = true ; try { const response = await this . client . get ( 'api/v2/search/suggest' , { q : value , limit : 10 , } ) ; if ( response && response . entities . length ) { this . suggestions = response . entities ; } else { this . noResults = true ; } this . inProgress = false ; } catch ( e ) { console . error ( e ) ; this . inProgress = false ; this . noResults = true ; } } , 300 ) ; } ngOnInit ( ) { this . loadRecent ( ) ; } clearHistory ( ) { this . recentService . clearSuggestions ( ) ; this . recent = [ ] ; this . noRecents = true ; } loadRecent ( ) { if ( ! this . session . getLoggedInUser ( ) ) return ; this . recent = this . recentService . fetchSuggestions ( ) ; } mousedown ( e ) { e . preventDefault ( ) ; this . mousedownEvent . emit ( ) ; setTimeout ( ( ) => { this . active = false ; this . detectChanges ( ) ; } , 300 ) ; } detectChanges ( ) { this . cd . markForCheck ( ) ; this . cd . detectChanges ( ) ; } get hidden ( ) { return ( this . disabled || ! this . active || ( ! this . q && ( ( this . recent && this . recent . length < 1 ) || ! this . recent ) ) ) ; } }