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

import { Observable } from 'rxjs';
import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';

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;

  private states = [
    'Alabama',
    'Alaska',
    'American Samoa',
    'Arizona',
    'Arkansas',
    'California',
    'Colorado',
    'Connecticut',
    'Delaware',
    'District Of Columbia',
    'Federated States Of Micronesia',
    'Florida',
    'Georgia',
    'Guam',
    'Hawaii',
    'Idaho',
    'Illinois',
    'Indiana',
    'Iowa',
    'Kansas',
    'Kentucky',
    'Louisiana',
    'Maine',
    'Marshall Islands',
    'Maryland',
    'Massachusetts',
    'Michigan',
    'Minnesota',
    'Mississippi',
    'Missouri',
    'Montana',
    'Nebraska',
    'Nevada',
    'New Hampshire',
    'New Jersey',
    'New Mexico',
    'New York',
    'North Carolina',
    'North Dakota',
    'Northern Mariana Islands',
    'Ohio',
    'Oklahoma',
    'Oregon',
    'Palau',
    'Pennsylvania',
    'Puerto Rico',
    'Rhode Island',
    'South Carolina',
    'South Dakota',
    'Tennessee',
    'Texas',
    'Utah',
    'Vermont',
    'Virgin Islands',
    'Virginia',
    'Washington',
    'West Virginia',
    'Wisconsin',
    'Wyoming',
  ];

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

  getSelectedTypes(): string[] {
    const result: string[] = [];
    this.typeValues.forEach(type => {
      if (this.paramGroup.queryParams[type].value) result.push(type);
    });
    return result;
  }

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

  /*
  public itemSelected(): void {
          this.searchInputEvent.emit(this.searchInput);
  }
*/
  autoCompleteContributorCreator = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      switchMap(searchText => {
        if (searchText.length <= 2) return [];
        return this.searchService.getContributorCreatorAutoComplete(searchText).pipe(map(ace => ace.map(ac => ac.target)));
      })
    );

  autoCompleteKeyWords = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      switchMap(searchText => this.searchService.getKeywordsAutoComplete(searchText).pipe(map(ace => ace.map(ac => ac.target))))
    );

  autoCompleteProgrammingLanguage = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      switchMap(searchText => this.searchService.getProgrammingLanguageAutoComplete(searchText).pipe(map(ace => ace.map(ac => ac.target))))
    );
}