search-input.component.ts

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");}
			      );

	}

}