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


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

import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'

@Component({
  selector: 'my-simple-search-input',
  templateUrl: './simple-search-input.component.html',
  styleUrls: [ './simple-search-input.component.scss' ]
})
export class SimpleSearchInputComponent implements OnInit {
  @ViewChild('ref') input: ElementRef

  @Input() name = 'search'
  @Input() placeholder = $localize`Search`
  @Input() iconTitle = $localize`Search`
  @Input() alwaysShow = true

  @Output() searchChanged = new EventEmitter<string>()
  @Output() inputDisplayChanged = new EventEmitter<boolean>()

  value = ''
  inputShown: boolean

  private hasAlreadySentSearch = false

  ngOnInit () {
    if (this.isInputShown()) this.showInput(false)
  }

  isInputShown () {
    if (this.alwaysShow) return true

    return this.inputShown
  }

  onIconClick () {
    if (!this.isInputShown()) {
      this.showInput()
      return
    }

    this.sendSearch()
  }

  showInput (focus = true) {
    this.inputShown = true
    this.inputDisplayChanged.emit(this.inputShown)

    if (focus) {
      setTimeout(() => this.input.nativeElement.focus())
    }
  }

  hideInput () {
    this.inputShown = false

    if (this.isInputShown() === false) {
      this.inputDisplayChanged.emit(this.inputShown)
    }
  }

  focusLost () {
    if (this.value) return

    this.hideInput()
  }

  sendSearch () {
    this.hasAlreadySentSearch = true
    this.searchChanged.emit(this.value)
  }

  onResetFilter () {
    this.value = ''

    if (this.hasAlreadySentSearch) this.sendSearch()
  }
}