interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor rest table search filter

This commit is contained in:
Chocobozzz 2020-11-16 14:47:05 +01:00
parent 7706b3703a
commit 5ed46c1bce
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
9 changed files with 61 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
View File

@ -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>

19
client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts
View File

@ -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 () {

2
client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
View File

@ -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>

34
client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts
View File

@ -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'
}

2
client/src/app/+admin/users/user-list/user-list.component.html
View File

@ -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>

37
client/src/app/+admin/users/user-list/user-list.component.ts
View File

@ -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()
}

39
client/src/app/core/rest/rest-table.ts
View File

@ -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 }) {

2
client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
View File

@ -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>

39
client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
View File

@ -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
}