search.component.ts 2.43 KB
Newer Older
Exbrayat Cédric's avatar
Exbrayat Cédric committed
1
2
3
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormControl, FormGroup } from '@angular/forms';
4
import { EMPTY, Observable } from 'rxjs';
Exbrayat Cédric's avatar
Exbrayat Cédric committed
5
import { catchError, switchMap } from 'rxjs/operators';
Exbrayat Cédric's avatar
Exbrayat Cédric committed
6
7
8
9
10
11
12
13
14
15
16

import { SearchService } from '../search.service';
import { GeneticResourceModel } from '../models/genetic-resource.model';
import { Page } from '../models/page';

@Component({
  selector: 'rare-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
Exbrayat Cédric's avatar
Exbrayat Cédric committed
17
  query = '';
Exbrayat Cédric's avatar
Exbrayat Cédric committed
18
19
  searchForm: FormGroup;
  results: Page<GeneticResourceModel>;
20
  suggesterTypeahead: (text$: Observable<string>) => Observable<Array<string>>;
Exbrayat Cédric's avatar
Exbrayat Cédric committed
21
22
23
24
25
26
27
28
29
30

  constructor(private route: ActivatedRoute, private router: Router, private searchService: SearchService) {
    this.searchForm = new FormGroup({
      search: new FormControl()
    });
  }

  ngOnInit(): void {
    this.route.queryParamMap
      .pipe(
Exbrayat Cédric's avatar
Exbrayat Cédric committed
31
32
33
34
35
        // extract query parameters
        switchMap(params => {
          this.query = params.get('query');
          // set the search field
          this.searchForm.get('search').setValue(this.query);
Jean-Baptiste Nizet's avatar
Jean-Baptiste Nizet committed
36
          let page = 1;
Exbrayat Cédric's avatar
Exbrayat Cédric committed
37
          if (params.get('page')) {
Jean-Baptiste Nizet's avatar
Jean-Baptiste Nizet committed
38
            page = +params.get('page');
Exbrayat Cédric's avatar
Exbrayat Cédric committed
39
40
          }
          // launch the search
Jean-Baptiste Nizet's avatar
Jean-Baptiste Nizet committed
41
          return this.searchService.search(this.query, page)
Exbrayat Cédric's avatar
Exbrayat Cédric committed
42
43
            .pipe(catchError(() => EMPTY));
        })
Exbrayat Cédric's avatar
Exbrayat Cédric committed
44
45
      )
      .subscribe(results => this.results = results);
46
47

    this.suggesterTypeahead = this.searchService.getSuggesterTypeahead();
Exbrayat Cédric's avatar
Exbrayat Cédric committed
48
49
  }

Jean-Baptiste Nizet's avatar
Jean-Baptiste Nizet committed
50
51
52
53
54
  /**
   * Method called when the user enters a new value in the search field and submits the search form.
   * It uses the new search terms in the form, and asks for the default page (1) for this new query
   */
  newSearch() {
55
    this.results = undefined;
Jean-Baptiste Nizet's avatar
Jean-Baptiste Nizet committed
56
57
58
59
60
61
62
63
64
65
66
67
    this.query = this.searchForm.get('search').value;
    this.search();
  }

  /**
   * Method called when the user navigates to a different page using the pagination. It uses the current query
   * and navigates to the requested page.
   */
  navigateToPage(requestedPage: number) {
    this.search(requestedPage);
  }

68
69
70
71
  collectionSize() {
    return Math.min(this.results.totalElements, this.results.maxResults);
  }

Jean-Baptiste Nizet's avatar
Jean-Baptiste Nizet committed
72
  private search(page?: number) {
Exbrayat Cédric's avatar
Exbrayat Cédric committed
73
74
75
    this.router.navigate(['.'], {
      relativeTo: this.route,
      queryParams: {
Exbrayat Cédric's avatar
Exbrayat Cédric committed
76
        query: this.query,
Jean-Baptiste Nizet's avatar
Jean-Baptiste Nizet committed
77
        page
Exbrayat Cédric's avatar
Exbrayat Cédric committed
78
79
80
81
      }
    });
  }
}