Refactor rest table search filter

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>

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 videoService: VideoService
-    private route: ActivatedRoute,
+  ) {
-    private router: Router
-    ) {
     super()
 
     this.videoBlocklistActions = [
@@ -104,14 +104,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit, AfterV
         })
 
     this.initialize()
-
+    this.listenToSearchChange()
-    this.route.queryParams
-      .pipe(filter(params => params.search !== undefined && params.search !== null))
-      .subscribe(params => {
-        this.search = params.search
-        this.setTableFilter(params.search)
-        this.loadData()
-      })
   }
 
   ngAfterViewInit () {

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>

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.listenToSearchChange()
-    this.route.queryParams
-      .pipe(filter(params => params.search !== undefined && params.search !== null))
-      .subscribe(params => {
-        this.search = params.search
-        this.setTableFilter(params.search)
-        this.loadData()
-      })
   }
 
   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'
   }

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>

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 userService: UserService
-    private router: Router
+  ) {
-    ) {
     super()
   }
 
@@ -68,14 +68,7 @@ export class UserListComponent extends RestTable implements OnInit {
         .subscribe(config => this.serverConfig = config)
 
     this.initialize()
-
+    this.listenToSearchChange()
-    this.route.queryParams
-      .subscribe(params => {
-        this.search = params.search || ''
-
-        this.setTableFilter(this.search)
-        this.loadData()
-      })
 
     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()
   }

client/src/app/core/rest/rest-table.ts

@@ -1,9 +1,10 @@
-import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
+import * as debug from 'debug'
 import { LazyLoadEvent, SortMeta } from 'primeng/api'
-import { RestPagination } from './rest-pagination'
 import { Subject } from 'rxjs'
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
-import * as debug from 'debug'
+import { ActivatedRoute, Params, Router } from '@angular/router'
+import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
+import { RestPagination } from './rest-pagination'
 
 const logger = debug('peertube:tables:RestTable')
 
@@ -18,8 +19,13 @@ export abstract class RestTable {
   rowsPerPage = this.rowsPerPageOptions[0]
   expandedRows = {}
 
+  baseRoute: string
+
   protected searchStream: Subject<string>
 
+  protected route: ActivatedRoute
+  protected router: Router
+
   abstract getIdentifier (): string
 
   initialize () {
@@ -80,6 +86,33 @@ export abstract class RestTable {
   onSearch (event: Event) {
     const target = event.target as HTMLInputElement
     this.searchStream.next(target.value)
+
+    this.setQueryParams((event.target as HTMLInputElement).value)
+  }
+
+  setQueryParams (search: string) {
+    if (!this.baseRoute) return
+
+    const queryParams: Params = {}
+
+    if (search) Object.assign(queryParams, { search })
+    this.router.navigate([ this.baseRoute ], { queryParams })
+  }
+
+  resetTableFilter () {
+    this.setTableFilter('')
+    this.setQueryParams('')
+    this.resetSearch()
+  }
+
+  listenToSearchChange () {
+    this.route.queryParams
+      .subscribe(params => {
+        this.search = params.search || ''
+
+        this.setTableFilter(this.search)
+        this.loadData()
+      })
   }
 
   onPage (event: { first: number, rows: number }) {

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>

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 sanitizer: DomSanitizer
-    private route: ActivatedRoute,
-    private router: Router
   ) {
     super()
   }
@@ -66,16 +66,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
     ]
 
     this.initialize()
-
+    this.listenToSearchChange()
-    this.route.queryParams
-      .subscribe(params => {
-        this.search = params.search || ''
-
-        logger('On URL change (search: %s).', this.search)
-
-        this.setTableFilter(this.search)
-        this.loadData()
-      })
   }
 
   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
   }