diff options
Diffstat (limited to 'client/src/app/core/rest/rest-table.ts')
-rw-r--r-- | client/src/app/core/rest/rest-table.ts | 105 |
1 files changed, 105 insertions, 0 deletions
diff --git a/client/src/app/core/rest/rest-table.ts b/client/src/app/core/rest/rest-table.ts new file mode 100644 index 000000000..1b35ad47d --- /dev/null +++ b/client/src/app/core/rest/rest-table.ts | |||
@@ -0,0 +1,105 @@ | |||
1 | import { peertubeLocalStorage } from '@app/helpers/peertube-web-storage' | ||
2 | import { LazyLoadEvent, SortMeta } from 'primeng/api' | ||
3 | import { RestPagination } from './rest-pagination' | ||
4 | import { Subject } from 'rxjs' | ||
5 | import { debounceTime, distinctUntilChanged } from 'rxjs/operators' | ||
6 | |||
7 | export abstract class RestTable { | ||
8 | |||
9 | abstract totalRecords: number | ||
10 | abstract sort: SortMeta | ||
11 | abstract pagination: RestPagination | ||
12 | |||
13 | search: string | ||
14 | rowsPerPageOptions = [ 10, 20, 50, 100 ] | ||
15 | rowsPerPage = this.rowsPerPageOptions[0] | ||
16 | expandedRows = {} | ||
17 | |||
18 | private searchStream: Subject<string> | ||
19 | |||
20 | abstract getIdentifier (): string | ||
21 | |||
22 | initialize () { | ||
23 | this.loadSort() | ||
24 | this.initSearch() | ||
25 | } | ||
26 | |||
27 | loadSort () { | ||
28 | const result = peertubeLocalStorage.getItem(this.getSortLocalStorageKey()) | ||
29 | |||
30 | if (result) { | ||
31 | try { | ||
32 | this.sort = JSON.parse(result) | ||
33 | } catch (err) { | ||
34 | console.error('Cannot load sort of local storage key ' + this.getSortLocalStorageKey(), err) | ||
35 | } | ||
36 | } | ||
37 | } | ||
38 | |||
39 | loadLazy (event: LazyLoadEvent) { | ||
40 | this.sort = { | ||
41 | order: event.sortOrder, | ||
42 | field: event.sortField | ||
43 | } | ||
44 | |||
45 | this.pagination = { | ||
46 | start: event.first, | ||
47 | count: this.rowsPerPage | ||
48 | } | ||
49 | |||
50 | this.loadData() | ||
51 | this.saveSort() | ||
52 | } | ||
53 | |||
54 | saveSort () { | ||
55 | peertubeLocalStorage.setItem(this.getSortLocalStorageKey(), JSON.stringify(this.sort)) | ||
56 | } | ||
57 | |||
58 | initSearch () { | ||
59 | this.searchStream = new Subject() | ||
60 | |||
61 | this.searchStream | ||
62 | .pipe( | ||
63 | debounceTime(400), | ||
64 | distinctUntilChanged() | ||
65 | ) | ||
66 | .subscribe(search => { | ||
67 | this.search = search | ||
68 | this.loadData() | ||
69 | }) | ||
70 | } | ||
71 | |||
72 | onSearch (event: Event) { | ||
73 | const target = event.target as HTMLInputElement | ||
74 | this.searchStream.next(target.value) | ||
75 | } | ||
76 | |||
77 | onPage (event: { first: number, rows: number }) { | ||
78 | if (this.rowsPerPage !== event.rows) { | ||
79 | this.rowsPerPage = event.rows | ||
80 | this.pagination = { | ||
81 | start: event.first, | ||
82 | count: this.rowsPerPage | ||
83 | } | ||
84 | this.loadData() | ||
85 | } | ||
86 | this.expandedRows = {} | ||
87 | } | ||
88 | |||
89 | setTableFilter (filter: string) { | ||
90 | // FIXME: cannot use ViewChild, so create a component for the filter input | ||
91 | const filterInput = document.getElementById('table-filter') as HTMLInputElement | ||
92 | if (filterInput) filterInput.value = filter | ||
93 | } | ||
94 | |||
95 | resetSearch () { | ||
96 | this.searchStream.next('') | ||
97 | this.setTableFilter('') | ||
98 | } | ||
99 | |||
100 | protected abstract loadData (): void | ||
101 | |||
102 | private getSortLocalStorageKey () { | ||
103 | return 'rest-table-sort-' + this.getIdentifier() | ||
104 | } | ||
105 | } | ||