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/search-input.model';
import { faQuestion } from '@fortawesome/free-solid-svg-icons';

import {IExerciseType } from 'app/shared/model/exercise.model';

interface LooseObject {
    [key: string]: any
}

@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;
  
  typeValues = Object.keys(IExerciseType);
  
  questionIcon = faQuestion;
  public paramGroup: QueryParamGroup;
  private componentDestroyed$ = new Subject<void>();

  public searchInput: SearchInput;

  public showSearchUsage = false;

  constructor(
    protected activatedRoute: ActivatedRoute,
    private router: Router,
    private qpb: QueryParamBuilder // private searchService: SearchService
  ) {
    this.searchInput = new SearchInput();

    const groupDef: LooseObject = {
      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: '',
      }),
    };
    
    // add type checkbox support
    this.typeValues.forEach(
        function(type: string): void {
            const typeName = type.toString();
            groupDef[typeName] = qpb.stringParam(typeName, {
                debounceTime: SearchInputComponent.DEBOUNCE_TIME,
                emptyOn: '',
              });
        }
    );

    this.paramGroup = qpb.group(groupDef);

    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 + ':' + '\n   ';
        });

        alert(
          'Success! ' +
            data.hitCount +
            ' hits: Showing ' +
            data.pageStartIndex +
            '-' +
            (data.pageStartIndex + data.searchResult.length - 1) +
            '\n   ' +
            hits
        );
      },
      () => {
        alert('Search failed');
      }
    );
  } */
}