client/src/app/shared/shared-forms/advanced-input-filter.component.ts

   1 import * as debug from 'debug'
   2 import { Subject } from 'rxjs'
   3 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
   4 import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
   5 import { ActivatedRoute, Params, Router } from '@angular/router'
   6
   7 export type AdvancedInputFilter = {
   8   label: string
   9   queryParams: Params
  10 }
  11
  12 const logger = debug('peertube:AdvancedInputFilterComponent')
  13
  14 @Component({
  15   selector: 'my-advanced-input-filter',
  16   templateUrl: './advanced-input-filter.component.html',
  17   styleUrls: [ './advanced-input-filter.component.scss' ]
  18 })
  19 export class AdvancedInputFilterComponent implements OnInit, AfterViewInit {
  20   @Input() filters: AdvancedInputFilter[] = []
  21
  22   @Output() search = new EventEmitter<string>()
  23
  24   searchValue: string
  25
  26   private searchStream: Subject<string>
  27
  28   private viewInitialized = false
  29   private emitSearchAfterViewInit = false
  30
  31   constructor (
  32     private route: ActivatedRoute,
  33     private router: Router
  34   ) { }
  35
  36   ngOnInit () {
  37     this.initSearchStream()
  38     this.listenToRouteSearchChange()
  39   }
  40
  41   ngAfterViewInit () {
  42     this.viewInitialized = true
  43
  44     // Init after view init to not send an event too early
  45     if (this.emitSearchAfterViewInit) this.emitSearch()
  46   }
  47
  48   onInputSearch (event: Event) {
  49     this.scheduleSearchUpdate((event.target as HTMLInputElement).value)
  50   }
  51
  52   onResetTableFilter () {
  53     this.immediateSearchUpdate('')
  54   }
  55
  56   hasFilters () {
  57     return this.filters.length !== 0
  58   }
  59
  60   private scheduleSearchUpdate (value: string) {
  61     this.searchValue = value
  62     this.searchStream.next(this.searchValue)
  63   }
  64
  65   private immediateSearchUpdate (value: string) {
  66     this.searchValue = value
  67
  68     this.setQueryParams(this.searchValue)
  69     this.emitSearch()
  70   }
  71
  72   private listenToRouteSearchChange () {
  73     this.route.queryParams
  74       .subscribe(params => {
  75         const search = params.search || ''
  76
  77         logger('On route search change "%s".', search)
  78
  79         this.searchValue = search
  80         this.emitSearch()
  81       })
  82   }
  83
  84   private initSearchStream () {
  85     this.searchStream = new Subject()
  86
  87     this.searchStream
  88       .pipe(
  89         debounceTime(300),
  90         distinctUntilChanged()
  91       )
  92       .subscribe(() => {
  93         this.setQueryParams(this.searchValue)
  94
  95         this.emitSearch()
  96       })
  97   }
  98
  99   private emitSearch () {
 100     if (!this.viewInitialized) {
 101       this.emitSearchAfterViewInit = true
 102       return
 103     }
 104
 105     logger('On search "%s".', this.searchValue)
 106
 107     this.search.emit(this.searchValue)
 108   }
 109
 110   private setQueryParams (search: string) {
 111     const queryParams: Params = {}
 112
 113     if (search) Object.assign(queryParams, { search })
 114     this.router.navigate([ ], { queryParams })
 115   }
 116 }