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 108 | 3x 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; }); } } |