import { Component , AfterViewInit , ViewChild , ElementRef } from '@angular/core' ; import { SearchService } from 'src/app/core/services/search.service' ; import { getDefaultSearch , SongSearch } from 'src/electron/shared/interfaces/search.interface' ; @ Component ( { selector : 'app-search-bar' , templateUrl : './search-bar.component.html' , styleUrls : [ './search-bar.component.scss' ] } ) export class SearchBarComponent implements AfterViewInit { @ ViewChild ( 'searchIcon' , { static : true } ) searchIcon : ElementRef ; @ ViewChild ( 'quantityDropdown' , { static : true } ) quantityDropdown : ElementRef ; @ ViewChild ( 'similarityDropdown' , { static : true } ) similarityDropdown : ElementRef ; @ ViewChild ( 'diffSlider' , { static : true } ) diffSlider : ElementRef ; isError = false ; showAdvanced = false ; searchSettings = getDefaultSearch ( ) ; private sliderInitialized = false ; constructor ( public searchService ) { } ngAfterViewInit ( ) { $ ( this . searchIcon . nativeElement ) . popup ( { onShow : ( ) => this . isError } ) ; this . searchService . onSearchErrorStateUpdate ( ( isError ) => { this . isError = isError ; } ) ; $ ( this . quantityDropdown . nativeElement ) . dropdown ( { onChange : ( value ) => { this . searchSettings . quantity = value as 'all' | 'any' ; } } ) ; $ ( this . similarityDropdown . nativeElement ) . dropdown ( { onChange : ( value ) => { this . searchSettings . similarity = value as 'similar' | 'exact' ; } } ) ; } onSearch ( query ) { this . searchSettings . query = query ; this . searchSettings . limit = 50 + 1 ; this . searchSettings . offset = 0 ; this . searchService . newSearch ( this . searchSettings ) ; } onAdvancedSearchClick ( ) { this . showAdvanced = ! this . showAdvanced ; if ( ! this . sliderInitialized ) { setTimeout ( ( ) => { $ ( this . diffSlider . nativeElement ) . slider ( { min : 0 , max : 6 , start : 0 , end : 6 , step : 1 , onChange : ( _length , min , max ) => { this . searchSettings . minDiff = min ; this . searchSettings . maxDiff = max ; } } ) ; } , 50 ) ; this . sliderInitialized = true ; } } isLoading ( ) { return this . searchService . isLoading ( ) ; } }