2021-03-26 13:20:37 +01:00
|
|
|
import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
|
2021-01-19 13:43:33 +01:00
|
|
|
|
|
|
|
@Component({
|
2021-08-17 14:42:53 +02:00
|
|
|
selector: 'my-simple-search-input',
|
2021-01-19 13:43:33 +01:00
|
|
|
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`
|
2021-03-26 13:20:37 +01:00
|
|
|
@Input() iconTitle = $localize`Search`
|
|
|
|
@Input() alwaysShow = true
|
2021-01-19 13:43:33 +01:00
|
|
|
|
|
|
|
@Output() searchChanged = new EventEmitter<string>()
|
2021-03-26 13:20:37 +01:00
|
|
|
@Output() inputDisplayChanged = new EventEmitter<boolean>()
|
2021-01-19 13:43:33 +01:00
|
|
|
|
|
|
|
value = ''
|
2021-03-26 13:20:37 +01:00
|
|
|
inputShown: boolean
|
2021-01-19 13:43:33 +01:00
|
|
|
|
2021-08-19 09:24:29 +02:00
|
|
|
private hasAlreadySentSearch = false
|
2021-01-19 13:43:33 +01:00
|
|
|
|
|
|
|
ngOnInit () {
|
2021-03-26 13:20:37 +01:00
|
|
|
if (this.isInputShown()) this.showInput(false)
|
2021-01-19 13:43:33 +01:00
|
|
|
}
|
|
|
|
|
2021-03-26 13:20:37 +01:00
|
|
|
isInputShown () {
|
|
|
|
if (this.alwaysShow) return true
|
|
|
|
|
|
|
|
return this.inputShown
|
|
|
|
}
|
|
|
|
|
|
|
|
onIconClick () {
|
|
|
|
if (!this.isInputShown()) {
|
|
|
|
this.showInput()
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2021-08-19 09:24:29 +02:00
|
|
|
this.sendSearch()
|
2021-03-26 13:20:37 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
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)
|
|
|
|
}
|
2021-01-19 13:43:33 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
focusLost () {
|
2021-03-26 13:20:37 +01:00
|
|
|
if (this.value) return
|
|
|
|
|
|
|
|
this.hideInput()
|
2021-01-19 13:43:33 +01:00
|
|
|
}
|
|
|
|
|
2021-08-19 09:24:29 +02:00
|
|
|
sendSearch () {
|
|
|
|
this.hasAlreadySentSearch = true
|
|
|
|
this.searchChanged.emit(this.value)
|
|
|
|
}
|
|
|
|
|
|
|
|
onResetFilter () {
|
|
|
|
this.value = ''
|
2021-03-26 13:20:37 +01:00
|
|
|
|
2021-08-19 09:24:29 +02:00
|
|
|
if (this.hasAlreadySentSearch) this.sendSearch()
|
2021-01-19 13:43:33 +01:00
|
|
|
}
|
|
|
|
}
|