]>
Commit | Line | Data |
---|---|---|
67264e06 | 1 | import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' |
37024082 RK |
2 | |
3 | @Component({ | |
9df52d66 | 4 | selector: 'my-simple-search-input', |
37024082 RK |
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` | |
67264e06 C |
13 | @Input() iconTitle = $localize`Search` |
14 | @Input() alwaysShow = true | |
37024082 RK |
15 | |
16 | @Output() searchChanged = new EventEmitter<string>() | |
67264e06 | 17 | @Output() inputDisplayChanged = new EventEmitter<boolean>() |
37024082 RK |
18 | |
19 | value = '' | |
67264e06 | 20 | inputShown: boolean |
37024082 | 21 | |
dd24f1bb | 22 | private hasAlreadySentSearch = false |
37024082 RK |
23 | |
24 | ngOnInit () { | |
67264e06 | 25 | if (this.isInputShown()) this.showInput(false) |
37024082 RK |
26 | } |
27 | ||
67264e06 C |
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 | ||
dd24f1bb | 40 | this.sendSearch() |
67264e06 C |
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 | } | |
37024082 RK |
58 | } |
59 | ||
60 | focusLost () { | |
67264e06 C |
61 | if (this.value) return |
62 | ||
63 | this.hideInput() | |
37024082 RK |
64 | } |
65 | ||
dd24f1bb C |
66 | sendSearch () { |
67 | this.hasAlreadySentSearch = true | |
68 | this.searchChanged.emit(this.value) | |
69 | } | |
70 | ||
71 | onResetFilter () { | |
72 | this.value = '' | |
67264e06 | 73 | |
dd24f1bb | 74 | if (this.hasAlreadySentSearch) this.sendSearch() |
37024082 RK |
75 | } |
76 | } |