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
   3 @Component({
   4   selector: 'my-simple-search-input',
   5   templateUrl: './simple-search-input.component.html',
   6   styleUrls: [ './simple-search-input.component.scss' ]
   7 })
   8 export class SimpleSearchInputComponent implements OnInit {
   9   @ViewChild('ref') input: ElementRef
  10
  11   @Input() name = 'search'
  12   @Input() placeholder = $localize`Search`
  13   @Input() iconTitle = $localize`Search`
  14   @Input() alwaysShow = true
  15
  16   @Output() searchChanged = new EventEmitter<string>()
  17   @Output() inputDisplayChanged = new EventEmitter<boolean>()
  18
  19   value = ''
  20   inputShown: boolean
  21
  22   private hasAlreadySentSearch = false
  23
  24   ngOnInit () {
  25     if (this.isInputShown()) this.showInput(false)
  26   }
  27
  28   isInputShown () {
  29     if (this.alwaysShow) return true
  30
  31     return this.inputShown
  32   }
  33
  34   onIconClick () {
  35     if (!this.isInputShown()) {
  36       this.showInput()
  37       return
  38     }
  39
  40     this.sendSearch()
  41   }
  42
  43   showInput (focus = true) {
  44     this.inputShown = true
  45     this.inputDisplayChanged.emit(this.inputShown)
  46
  47     if (focus) {
  48       setTimeout(() => this.input.nativeElement.focus())
  49     }
  50   }
  51
  52   hideInput () {
  53     this.inputShown = false
  54
  55     if (this.isInputShown() === false) {
  56       this.inputDisplayChanged.emit(this.inputShown)
  57     }
  58   }
  59
  60   focusLost () {
  61     if (this.value) return
  62
  63     this.hideInput()
  64   }
  65
  66   sendSearch () {
  67     this.hasAlreadySentSearch = true
  68     this.searchChanged.emit(this.value)
  69   }
  70
  71   onResetFilter () {
  72     this.value = ''
  73
  74     if (this.hasAlreadySentSearch) this.sendSearch()
  75   }
  76 }