import { Component, OnDestroy, OnInit, Output, EventEmitter } from '@angular/core'; import { Subject } from 'rxjs'; import { ActivatedRoute, Router } from '@angular/router'; import { QueryParam, QueryParamBuilder, QueryParamGroup } from '@ngqp/core'; import { takeUntil } from 'rxjs/operators'; import { SearchInput } from 'app/shared/model/search-input.model'; import { SearchService } from 'app/search/service/search-service'; import { SearchResultsDTO } from 'app/shared/model/search/search-results-dto.model'; @Component({ selector: 'jhi-search-input', templateUrl: './search-input.component.html', styleUrls: ['./search-input.component.scss'], }) export class SearchInputComponent implements OnInit, OnDestroy { private static DEBOUNCE_TIME = 200; @Output() searchInputEvent = new EventEmitter<SearchInput>(); public pageSize = 4; public paramGroup: QueryParamGroup; private componentDestroyed$ = new Subject<void>(); public searchInput: SearchInput; constructor(protected activatedRoute: ActivatedRoute, private router: Router, private qpb: QueryParamBuilder, private searchService: SearchService, ) { this.searchInput = new SearchInput(); this.paramGroup = qpb.group({ searchText: qpb.stringParam('q', { debounceTime: SearchInputComponent.DEBOUNCE_TIME, emptyOn: '', }), page: qpb.numberParam('page', { emptyOn: 1, }), programmingLanguage: qpb.stringParam('pl', { debounceTime: SearchInputComponent.DEBOUNCE_TIME, emptyOn: '', }), keyword: qpb.stringParam('kw', { debounceTime: SearchInputComponent.DEBOUNCE_TIME, emptyOn: '', }), author: qpb.stringParam('a', { debounceTime: SearchInputComponent.DEBOUNCE_TIME, emptyOn: '', }), license: qpb.stringParam('l', { debounceTime: SearchInputComponent.DEBOUNCE_TIME, emptyOn: '', }), }); this.paramGroup.valueChanges.pipe(takeUntil(this.componentDestroyed$)).subscribe(value => { this.searchInput.setValues(value); this.searchInputEvent.emit(this.searchInput); }); } ngOnInit(): void {} ngOnDestroy(): void { this.componentDestroyed$.next(); this.componentDestroyed$.complete(); } public get pageParam(): QueryParam<number> { return this.paramGroup.get('page') as QueryParam<number>; } public onPageChange(page: number): void { this.pageParam.setValue(page); } searchChanged(): void { const fullTextSearch = this.searchInput.fulltextQuery; this.searchFullText(fullTextSearch); } searchFullText(fullText: string): void { const searchInput = new SearchInput(); searchInput.page=1; // just test for the second page :-) searchInput.fulltextQuery = fullText; this.searchService.searchPageDetails(searchInput) .subscribe( (data: SearchResultsDTO) => { let hits = ""; data.searchResult.forEach(function (hit):void {hits = hits + hit.title + ":" /* + hit.description */ + '\n '}); alert("Success! " + data.hitCount + " hits: Showing " + data.pageStartIndex + "-" + (data.pageStartIndex + data.searchResult.length - 1) + "\n " + hits ); } , () => {alert("Search failed");} ); } }