]>
Commit | Line | Data |
---|---|---|
37024082 RK |
1 | import { Subject } from 'rxjs' |
2 | import { debounceTime, distinctUntilChanged } from 'rxjs/operators' | |
67264e06 C |
3 | import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' |
4 | import { ActivatedRoute, Router } from '@angular/router' | |
37024082 RK |
5 | |
6 | @Component({ | |
7 | selector: 'simple-search-input', | |
8 | templateUrl: './simple-search-input.component.html', | |
9 | styleUrls: [ './simple-search-input.component.scss' ] | |
10 | }) | |
11 | export class SimpleSearchInputComponent implements OnInit { | |
12 | @ViewChild('ref') input: ElementRef | |
13 | ||
14 | @Input() name = 'search' | |
15 | @Input() placeholder = $localize`Search` | |
67264e06 C |
16 | @Input() iconTitle = $localize`Search` |
17 | @Input() alwaysShow = true | |
37024082 RK |
18 | |
19 | @Output() searchChanged = new EventEmitter<string>() | |
67264e06 | 20 | @Output() inputDisplayChanged = new EventEmitter<boolean>() |
37024082 RK |
21 | |
22 | value = '' | |
67264e06 | 23 | inputShown: boolean |
37024082 RK |
24 | |
25 | private searchSubject = new Subject<string>() | |
26 | ||
27 | constructor ( | |
28 | private router: Router, | |
29 | private route: ActivatedRoute | |
30 | ) {} | |
31 | ||
32 | ngOnInit () { | |
33 | this.searchSubject | |
34 | .pipe( | |
35 | debounceTime(400), | |
36 | distinctUntilChanged() | |
37 | ) | |
38 | .subscribe(value => this.searchChanged.emit(value)) | |
39 | ||
40 | this.searchSubject.next(this.value) | |
67264e06 C |
41 | |
42 | if (this.isInputShown()) this.showInput(false) | |
37024082 RK |
43 | } |
44 | ||
67264e06 C |
45 | isInputShown () { |
46 | if (this.alwaysShow) return true | |
47 | ||
48 | return this.inputShown | |
49 | } | |
50 | ||
51 | onIconClick () { | |
52 | if (!this.isInputShown()) { | |
53 | this.showInput() | |
54 | return | |
55 | } | |
56 | ||
57 | this.searchChange() | |
58 | } | |
59 | ||
60 | showInput (focus = true) { | |
61 | this.inputShown = true | |
62 | this.inputDisplayChanged.emit(this.inputShown) | |
63 | ||
64 | if (focus) { | |
65 | setTimeout(() => this.input.nativeElement.focus()) | |
66 | } | |
67 | } | |
68 | ||
69 | hideInput () { | |
70 | this.inputShown = false | |
71 | ||
72 | if (this.isInputShown() === false) { | |
73 | this.inputDisplayChanged.emit(this.inputShown) | |
74 | } | |
37024082 RK |
75 | } |
76 | ||
77 | focusLost () { | |
67264e06 C |
78 | if (this.value) return |
79 | ||
80 | this.hideInput() | |
37024082 RK |
81 | } |
82 | ||
83 | searchChange () { | |
67264e06 C |
84 | this.router.navigate([ './search' ], { relativeTo: this.route }) |
85 | ||
37024082 RK |
86 | this.searchSubject.next(this.value) |
87 | } | |
88 | } |