]>
Commit | Line | Data |
---|---|---|
1fd61899 C |
1 | import * as debug from 'debug' |
2 | import { Subject } from 'rxjs' | |
3 | import { debounceTime, distinctUntilChanged } from 'rxjs/operators' | |
4 | import { ActivatedRoute, Params, Router } from '@angular/router' | |
5 | ||
6 | const logger = debug('peertube:tables:RouteFilter') | |
7 | ||
8 | export abstract class RouteFilter { | |
9 | search: string | |
10 | ||
11 | protected searchStream: Subject<string> | |
12 | ||
13 | protected route: ActivatedRoute | |
14 | protected router: Router | |
15 | ||
16 | initSearch () { | |
17 | this.searchStream = new Subject() | |
18 | ||
19 | this.searchStream | |
20 | .pipe( | |
514e8168 | 21 | debounceTime(200), |
1fd61899 C |
22 | distinctUntilChanged() |
23 | ) | |
24 | .subscribe(search => { | |
25 | this.search = search | |
26 | ||
27 | logger('On search %s.', this.search) | |
28 | ||
29 | this.loadData() | |
30 | }) | |
31 | } | |
32 | ||
33 | onSearch (event: Event) { | |
34 | const target = event.target as HTMLInputElement | |
35 | this.searchStream.next(target.value) | |
36 | ||
37 | this.setQueryParams(target.value) | |
38 | } | |
39 | ||
40 | resetTableFilter () { | |
41 | this.setTableFilter('') | |
42 | this.setQueryParams('') | |
43 | this.resetSearch() | |
44 | } | |
45 | ||
46 | resetSearch () { | |
47 | this.searchStream.next('') | |
48 | this.setTableFilter('') | |
49 | } | |
50 | ||
51 | listenToSearchChange () { | |
52 | this.route.queryParams | |
53 | .subscribe(params => { | |
54 | this.search = params.search || '' | |
55 | ||
56 | // Primeng table will run an event to load data | |
57 | this.setTableFilter(this.search) | |
58 | }) | |
59 | } | |
60 | ||
61 | setTableFilter (filter: string, triggerEvent = true) { | |
62 | // FIXME: cannot use ViewChild, so create a component for the filter input | |
63 | const filterInput = document.getElementById('table-filter') as HTMLInputElement | |
64 | if (!filterInput) return | |
65 | ||
66 | filterInput.value = filter | |
67 | ||
68 | if (triggerEvent) filterInput.dispatchEvent(new Event('keyup')) | |
69 | } | |
70 | ||
71 | protected abstract loadData (): void | |
72 | ||
73 | private setQueryParams (search: string) { | |
74 | const queryParams: Params = {} | |
75 | ||
76 | if (search) Object.assign(queryParams, { search }) | |
77 | this.router.navigate([ ], { queryParams }) | |
78 | } | |
79 | } |