client/src/app/shared/shared-main/misc/simple-search-input.component.ts

   1 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
   2 import { ActivatedRoute, Router } from '@angular/router'
   3 import { Subject } from 'rxjs'
   4 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
   5
   6 @Component({
   7   selector: 'simple-search-input',
   8   templateUrl: './simple-search-input.component.html',
   9   styleUrls: [ './simple-search-input.component.scss' ]
  10 })
  11 export class SimpleSearchInputComponent implements OnInit {
  12   @ViewChild('ref') input: ElementRef
  13
  14   @Input() name = 'search'
  15   @Input() placeholder = $localize`Search`
  16
  17   @Output() searchChanged = new EventEmitter<string>()
  18
  19   value = ''
  20   shown: boolean
  21
  22   private searchSubject = new Subject<string>()
  23
  24   constructor (
  25     private router: Router,
  26     private route: ActivatedRoute
  27   ) {}
  28
  29   ngOnInit () {
  30     this.searchSubject
  31         .pipe(
  32           debounceTime(400),
  33           distinctUntilChanged()
  34         )
  35         .subscribe(value => this.searchChanged.emit(value))
  36
  37     this.searchSubject.next(this.value)
  38   }
  39
  40   showInput () {
  41     this.shown = true
  42     setTimeout(() => this.input.nativeElement.focus())
  43   }
  44
  45   focusLost () {
  46     if (this.value !== '') return
  47     this.shown = false
  48   }
  49
  50   searchChange () {
  51     this.router.navigate(['./search'], { relativeTo: this.route })
  52     this.searchSubject.next(this.value)
  53   }
  54 }