diff options
Diffstat (limited to 'client/src/app/shared/shared-forms/advanced-input-filter.component.ts')
-rw-r--r-- | client/src/app/shared/shared-forms/advanced-input-filter.component.ts | 77 |
1 files changed, 69 insertions, 8 deletions
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.ts b/client/src/app/shared/shared-forms/advanced-input-filter.component.ts index 394090751..1b0eed34b 100644 --- a/client/src/app/shared/shared-forms/advanced-input-filter.component.ts +++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.ts | |||
@@ -1,27 +1,88 @@ | |||
1 | import { Component, EventEmitter, Input, Output } from '@angular/core' | 1 | import * as debug from 'debug' |
2 | import { Params } from '@angular/router' | 2 | import { Subject } from 'rxjs' |
3 | import { debounceTime, distinctUntilChanged } from 'rxjs/operators' | ||
4 | import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' | ||
5 | import { ActivatedRoute, Params, Router } from '@angular/router' | ||
3 | 6 | ||
4 | export type AdvancedInputFilter = { | 7 | export type AdvancedInputFilter = { |
5 | label: string | 8 | label: string |
6 | queryParams: Params | 9 | queryParams: Params |
7 | } | 10 | } |
8 | 11 | ||
12 | const logger = debug('peertube:AdvancedInputFilterComponent') | ||
13 | |||
9 | @Component({ | 14 | @Component({ |
10 | selector: 'my-advanced-input-filter', | 15 | selector: 'my-advanced-input-filter', |
11 | templateUrl: './advanced-input-filter.component.html', | 16 | templateUrl: './advanced-input-filter.component.html', |
12 | styleUrls: [ './advanced-input-filter.component.scss' ] | 17 | styleUrls: [ './advanced-input-filter.component.scss' ] |
13 | }) | 18 | }) |
14 | export class AdvancedInputFilterComponent { | 19 | export class AdvancedInputFilterComponent implements OnInit { |
15 | @Input() filters: AdvancedInputFilter[] = [] | 20 | @Input() filters: AdvancedInputFilter[] = [] |
16 | 21 | ||
17 | @Output() resetTableFilter = new EventEmitter<void>() | 22 | @Output() search = new EventEmitter<string>() |
18 | @Output() search = new EventEmitter<Event>() | 23 | |
24 | searchValue: string | ||
25 | |||
26 | private searchStream: Subject<string> | ||
27 | |||
28 | constructor ( | ||
29 | private route: ActivatedRoute, | ||
30 | private router: Router | ||
31 | ) { } | ||
32 | |||
33 | ngOnInit () { | ||
34 | this.initSearchStream() | ||
35 | this.listenToRouteSearchChange() | ||
36 | } | ||
19 | 37 | ||
20 | onSearch (event: Event) { | 38 | onInputSearch (event: Event) { |
21 | this.search.emit(event) | 39 | this.updateSearch((event.target as HTMLInputElement).value) |
22 | } | 40 | } |
23 | 41 | ||
24 | onResetTableFilter () { | 42 | onResetTableFilter () { |
25 | this.resetTableFilter.emit() | 43 | this.updateSearch('') |
44 | } | ||
45 | |||
46 | hasFilters () { | ||
47 | return this.filters.length !== 0 | ||
48 | } | ||
49 | |||
50 | private updateSearch (value: string) { | ||
51 | this.searchValue = value | ||
52 | this.searchStream.next(this.searchValue) | ||
53 | } | ||
54 | |||
55 | private listenToRouteSearchChange () { | ||
56 | this.route.queryParams | ||
57 | .subscribe(params => { | ||
58 | const search = params.search || '' | ||
59 | |||
60 | logger('On route search change "%s".', search) | ||
61 | |||
62 | this.updateSearch(search) | ||
63 | }) | ||
64 | } | ||
65 | |||
66 | private initSearchStream () { | ||
67 | this.searchStream = new Subject() | ||
68 | |||
69 | this.searchStream | ||
70 | .pipe( | ||
71 | debounceTime(200), | ||
72 | distinctUntilChanged() | ||
73 | ) | ||
74 | .subscribe(() => { | ||
75 | logger('On search "%s".', this.searchValue) | ||
76 | |||
77 | this.setQueryParams(this.searchValue) | ||
78 | this.search.emit(this.searchValue) | ||
79 | }) | ||
80 | } | ||
81 | |||
82 | private setQueryParams (search: string) { | ||
83 | const queryParams: Params = {} | ||
84 | |||
85 | if (search) Object.assign(queryParams, { search }) | ||
86 | this.router.navigate([ ], { queryParams }) | ||
26 | } | 87 | } |
27 | } | 88 | } |