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