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';

@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) {
    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);
  }
}