Refactor rest table search filter

6 files changed, 19 insertions, 77 deletions

diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
index 96293ae5e..7250b1368 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
@@ -27,7 +27,7 @@
           </div>
           <input
             type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-            (keyup)="onBlockSearch($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/+admin/moderation/video-block-list/video-block-list.component.ts b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
index 2b1ef663c..82818547c 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
@@ -1,5 +1,5 @@
 import { SortMeta } from 'primeng/api'
-import { filter, switchMap } from 'rxjs/operators'
+import { switchMap } from 'rxjs/operators'
 import { buildVideoLink, buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
 import { environment } from 'src/environments/environment'
 import { AfterViewInit, Component, OnInit } from '@angular/core'
@@ -25,16 +25,16 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
   videoBlocklistActions: DropdownAction<VideoBlacklist>[][] = []
 
   constructor (
+    protected route: ActivatedRoute,
+    protected router: Router,
     private notifier: Notifier,
     private serverService: ServerService,
     private confirmService: ConfirmService,
     private videoBlocklistService: VideoBlockService,
     private markdownRenderer: MarkdownService,
     private sanitizer: DomSanitizer,
-    private videoService: VideoService,
-    private route: ActivatedRoute,
-    private router: Router
-    ) {
+    private videoService: VideoService
+  ) {
     super()
 
     this.videoBlocklistActions = [
@@ -104,14 +104,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
         })
 
     this.initialize()
-
-    this.route.queryParams
-      .pipe(filter(params => params.search !== undefined && params.search !== null))
-      .subscribe(params => {
-        this.search = params.search
-        this.setTableFilter(params.search)
-        this.loadData()
-      })
+    this.listenToSearchChange()
   }
 
   ngAfterViewInit () {
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
index 5c932739b..330ee2478 100644
--- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
+++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
@@ -31,7 +31,7 @@
           </div>
           <input
             type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-            (keyup)="onInputSearch($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/+admin/moderation/video-comment-list/video-comment-list.component.ts b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts
index d26047125..284ec541d 100644
--- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts
+++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts
@@ -14,6 +14,8 @@ import { FeedFormat, UserRight } from '@shared/models'
   styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-comment-list.component.scss' ]
 })
 export class VideoCommentListComponent extends RestTable implements OnInit, AfterViewInit {
+  baseRoute = '/admin/moderation/video-comments/list'
+
   comments: VideoCommentAdmin[]
   totalRecords = 0
   sort: SortMeta = { field: 'createdAt', order: -1 }
@@ -44,13 +46,13 @@ export class VideoCommentListComponent extends RestTable implements OnInit, Afte
   }
 
   constructor (
+    protected router: Router,
+    protected route: ActivatedRoute,
     private auth: AuthService,
     private notifier: Notifier,
     private confirmService: ConfirmService,
     private videoCommentService: VideoCommentService,
     private markdownRenderer: MarkdownService,
-    private route: ActivatedRoute,
-    private router: Router,
     private bulkService: BulkService
     ) {
     super()
@@ -75,39 +77,13 @@ export class VideoCommentListComponent extends RestTable implements OnInit, Afte
 
   ngOnInit () {
     this.initialize()
-
-    this.route.queryParams
-      .pipe(filter(params => params.search !== undefined && params.search !== null))
-      .subscribe(params => {
-        this.search = params.search
-        this.setTableFilter(params.search)
-        this.loadData()
-      })
+    this.listenToSearchChange()
   }
 
   ngAfterViewInit () {
     if (this.search) this.setTableFilter(this.search)
   }
 
-  onInputSearch (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([ '/admin/moderation/video-comments/list' ], { queryParams })
-  }
-
-  resetTableFilter () {
-    this.setTableFilter('')
-    this.setQueryParams('')
-    this.resetSearch()
-  }
-  /* END Table filter functions */
-
   getIdentifier () {
     return 'VideoCommentListComponent'
   }
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 63144502c..38445cee7 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -30,7 +30,7 @@
           </div>
           <input
             type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-            (keyup)="onUserSearch($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/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts
index 86812f73d..9f92358a0 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/users/user-list/user-list.component.ts
@@ -35,14 +35,14 @@ export class UserListComponent extends RestTable implements OnInit {
   private serverConfig: ServerConfig
 
   constructor (
+    protected route: ActivatedRoute,
+    protected router: Router,
     private notifier: Notifier,
     private confirmService: ConfirmService,
     private serverService: ServerService,
-    private userService: UserService,
     private auth: AuthService,
-    private route: ActivatedRoute,
-    private router: Router
-    ) {
+    private userService: UserService
+  ) {
     super()
   }
 
@@ -68,14 +68,7 @@ export class UserListComponent extends RestTable implements OnInit {
         .subscribe(config => this.serverConfig = config)
 
     this.initialize()
-
-    this.route.queryParams
-      .subscribe(params => {
-        this.search = params.search || ''
-
-        this.setTableFilter(this.search)
-        this.loadData()
-      })
+    this.listenToSearchChange()
 
     this.bulkUserActions = [
       [
@@ -170,26 +163,6 @@ export class UserListComponent extends RestTable implements OnInit {
     this.loadData()
   }
 
-  /* Table filter functions */
-  onUserSearch (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([ '/admin/users/list' ], { queryParams })
-  }
-
-  resetTableFilter () {
-    this.setTableFilter('')
-    this.setQueryParams('')
-    this.resetSearch()
-  }
-  /* END Table filter functions */
-
   switchToDefaultAvatar ($event: Event) {
     ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
   }