]>
Commit | Line | Data |
---|---|---|
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 | } |