From 25a42e293be90d35afad2096e9db2fa3d617d855 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Sun, 3 May 2020 23:01:57 +0200 Subject: Fix rowsPerPage change, add filter clear button, update video-abuse-list search query param dynamically --- .../instance-account-blocklist.component.html | 4 +- .../instance-server-blocklist.component.html | 4 +- .../video-abuse-details.component.html | 4 +- .../video-abuse-details.component.ts | 11 ++--- .../video-abuse-list.component.html | 18 +++----- .../video-abuse-list/video-abuse-list.component.ts | 51 +++++++++++++++++----- .../video-blacklist-list.component.html | 6 ++- 7 files changed, 64 insertions(+), 34 deletions(-) (limited to 'client/src/app/+admin/moderation') diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html index 99b4e267c..262705603 100644 --- a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html +++ b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.html @@ -6,11 +6,13 @@ >
-
+
+ + Clear filters
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html index aecdca387..17364ae04 100644 --- a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html +++ b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.html @@ -6,11 +6,13 @@ >
-
+
+ + Clear filters
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html index 704d43ac4..588d38395 100644 --- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html +++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.html @@ -14,7 +14,7 @@ alt="Avatar" >
- {{ createByString(videoAbuse.reporterAccount) }} + {{ videoAbuse.reporterAccount.nameWithHost }}
@@ -34,7 +34,7 @@ alt="Avatar" >
- {{ videoAbuse.video.channel.ownerAccount ? createByString(videoAbuse.video.channel.ownerAccount) : '' }} + {{ videoAbuse.video.channel.ownerAccount ? videoAbuse.video.channel.ownerAccount.nameWithHost : '' }}
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.ts b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.ts index 5481915b9..d9cb19845 100644 --- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.ts +++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-details.component.ts @@ -1,6 +1,7 @@ -import { Component, ViewEncapsulation, Input } from '@angular/core' -import { VideoAbuse } from '../../../../../../shared' +import { Component, Input } from '@angular/core' import { Account } from '@app/shared/account/account.model' +import { Actor } from '@app/shared/actor/actor.model' +import { ProcessedVideoAbuse } from './video-abuse-list.component' @Component({ selector: 'my-video-abuse-details', @@ -8,9 +9,9 @@ import { Account } from '@app/shared/account/account.model' styleUrls: [ '../moderation.component.scss' ] }) export class VideoAbuseDetailsComponent { - @Input() videoAbuse: VideoAbuse + @Input() videoAbuse: ProcessedVideoAbuse - createByString (account: Account) { - return Account.CREATE_BY_STRING(account.name, account.host) + switchToDefaultAvatar ($event: Event) { + ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL() } } diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html index 2e7b60e2f..ba05073cf 100644 --- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html +++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html @@ -3,25 +3,19 @@ [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id" [resizableColumns]="true" [showCurrentPageReport]="true" i18n-currentPageReportTemplate currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} reports" - (onPage)="onPage()" [expandedRowKeys]="expandedRows" + (onPage)="onPage($event)" [expandedRowKeys]="expandedRows" >
-
+
+ + Clear filters
@@ -68,7 +64,7 @@ >
{{ videoAbuse.reporterAccount.displayName }} - {{ createByString(videoAbuse.reporterAccount) }} + {{ videoAbuse.reporterAccount.nameWithHost }}
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts index 83d194d52..f54e3dccd 100644 --- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts +++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts @@ -16,9 +16,23 @@ import { getAbsoluteAPIUrl } from '@app/shared/misc/utils' import { DomSanitizer } from '@angular/platform-browser' import { BlocklistService } from '@app/shared/blocklist' import { VideoService } from '@app/shared/video/video.service' -import { ActivatedRoute } from '@angular/router' +import { ActivatedRoute, Params, Router } from '@angular/router' import { filter } from 'rxjs/operators' +export type ProcessedVideoAbuse = VideoAbuse & { + moderationCommentHtml?: string, + reasonHtml?: string + embedHtml?: string + updatedAt?: Date + // override bare server-side definitions with rich client-side definitions + reporterAccount: Account + video: VideoAbuse['video'] & { + channel: VideoAbuse['video']['channel'] & { + ownerAccount: Account + } + } +} + @Component({ selector: 'my-video-abuse-list', templateUrl: './video-abuse-list.component.html', @@ -27,7 +41,7 @@ import { filter } from 'rxjs/operators' export class VideoAbuseListComponent extends RestTable implements OnInit, AfterViewInit { @ViewChild('moderationCommentModal', { static: true }) moderationCommentModal: ModerationCommentModalComponent - videoAbuses: (VideoAbuse & { moderationCommentHtml?: string, reasonHtml?: string })[] = [] + videoAbuses: ProcessedVideoAbuse[] = [] totalRecords = 0 sort: SortMeta = { field: 'createdAt', order: 1 } pagination: RestPagination = { count: this.rowsPerPage, start: 0 } @@ -44,7 +58,8 @@ export class VideoAbuseListComponent extends RestTable implements OnInit, AfterV private i18n: I18n, private markdownRenderer: MarkdownService, private sanitizer: DomSanitizer, - private route: ActivatedRoute + private route: ActivatedRoute, + private router: Router ) { super() @@ -212,15 +227,24 @@ export class VideoAbuseListComponent extends RestTable implements OnInit, AfterV this.loadData() } - createByString (account: Account) { - return Account.CREATE_BY_STRING(account.name, account.host) + /* 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([ '/admin/moderation/video-abuses/list' ], { queryParams }) } - setTableFilter (filter: string) { - // FIXME: cannot use ViewChild, so create a component for the filter input - const filterInput = document.getElementById('table-filter') as HTMLInputElement - if (filterInput) filterInput.value = filter + resetTableFilter () { + this.setTableFilter('') + this.setQueryParams('') + this.resetSearch() } + /* END Table filter functions */ isVideoAbuseAccepted (videoAbuse: VideoAbuse) { return videoAbuse.state.id === VideoAbuseState.ACCEPTED @@ -279,17 +303,20 @@ export class VideoAbuseListComponent extends RestTable implements OnInit, AfterV }).subscribe( async resultList => { this.totalRecords = resultList.total + this.videoAbuses = [] - this.videoAbuses = resultList.data - - for (const abuse of this.videoAbuses) { + for (const abuse of resultList.data) { Object.assign(abuse, { reasonHtml: await this.toHtml(abuse.reason), moderationCommentHtml: await this.toHtml(abuse.moderationComment), embedHtml: this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse)), reporterAccount: new Account(abuse.reporterAccount) }) + + if (abuse.video.channel?.ownerAccount) abuse.video.channel.ownerAccount = new Account(abuse.video.channel.ownerAccount) if (abuse.updatedAt === abuse.createdAt) delete abuse.updatedAt + + this.videoAbuses.push(abuse as ProcessedVideoAbuse) } }, diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html index b3f7789df..eb194b023 100644 --- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html +++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html @@ -3,15 +3,17 @@ [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id" [showCurrentPageReport]="true" i18n-currentPageReportTemplate currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} blacklisted videos" - (onPage)="onPage()" [expandedRowKeys]="expandedRows" + (onPage)="onPage($event)" [expandedRowKeys]="expandedRows" >
-
+
+ + Clear filters
-- cgit v1.2.3