-import { Component, EventEmitter, Input, Output } from '@angular/core'
-import { Params } from '@angular/router'
+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
- queryParams: Params
+ value: string
}
+const logger = debug('peertube:AdvancedInputFilterComponent')
+
@Component({
selector: 'my-advanced-input-filter',
templateUrl: './advanced-input-filter.component.html',
styleUrls: [ './advanced-input-filter.component.scss' ]
})
-export class AdvancedInputFilterComponent {
+export class AdvancedInputFilterComponent implements OnInit, AfterViewInit {
@Input() filters: AdvancedInputFilter[] = []
+ @Input() emitOnInit = true
+
+ @Output() search = new EventEmitter<string>()
+
+ searchValue: string
+
+ private enabledFilters = new Set<string>()
- @Output() resetTableFilter = new EventEmitter<void>()
- @Output() search = new EventEmitter<Event>()
+ 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()
+ }
- onSearch (event: Event) {
- this.search.emit(event)
+ onInputSearch (event: Event) {
+ this.scheduleSearchUpdate((event.target as HTMLInputElement).value)
}
onResetTableFilter () {
- this.resetTableFilter.emit()
+ 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 || ''
+
+ logger('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
+ }
+
+ logger('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)
+ }
+ }
+ }
}
}