aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-05-03 16:38:07 +0200
committerChocobozzz <me@florianbigard.com>2021-05-03 16:42:15 +0200
commitf676e0e32112821255b70018282d59207932d987 (patch)
treed2ff5e4304d78e93bde4d3887accd9ff42ebb952 /client
parent1a7d0887b6c22ca6539a15297fd4159d33d7dc48 (diff)
downloadPeerTube-f676e0e32112821255b70018282d59207932d987.tar.gz
PeerTube-f676e0e32112821255b70018282d59207932d987.tar.zst
PeerTube-f676e0e32112821255b70018282d59207932d987.zip
More efficient advanced input filter
Diffstat (limited to 'client')
-rw-r--r--client/src/app/shared/shared-forms/advanced-input-filter.component.ts48
1 files changed, 38 insertions, 10 deletions
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.ts b/client/src/app/shared/shared-forms/advanced-input-filter.component.ts
index 1b0eed34b..c11f1ad1d 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.ts
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.ts
@@ -1,7 +1,7 @@
1import * as debug from 'debug' 1import * as debug from 'debug'
2import { Subject } from 'rxjs' 2import { Subject } from 'rxjs'
3import { debounceTime, distinctUntilChanged } from 'rxjs/operators' 3import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
4import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' 4import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
5import { ActivatedRoute, Params, Router } from '@angular/router' 5import { ActivatedRoute, Params, Router } from '@angular/router'
6 6
7export type AdvancedInputFilter = { 7export type AdvancedInputFilter = {
@@ -16,7 +16,7 @@ const logger = debug('peertube:AdvancedInputFilterComponent')
16 templateUrl: './advanced-input-filter.component.html', 16 templateUrl: './advanced-input-filter.component.html',
17 styleUrls: [ './advanced-input-filter.component.scss' ] 17 styleUrls: [ './advanced-input-filter.component.scss' ]
18}) 18})
19export class AdvancedInputFilterComponent implements OnInit { 19export class AdvancedInputFilterComponent implements OnInit, AfterViewInit {
20 @Input() filters: AdvancedInputFilter[] = [] 20 @Input() filters: AdvancedInputFilter[] = []
21 21
22 @Output() search = new EventEmitter<string>() 22 @Output() search = new EventEmitter<string>()
@@ -25,6 +25,9 @@ export class AdvancedInputFilterComponent implements OnInit {
25 25
26 private searchStream: Subject<string> 26 private searchStream: Subject<string>
27 27
28 private viewInitialized = false
29 private emitSearchAfterViewInit = false
30
28 constructor ( 31 constructor (
29 private route: ActivatedRoute, 32 private route: ActivatedRoute,
30 private router: Router 33 private router: Router
@@ -35,23 +38,37 @@ export class AdvancedInputFilterComponent implements OnInit {
35 this.listenToRouteSearchChange() 38 this.listenToRouteSearchChange()
36 } 39 }
37 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
38 onInputSearch (event: Event) { 48 onInputSearch (event: Event) {
39 this.updateSearch((event.target as HTMLInputElement).value) 49 this.scheduleSearchUpdate((event.target as HTMLInputElement).value)
40 } 50 }
41 51
42 onResetTableFilter () { 52 onResetTableFilter () {
43 this.updateSearch('') 53 this.immediateSearchUpdate('')
44 } 54 }
45 55
46 hasFilters () { 56 hasFilters () {
47 return this.filters.length !== 0 57 return this.filters.length !== 0
48 } 58 }
49 59
50 private updateSearch (value: string) { 60 private scheduleSearchUpdate (value: string) {
51 this.searchValue = value 61 this.searchValue = value
52 this.searchStream.next(this.searchValue) 62 this.searchStream.next(this.searchValue)
53 } 63 }
54 64
65 private immediateSearchUpdate (value: string) {
66 this.searchValue = value
67
68 this.setQueryParams(this.searchValue)
69 this.emitSearch()
70 }
71
55 private listenToRouteSearchChange () { 72 private listenToRouteSearchChange () {
56 this.route.queryParams 73 this.route.queryParams
57 .subscribe(params => { 74 .subscribe(params => {
@@ -59,7 +76,8 @@ export class AdvancedInputFilterComponent implements OnInit {
59 76
60 logger('On route search change "%s".', search) 77 logger('On route search change "%s".', search)
61 78
62 this.updateSearch(search) 79 this.searchValue = search
80 this.emitSearch()
63 }) 81 })
64 } 82 }
65 83
@@ -68,17 +86,27 @@ export class AdvancedInputFilterComponent implements OnInit {
68 86
69 this.searchStream 87 this.searchStream
70 .pipe( 88 .pipe(
71 debounceTime(200), 89 debounceTime(300),
72 distinctUntilChanged() 90 distinctUntilChanged()
73 ) 91 )
74 .subscribe(() => { 92 .subscribe(() => {
75 logger('On search "%s".', this.searchValue)
76
77 this.setQueryParams(this.searchValue) 93 this.setQueryParams(this.searchValue)
78 this.search.emit(this.searchValue) 94
95 this.emitSearch()
79 }) 96 })
80 } 97 }
81 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
82 private setQueryParams (search: string) { 110 private setQueryParams (search: string) {
83 const queryParams: Params = {} 111 const queryParams: Params = {}
84 112