Refactor rest table search filter

2 files changed, 6 insertions, 35 deletions

diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index 90638d176..1c4149147 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -25,7 +25,7 @@
           </div>
           <input
             type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-            (keyup)="onAbuseSearch($event)"
+            (keyup)="onSearch($event)"
           >
           <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetTableFilter()"></a>
           <span class="sr-only" i18n>Clear filters</span>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
index 3bc527684..ca0d23699 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
@@ -5,7 +5,7 @@ import { buildVideoLink, buildVideoOrPlaylistEmbed } from 'src/assets/player/uti
 import { environment } from 'src/environments/environment'
 import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core'
 import { DomSanitizer } from '@angular/platform-browser'
-import { ActivatedRoute, Params, Router } from '@angular/router'
+import { ActivatedRoute, Router } from '@angular/router'
 import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable } from '@app/core'
 import { Account, Actor, DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { AbuseService, BlocklistService, VideoBlockService } from '@app/shared/shared-moderation'
@@ -37,6 +37,8 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
   abuseActions: DropdownAction<ProcessedAbuse>[][] = []
 
   constructor (
+    protected route: ActivatedRoute,
+    protected router: Router,
     private notifier: Notifier,
     private abuseService: AbuseService,
     private blocklistService: BlocklistService,
@@ -45,9 +47,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
     private videoBlocklistService: VideoBlockService,
     private confirmService: ConfirmService,
     private markdownRenderer: MarkdownService,
-    private sanitizer: DomSanitizer,
-    private route: ActivatedRoute,
-    private router: Router
+    private sanitizer: DomSanitizer
   ) {
     super()
   }
@@ -66,16 +66,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
     ]
 
     this.initialize()
-
-    this.route.queryParams
-      .subscribe(params => {
-        this.search = params.search || ''
-
-        logger('On URL change (search: %s).', this.search)
-
-        this.setTableFilter(this.search)
-        this.loadData()
-      })
+    this.listenToSearchChange()
   }
 
   ngAfterViewInit () {
@@ -98,26 +89,6 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
     this.loadData()
   }
 
-  /* Table filter functions */
-  onAbuseSearch (event: Event) {
-    this.onSearch(event)
-    this.setQueryParams((event.target as HTMLInputElement).value)
-  }
-
-  setQueryParams (search: string) {
-    const queryParams: Params = {}
-    if (search) Object.assign(queryParams, { search })
-
-    this.router.navigate([ this.baseRoute ], { queryParams })
-  }
-
-  resetTableFilter () {
-    this.setTableFilter('')
-    this.setQueryParams('')
-    this.resetSearch()
-  }
-  /* END Table filter functions */
-
   isAbuseAccepted (abuse: AdminAbuse) {
     return abuse.state.id === AbuseState.ACCEPTED
   }