Refactor search filters

2 files changed, 74 insertions, 11 deletions

diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.html b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
index 03c4f127b..10d1296cf 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.html
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
@@ -1,5 +1,5 @@
 <div class="input-group has-feedback has-clear">
-  <div class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
+  <div *ngIf="hasFilters()" class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
     <div class="input-group-text" ngbDropdownToggle>
       <span class="caret" aria-haspopup="menu" role="button"></span>
     </div>
@@ -10,13 +10,15 @@
       <a *ngFor="let filter of filters" [routerLink]="[ '.' ]" [queryParams]="filter.queryParams" class="dropdown-item">
         {{ filter.label }}
       </a>
-
     </div>
   </div>
+
   <input
     type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-    (keyup)="onSearch($event)"
+    [(ngModel)]="searchValue"
+    (keyup)="onInputSearch($event)"
   >
+
   <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="onResetTableFilter()"></a>
   <span class="sr-only" i18n>Clear filters</span>
 </div>
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 394090751..1b0eed34b 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,27 +1,88 @@
-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 { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { ActivatedRoute, Params, Router } from '@angular/router'
 
 export type AdvancedInputFilter = {
   label: string
   queryParams: Params
 }
 
+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 {
   @Input() filters: AdvancedInputFilter[] = []
 
-  @Output() resetTableFilter = new EventEmitter<void>()
-  @Output() search = new EventEmitter<Event>()
+  @Output() search = new EventEmitter<string>()
+
+  searchValue: string
+
+  private searchStream: Subject<string>
+
+  constructor (
+    private route: ActivatedRoute,
+    private router: Router
+  ) { }
+
+  ngOnInit () {
+    this.initSearchStream()
+    this.listenToRouteSearchChange()
+  }
 
-  onSearch (event: Event) {
-    this.search.emit(event)
+  onInputSearch (event: Event) {
+    this.updateSearch((event.target as HTMLInputElement).value)
   }
 
   onResetTableFilter () {
-    this.resetTableFilter.emit()
+    this.updateSearch('')
+  }
+
+  hasFilters () {
+    return this.filters.length !== 0
+  }
+
+  private updateSearch (value: string) {
+    this.searchValue = value
+    this.searchStream.next(this.searchValue)
+  }
+
+  private listenToRouteSearchChange () {
+    this.route.queryParams
+      .subscribe(params => {
+        const search = params.search || ''
+
+        logger('On route search change "%s".', search)
+
+        this.updateSearch(search)
+      })
+  }
+
+  private initSearchStream () {
+    this.searchStream = new Subject()
+
+    this.searchStream
+      .pipe(
+        debounceTime(200),
+        distinctUntilChanged()
+      )
+      .subscribe(() => {
+        logger('On search "%s".', this.searchValue)
+
+        this.setQueryParams(this.searchValue)
+        this.search.emit(this.searchValue)
+      })
+  }
+
+  private setQueryParams (search: string) {
+    const queryParams: Params = {}
+
+    if (search) Object.assign(queryParams, { search })
+    this.router.navigate([ ], { queryParams })
   }
 }