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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
|
import * as debug from 'debug'
import { Subject } from 'rxjs'
import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
import { ActivatedRoute, Params, Router } from '@angular/router'
import { RestService } from '@app/core'
export type AdvancedInputFilter = {
title: string
children: AdvancedInputFilterChild[]
}
export type AdvancedInputFilterChild = {
label: string
value: string
}
const debugLogger = debug('peertube:AdvancedInputFilterComponent')
@Component({
selector: 'my-advanced-input-filter',
templateUrl: './advanced-input-filter.component.html',
styleUrls: [ './advanced-input-filter.component.scss' ]
})
export class AdvancedInputFilterComponent implements OnInit, AfterViewInit {
@Input() filters: AdvancedInputFilter[] = []
@Input() emitOnInit = true
@Output() search = new EventEmitter<string>()
searchValue: string
private enabledFilters = new Set<string>()
private searchStream: Subject<string>
private viewInitialized = false
private emitSearchAfterViewInit = false
constructor (
private route: ActivatedRoute,
private restService: RestService,
private router: Router
) { }
ngOnInit () {
this.initSearchStream()
this.listenToRouteSearchChange()
}
ngAfterViewInit () {
this.viewInitialized = true
// Init after view init to not send an event too early
if (this.emitOnInit && this.emitSearchAfterViewInit) this.emitSearch()
}
onInputSearch (event: Event) {
this.scheduleSearchUpdate((event.target as HTMLInputElement).value)
}
onResetTableFilter () {
this.immediateSearchUpdate('')
}
hasFilters () {
return this.filters && this.filters.length !== 0
}
isFilterEnabled (filter: AdvancedInputFilterChild) {
return this.enabledFilters.has(filter.value)
}
onFilterClick (filter: AdvancedInputFilterChild) {
const newSearch = this.isFilterEnabled(filter)
? this.removeFilterToSearch(this.searchValue, filter)
: this.addFilterToSearch(this.searchValue, filter)
this.router.navigate([ '.' ], { relativeTo: this.route, queryParams: { search: newSearch.trim() } })
}
private scheduleSearchUpdate (value: string) {
this.searchValue = value
this.searchStream.next(this.searchValue)
}
private immediateSearchUpdate (value: string) {
this.searchValue = value
this.setQueryParams(this.searchValue)
this.parseFilters(this.searchValue)
this.emitSearch()
}
private listenToRouteSearchChange () {
this.route.queryParams
.subscribe(params => {
const search = params.search || ''
debugLogger('On route search change "%s".', search)
if (this.searchValue === search) return
this.searchValue = search
this.parseFilters(this.searchValue)
this.emitSearch()
})
}
private initSearchStream () {
this.searchStream = new Subject()
this.searchStream
.pipe(
debounceTime(300),
distinctUntilChanged()
)
.subscribe(() => {
this.setQueryParams(this.searchValue)
this.parseFilters(this.searchValue)
this.emitSearch()
})
}
private emitSearch () {
if (!this.viewInitialized) {
this.emitSearchAfterViewInit = true
return
}
debugLogger('On search "%s".', this.searchValue)
this.search.emit(this.searchValue)
}
private setQueryParams (search: string) {
const queryParams: Params = {}
if (search) Object.assign(queryParams, { search })
this.router.navigate([ ], { queryParams })
}
private removeFilterToSearch (search: string, removedFilter: AdvancedInputFilterChild) {
return search.replace(removedFilter.value, '')
}
private addFilterToSearch (search: string, newFilter: AdvancedInputFilterChild) {
const prefix = newFilter.value.split(':').shift()
// Tokenize search and remove a potential existing filter
const tokens = this.restService.tokenizeString(search)
.filter(t => !t.startsWith(prefix))
tokens.push(newFilter.value)
return tokens.join(' ')
}
private parseFilters (search: string) {
const tokens = this.restService.tokenizeString(search)
this.enabledFilters = new Set()
for (const group of this.filters) {
for (const filter of group.children) {
if (tokens.includes(filter.value)) {
this.enabledFilters.add(filter.value)
}
}
}
}
}
|
