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

   1 import { Subject } from 'rxjs'
   2 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
   3 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
   4 import { ActivatedRoute, Router } from '@angular/router'
   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   @Input() iconTitle = $localize`Search`
  17   @Input() alwaysShow = true
  18
  19   @Output() searchChanged = new EventEmitter<string>()
  20   @Output() inputDisplayChanged = new EventEmitter<boolean>()
  21
  22   value = ''
  23   inputShown: boolean
  24
  25   private searchSubject = new Subject<string>()
  26
  27   constructor (
  28     private router: Router,
  29     private route: ActivatedRoute
  30   ) {}
  31
  32   ngOnInit () {
  33     this.searchSubject
  34         .pipe(
  35           debounceTime(400),
  36           distinctUntilChanged()
  37         )
  38         .subscribe(value => this.searchChanged.emit(value))
  39
  40     this.searchSubject.next(this.value)
  41
  42     if (this.isInputShown()) this.showInput(false)
  43   }
  44
  45   isInputShown () {
  46     if (this.alwaysShow) return true
  47
  48     return this.inputShown
  49   }
  50
  51   onIconClick () {
  52     if (!this.isInputShown()) {
  53       this.showInput()
  54       return
  55     }
  56
  57     this.searchChange()
  58   }
  59
  60   showInput (focus = true) {
  61     this.inputShown = true
  62     this.inputDisplayChanged.emit(this.inputShown)
  63
  64     if (focus) {
  65       setTimeout(() => this.input.nativeElement.focus())
  66     }
  67   }
  68
  69   hideInput () {
  70     this.inputShown = false
  71
  72     if (this.isInputShown() === false) {
  73       this.inputDisplayChanged.emit(this.inputShown)
  74     }
  75   }
  76
  77   focusLost () {
  78     if (this.value) return
  79
  80     this.hideInput()
  81   }
  82
  83   searchChange () {
  84     this.router.navigate([ './search' ], { relativeTo: this.route })
  85
  86     this.searchSubject.next(this.value)
  87   }
  88 }