diff options
Diffstat (limited to 'client/src/app/shared/shared-main/misc/simple-search-input.component.ts')
-rw-r--r-- | client/src/app/shared/shared-main/misc/simple-search-input.component.ts | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.ts b/client/src/app/shared/shared-main/misc/simple-search-input.component.ts new file mode 100644 index 000000000..86ae9ab42 --- /dev/null +++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.ts | |||
@@ -0,0 +1,54 @@ | |||
1 | import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' | ||
2 | import { ActivatedRoute, Router } from '@angular/router' | ||
3 | import { Subject } from 'rxjs' | ||
4 | import { debounceTime, distinctUntilChanged } from 'rxjs/operators' | ||
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` | ||
16 | |||
17 | @Output() searchChanged = new EventEmitter<string>() | ||
18 | |||
19 | value = '' | ||
20 | shown: boolean | ||
21 | |||
22 | private searchSubject = new Subject<string>() | ||
23 | |||
24 | constructor ( | ||
25 | private router: Router, | ||
26 | private route: ActivatedRoute | ||
27 | ) {} | ||
28 | |||
29 | ngOnInit () { | ||
30 | this.searchSubject | ||
31 | .pipe( | ||
32 | debounceTime(400), | ||
33 | distinctUntilChanged() | ||
34 | ) | ||
35 | .subscribe(value => this.searchChanged.emit(value)) | ||
36 | |||
37 | this.searchSubject.next(this.value) | ||
38 | } | ||
39 | |||
40 | showInput () { | ||
41 | this.shown = true | ||
42 | setTimeout(() => this.input.nativeElement.focus()) | ||
43 | } | ||
44 | |||
45 | focusLost () { | ||
46 | if (this.value !== '') return | ||
47 | this.shown = false | ||
48 | } | ||
49 | |||
50 | searchChange () { | ||
51 | this.router.navigate(['./search'], { relativeTo: this.route }) | ||
52 | this.searchSubject.next(this.value) | ||
53 | } | ||
54 | } | ||