diff options
author | Chocobozzz <me@florianbigard.com> | 2021-05-03 14:33:34 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-05-03 16:42:15 +0200 |
commit | 2e46eb97154da909b82d5efe1d336a3412594ff0 (patch) | |
tree | a86b6ca6439f62c8498887c4e1c3ece9a302d116 /client/src/app/core | |
parent | 514e8168fbad08e70ce12dab587f720b4e91b19e (diff) | |
download | PeerTube-2e46eb97154da909b82d5efe1d336a3412594ff0.tar.gz PeerTube-2e46eb97154da909b82d5efe1d336a3412594ff0.tar.zst PeerTube-2e46eb97154da909b82d5efe1d336a3412594ff0.zip |
Refactor search filters
Diffstat (limited to 'client/src/app/core')
-rw-r--r-- | client/src/app/core/rest/rest-table.ts | 19 | ||||
-rw-r--r-- | client/src/app/core/routing/index.ts | 1 | ||||
-rw-r--r-- | client/src/app/core/routing/route-filter.ts | 79 |
3 files changed, 10 insertions, 89 deletions
diff --git a/client/src/app/core/rest/rest-table.ts b/client/src/app/core/rest/rest-table.ts index 9baab8a39..a5b48f10c 100644 --- a/client/src/app/core/rest/rest-table.ts +++ b/client/src/app/core/rest/rest-table.ts | |||
@@ -1,25 +1,22 @@ | |||
1 | import * as debug from 'debug' | 1 | import * as debug from 'debug' |
2 | import { LazyLoadEvent, SortMeta } from 'primeng/api' | 2 | import { LazyLoadEvent, SortMeta } from 'primeng/api' |
3 | import { Subject } from 'rxjs' | ||
4 | import { ActivatedRoute, Router } from '@angular/router' | 3 | import { ActivatedRoute, Router } from '@angular/router' |
5 | import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage' | 4 | import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage' |
6 | import { RouteFilter } from '../routing' | ||
7 | import { RestPagination } from './rest-pagination' | 5 | import { RestPagination } from './rest-pagination' |
8 | 6 | ||
9 | const logger = debug('peertube:tables:RestTable') | 7 | const logger = debug('peertube:tables:RestTable') |
10 | 8 | ||
11 | export abstract class RestTable extends RouteFilter { | 9 | export abstract class RestTable { |
12 | 10 | ||
13 | abstract totalRecords: number | 11 | abstract totalRecords: number |
14 | abstract sort: SortMeta | 12 | abstract sort: SortMeta |
15 | abstract pagination: RestPagination | 13 | abstract pagination: RestPagination |
16 | 14 | ||
17 | search: string | ||
18 | rowsPerPageOptions = [ 10, 20, 50, 100 ] | 15 | rowsPerPageOptions = [ 10, 20, 50, 100 ] |
19 | rowsPerPage = this.rowsPerPageOptions[0] | 16 | rowsPerPage = this.rowsPerPageOptions[0] |
20 | expandedRows = {} | 17 | expandedRows = {} |
21 | 18 | ||
22 | protected searchStream: Subject<string> | 19 | search: string |
23 | 20 | ||
24 | protected route: ActivatedRoute | 21 | protected route: ActivatedRoute |
25 | protected router: Router | 22 | protected router: Router |
@@ -28,7 +25,6 @@ export abstract class RestTable extends RouteFilter { | |||
28 | 25 | ||
29 | initialize () { | 26 | initialize () { |
30 | this.loadSort() | 27 | this.loadSort() |
31 | this.initSearch() | ||
32 | } | 28 | } |
33 | 29 | ||
34 | loadSort () { | 30 | loadSort () { |
@@ -56,7 +52,7 @@ export abstract class RestTable extends RouteFilter { | |||
56 | count: this.rowsPerPage | 52 | count: this.rowsPerPage |
57 | } | 53 | } |
58 | 54 | ||
59 | this.loadData() | 55 | this.reloadData() |
60 | this.saveSort() | 56 | this.saveSort() |
61 | } | 57 | } |
62 | 58 | ||
@@ -74,13 +70,18 @@ export abstract class RestTable extends RouteFilter { | |||
74 | count: this.rowsPerPage | 70 | count: this.rowsPerPage |
75 | } | 71 | } |
76 | 72 | ||
77 | this.loadData() | 73 | this.reloadData() |
78 | } | 74 | } |
79 | 75 | ||
80 | this.expandedRows = {} | 76 | this.expandedRows = {} |
81 | } | 77 | } |
82 | 78 | ||
83 | protected abstract loadData (): void | 79 | onSearch (search: string) { |
80 | this.search = search | ||
81 | this.reloadData() | ||
82 | } | ||
83 | |||
84 | protected abstract reloadData (): void | ||
84 | 85 | ||
85 | private getSortLocalStorageKey () { | 86 | private getSortLocalStorageKey () { |
86 | return 'rest-table-sort-' + this.getIdentifier() | 87 | return 'rest-table-sort-' + this.getIdentifier() |
diff --git a/client/src/app/core/routing/index.ts b/client/src/app/core/routing/index.ts index d53a4ae2c..239c27caf 100644 --- a/client/src/app/core/routing/index.ts +++ b/client/src/app/core/routing/index.ts | |||
@@ -5,7 +5,6 @@ export * from './login-guard.service' | |||
5 | export * from './menu-guard.service' | 5 | export * from './menu-guard.service' |
6 | export * from './preload-selected-modules-list' | 6 | export * from './preload-selected-modules-list' |
7 | export * from './redirect.service' | 7 | export * from './redirect.service' |
8 | export * from './route-filter' | ||
9 | export * from './server-config-resolver.service' | 8 | export * from './server-config-resolver.service' |
10 | export * from './unlogged-guard.service' | 9 | export * from './unlogged-guard.service' |
11 | export * from './user-right-guard.service' | 10 | export * from './user-right-guard.service' |
diff --git a/client/src/app/core/routing/route-filter.ts b/client/src/app/core/routing/route-filter.ts deleted file mode 100644 index d2eed7cd4..000000000 --- a/client/src/app/core/routing/route-filter.ts +++ /dev/null | |||
@@ -1,79 +0,0 @@ | |||
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( | ||
21 | debounceTime(200), | ||
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 | } | ||