From 5ed46c1bce29affbe101f126d58657ab484bffe7 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 16 Nov 2020 14:47:05 +0100 Subject: Refactor rest table search filter --- .../video-block-list.component.html | 2 +- .../video-block-list/video-block-list.component.ts | 19 ++++------- .../video-comment-list.component.html | 2 +- .../video-comment-list.component.ts | 34 +++---------------- .../users/user-list/user-list.component.html | 2 +- .../+admin/users/user-list/user-list.component.ts | 37 +++----------------- client/src/app/core/rest/rest-table.ts | 39 ++++++++++++++++++++-- .../abuse-list-table.component.html | 2 +- .../abuse-list-table.component.ts | 39 +++------------------- 9 files changed, 61 insertions(+), 115 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 @@ Clear filters 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[][] = [] 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 @@ Clear filters 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 @@ Clear filters 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() } diff --git a/client/src/app/core/rest/rest-table.ts b/client/src/app/core/rest/rest-table.ts index 7e7e6f4f7..50f6bf39d 100644 --- a/client/src/app/core/rest/rest-table.ts +++ b/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 + 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 }) { 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 @@ Clear filters 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[][] = [] 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 } -- cgit v1.2.3