All files / src/app/shared/components/search/search-box search-box.component.ts

52.77% Statements 19/36
45.45% Branches 10/22
41.66% Functions 5/12
51.42% Lines 18/35

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 1083x 3x 3x   3x 3x   3x 3x   3x                                 3x             8x   8x     8x   8x     7x         8x   8x     8x     8x                                                                                                    
import { ChangeDetectionStrategy, Component, DestroyRef, Input, OnInit, inject } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { Router } from '@angular/router';
import { IconName } from '@fortawesome/fontawesome-svg-core';
import { Observable, ReplaySubject } from 'rxjs';
import { map, take } from 'rxjs/operators';
 
import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
import { SearchBoxConfiguration } from 'ish-core/models/search-box-configuration/search-box-configuration.model';
import { SuggestTerm } from 'ish-core/models/suggest-term/suggest-term.model';
import { GenerateLazyComponent } from 'ish-core/utils/module-loader/generate-lazy-component.decorator';
 
/**
 * The search box container component
 *
 * prepares all data for the search box
 * uses input to display the search box
 *
 * @example
 * <ish-search-box [configuration]="{placeholder: 'search.searchbox.instructional_text' | translate}"></ish-search-box>
 */
@Component({
  selector: 'ish-search-box',
  templateUrl: './search-box.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
@GenerateLazyComponent()
export class SearchBoxComponent implements OnInit {
  /**
   * the search box configuration for this component
   */
  @Input() configuration: SearchBoxConfiguration;
 
  searchResults$: Observable<SuggestTerm[]>;
  inputSearchTerms$ = new ReplaySubject<string>(1);
 
  activeIndex = -1;
  inputFocused: boolean;
 
  private destroyRef = inject(DestroyRef);
 
  constructor(private shoppingFacade: ShoppingFacade, private router: Router) {}
 
  get usedIcon(): IconName {
    return this.configuration?.icon || 'search';
  }
 
  ngOnInit() {
    // initialize with searchTerm when on search route
    this.shoppingFacade.searchTerm$
      .pipe(
        map(x => (x ? x : '')),
        takeUntilDestroyed(this.destroyRef)
      )
      .subscribe(term => this.inputSearchTerms$.next(term));
 
    // suggests are triggered solely via stream
    this.searchResults$ = this.shoppingFacade.searchResults$(this.inputSearchTerms$);
  }
  blur() {
    this.inputFocused = false;
    this.activeIndex = -1;
  }
 
  focus() {
    this.inputFocused = true;
  }
 
  searchSuggest(source: string | EventTarget) {
    this.inputSearchTerms$.next(typeof source === 'string' ? source : (source as HTMLDataElement).value);
  }
 
  submitSearch(suggestedTerm: string) {
    Iif (!suggestedTerm) {
      return false;
    }
 
    // remove focus when switching to search page
    this.inputFocused = false;
 
    if (this.activeIndex !== -1) {
      // something was selected via keyboard
      this.searchResults$.pipe(take(1), takeUntilDestroyed(this.destroyRef)).subscribe(results => {
        this.router.navigate(['/search', results[this.activeIndex].term]);
        this.activeIndex = -1;
      });
    } else {
      this.router.navigate(['/search', suggestedTerm]);
    }
 
    // prevent form submission
    return false;
  }
 
  selectSuggestedTerm(index: number) {
    this.searchResults$.pipe(take(1), takeUntilDestroyed(this.destroyRef)).subscribe(results => {
      Iif (
        (this.configuration?.maxAutoSuggests && index > this.configuration.maxAutoSuggests - 1) ||
        index < -1 ||
        index > results.length - 1
      ) {
        return;
      }
      this.activeIndex = index;
    });
  }
}