]>
Commit | Line | Data |
---|---|---|
5ed46c1b | 1 | import * as debug from 'debug' |
f77eb73b | 2 | import { LazyLoadEvent, SortMeta } from 'primeng/api' |
24b9417c C |
3 | import { Subject } from 'rxjs' |
4 | import { debounceTime, distinctUntilChanged } from 'rxjs/operators' | |
5ed46c1b C |
5 | import { ActivatedRoute, Params, Router } from '@angular/router' |
6 | import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage' | |
7 | import { RestPagination } from './rest-pagination' | |
cfde28ba C |
8 | |
9 | const logger = debug('peertube:tables:RestTable') | |
d592e0a9 C |
10 | |
11 | export abstract class RestTable { | |
ab998f7b | 12 | |
d592e0a9 | 13 | abstract totalRecords: number |
d592e0a9 C |
14 | abstract sort: SortMeta |
15 | abstract pagination: RestPagination | |
16 | ||
042daa70 | 17 | search: string |
0251197e RK |
18 | rowsPerPageOptions = [ 10, 20, 50, 100 ] |
19 | rowsPerPage = this.rowsPerPageOptions[0] | |
d4051183 | 20 | expandedRows = {} |
0251197e | 21 | |
5ed46c1b C |
22 | baseRoute: string |
23 | ||
cfde28ba | 24 | protected searchStream: Subject<string> |
8e11a1b3 | 25 | |
5ed46c1b C |
26 | protected route: ActivatedRoute |
27 | protected router: Router | |
28 | ||
8e11a1b3 | 29 | abstract getIdentifier (): string |
ab998f7b | 30 | |
24b9417c C |
31 | initialize () { |
32 | this.loadSort() | |
33 | this.initSearch() | |
34 | } | |
35 | ||
ab998f7b | 36 | loadSort () { |
8e11a1b3 | 37 | const result = peertubeLocalStorage.getItem(this.getSortLocalStorageKey()) |
ab998f7b C |
38 | |
39 | if (result) { | |
40 | try { | |
41 | this.sort = JSON.parse(result) | |
42 | } catch (err) { | |
8e11a1b3 | 43 | console.error('Cannot load sort of local storage key ' + this.getSortLocalStorageKey(), err) |
ab998f7b C |
44 | } |
45 | } | |
46 | } | |
47 | ||
d592e0a9 | 48 | loadLazy (event: LazyLoadEvent) { |
cfde28ba C |
49 | logger('Load lazy %o.', event) |
50 | ||
d592e0a9 C |
51 | this.sort = { |
52 | order: event.sortOrder, | |
53 | field: event.sortField | |
54 | } | |
55 | ||
56 | this.pagination = { | |
57 | start: event.first, | |
58 | count: this.rowsPerPage | |
59 | } | |
60 | ||
61 | this.loadData() | |
ab998f7b C |
62 | this.saveSort() |
63 | } | |
64 | ||
65 | saveSort () { | |
8e11a1b3 | 66 | peertubeLocalStorage.setItem(this.getSortLocalStorageKey(), JSON.stringify(this.sort)) |
d592e0a9 C |
67 | } |
68 | ||
24b9417c C |
69 | initSearch () { |
70 | this.searchStream = new Subject() | |
71 | ||
72 | this.searchStream | |
73 | .pipe( | |
74 | debounceTime(400), | |
75 | distinctUntilChanged() | |
76 | ) | |
77 | .subscribe(search => { | |
78 | this.search = search | |
cfde28ba C |
79 | |
80 | logger('On search %s.', this.search) | |
81 | ||
24b9417c C |
82 | this.loadData() |
83 | }) | |
84 | } | |
85 | ||
be27ef3b C |
86 | onSearch (event: Event) { |
87 | const target = event.target as HTMLInputElement | |
88 | this.searchStream.next(target.value) | |
5ed46c1b C |
89 | |
90 | this.setQueryParams((event.target as HTMLInputElement).value) | |
91 | } | |
92 | ||
93 | setQueryParams (search: string) { | |
94 | if (!this.baseRoute) return | |
95 | ||
96 | const queryParams: Params = {} | |
97 | ||
98 | if (search) Object.assign(queryParams, { search }) | |
99 | this.router.navigate([ this.baseRoute ], { queryParams }) | |
100 | } | |
101 | ||
102 | resetTableFilter () { | |
103 | this.setTableFilter('') | |
104 | this.setQueryParams('') | |
105 | this.resetSearch() | |
106 | } | |
107 | ||
108 | listenToSearchChange () { | |
109 | this.route.queryParams | |
110 | .subscribe(params => { | |
111 | this.search = params.search || '' | |
112 | ||
6c53d8bf | 113 | // Primeng table will run an event to load data |
5ed46c1b | 114 | this.setTableFilter(this.search) |
5ed46c1b | 115 | }) |
24b9417c | 116 | } |
dffd5d12 | 117 | |
25a42e29 | 118 | onPage (event: { first: number, rows: number }) { |
cfde28ba C |
119 | logger('On page %o.', event) |
120 | ||
25a42e29 RK |
121 | if (this.rowsPerPage !== event.rows) { |
122 | this.rowsPerPage = event.rows | |
123 | this.pagination = { | |
124 | start: event.first, | |
125 | count: this.rowsPerPage | |
126 | } | |
cfde28ba | 127 | |
25a42e29 RK |
128 | this.loadData() |
129 | } | |
cfde28ba | 130 | |
d4051183 RK |
131 | this.expandedRows = {} |
132 | } | |
133 | ||
3f6441e0 | 134 | setTableFilter (filter: string, triggerEvent = true) { |
25a42e29 RK |
135 | // FIXME: cannot use ViewChild, so create a component for the filter input |
136 | const filterInput = document.getElementById('table-filter') as HTMLInputElement | |
3f6441e0 C |
137 | if (!filterInput) return |
138 | ||
139 | filterInput.value = filter | |
140 | ||
141 | if (triggerEvent) filterInput.dispatchEvent(new Event('keyup')) | |
25a42e29 RK |
142 | } |
143 | ||
144 | resetSearch () { | |
145 | this.searchStream.next('') | |
146 | this.setTableFilter('') | |
147 | } | |
148 | ||
dffd5d12 | 149 | protected abstract loadData (): void |
8e11a1b3 C |
150 | |
151 | private getSortLocalStorageKey () { | |
152 | return 'rest-table-sort-' + this.getIdentifier() | |
153 | } | |
d592e0a9 | 154 | } |