From 0f8d00e3144060270d7fe603865fccaf18649c47 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 13 Nov 2020 16:38:23 +0100 Subject: Implement video comment list in admin --- client/src/app/+admin/admin.component.ts | 11 ++ client/src/app/+admin/admin.module.ts | 4 + .../src/app/+admin/moderation/moderation.routes.ts | 24 ++++- .../+admin/moderation/video-comment-list/index.ts | 1 + .../video-comment-list.component.html | 102 +++++++++++++++++++ .../video-comment-list.component.scss | 27 +++++ .../video-comment-list.component.ts | 111 +++++++++++++++++++++ .../shared-video-comment/video-comment.model.ts | 52 +++++++++- .../shared-video-comment/video-comment.service.ts | 45 ++++++++- 9 files changed, 373 insertions(+), 4 deletions(-) create mode 100644 client/src/app/+admin/moderation/video-comment-list/index.ts create mode 100644 client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html create mode 100644 client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss create mode 100644 client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts (limited to 'client') diff --git a/client/src/app/+admin/admin.component.ts b/client/src/app/+admin/admin.component.ts index b661a5517..dd92ed2ca 100644 --- a/client/src/app/+admin/admin.component.ts +++ b/client/src/app/+admin/admin.component.ts @@ -62,6 +62,13 @@ export class AdminComponent implements OnInit { iconName: 'cross' }) } + if (this.hasVideoCommentsRight()) { + moderationItems.children.push({ + label: $localize`Video comments`, + routerLink: '/admin/moderation/video-comments/list', + iconName: 'message-circle' + }) + } if (this.hasAccountsBlocklistRight()) { moderationItems.children.push({ label: $localize`Muted accounts`, @@ -140,4 +147,8 @@ export class AdminComponent implements OnInit { hasDebugRight () { return this.auth.getUser().hasRight(UserRight.MANAGE_DEBUG) } + + hasVideoCommentsRight () { + return this.auth.getUser().hasRight(UserRight.SEE_ALL_COMMENTS) + } } diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts index da517a55b..5c0864f48 100644 --- a/client/src/app/+admin/admin.module.ts +++ b/client/src/app/+admin/admin.module.ts @@ -7,6 +7,7 @@ import { SharedFormModule } from '@app/shared/shared-forms' import { SharedGlobalIconModule } from '@app/shared/shared-icons' import { SharedMainModule } from '@app/shared/shared-main' import { SharedModerationModule } from '@app/shared/shared-moderation' +import { SharedVideoCommentModule } from '@app/shared/shared-video-comment' import { AdminRoutingModule } from './admin-routing.module' import { AdminComponent } from './admin.component' import { ConfigComponent, EditCustomConfigComponent } from './config' @@ -18,6 +19,7 @@ import { VideoRedundancyInformationComponent } from './follows/video-redundancie import { AbuseListComponent, VideoBlockListComponent } from './moderation' import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } from './moderation/instance-blocklist' import { ModerationComponent } from './moderation/moderation.component' +import { VideoCommentListComponent } from './moderation/video-comment-list' import { PluginListInstalledComponent } from './plugins/plugin-list-installed/plugin-list-installed.component' import { PluginSearchComponent } from './plugins/plugin-search/plugin-search.component' import { PluginShowInstalledComponent } from './plugins/plugin-show-installed/plugin-show-installed.component' @@ -37,6 +39,7 @@ import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersCom SharedModerationModule, SharedGlobalIconModule, SharedAbuseListModule, + SharedVideoCommentModule, TableModule, SelectButtonModule, @@ -62,6 +65,7 @@ import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersCom ModerationComponent, VideoBlockListComponent, AbuseListComponent, + VideoCommentListComponent, InstanceServerBlocklistComponent, InstanceAccountBlocklistComponent, diff --git a/client/src/app/+admin/moderation/moderation.routes.ts b/client/src/app/+admin/moderation/moderation.routes.ts index b60dd5334..2e28f0911 100644 --- a/client/src/app/+admin/moderation/moderation.routes.ts +++ b/client/src/app/+admin/moderation/moderation.routes.ts @@ -1,8 +1,9 @@ import { Routes } from '@angular/router' +import { AbuseListComponent } from '@app/+admin/moderation/abuse-list' import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } from '@app/+admin/moderation/instance-blocklist' import { ModerationComponent } from '@app/+admin/moderation/moderation.component' -import { AbuseListComponent } from '@app/+admin/moderation/abuse-list' import { VideoBlockListComponent } from '@app/+admin/moderation/video-block-list' +import { VideoCommentListComponent } from './video-comment-list' import { UserRightGuard } from '@app/core' import { UserRight } from '@shared/models' @@ -37,6 +38,7 @@ export const ModerationRoutes: Routes = [ } } }, + { path: 'video-blacklist', redirectTo: 'video-blocks/list', @@ -64,10 +66,28 @@ export const ModerationRoutes: Routes = [ data: { userRight: UserRight.MANAGE_VIDEO_BLACKLIST, meta: { - title: $localize`Videos blocked` + title: $localize`Blocked videos` } } }, + + { + path: 'video-comments', + redirectTo: 'video-comments/list', + pathMatch: 'full' + }, + { + path: 'video-comments/list', + component: VideoCommentListComponent, + canActivate: [ UserRightGuard ], + data: { + userRight: UserRight.SEE_ALL_COMMENTS, + meta: { + title: $localize`Video comments` + } + } + }, + { path: 'blocklist/accounts', component: InstanceAccountBlocklistComponent, diff --git a/client/src/app/+admin/moderation/video-comment-list/index.ts b/client/src/app/+admin/moderation/video-comment-list/index.ts new file mode 100644 index 000000000..eb08b4177 --- /dev/null +++ b/client/src/app/+admin/moderation/video-comment-list/index.ts @@ -0,0 +1 @@ +export * from './video-comment-list.component' 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 new file mode 100644 index 000000000..b4f66a75f --- /dev/null +++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html @@ -0,0 +1,102 @@ +

+ + Video comments +

+ +this view does show comments from muted accounts so you can delete them + + + +
+
+
+
+
+ +
+ +
+
Advanced comments filters
+ Local comments + Remote comments +
+
+ + + Clear filters +
+
+
+ + + + + + Account + Video + Comment + Date + + + + + + + + + + + + + + {{ videoComment.by }} + + + + {{ videoComment.video.name }} + + + +
+ + + {{ videoComment.createdAt | date: 'short' }} + + + + + + + + + + +
+ + + + + + + +
+ No comments found matching current filters. + No comments found. +
+ + + + + diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss new file mode 100644 index 000000000..c92d1c39c --- /dev/null +++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss @@ -0,0 +1,27 @@ +@import 'mixins'; + +my-global-icon { + @include apply-svg-color(#7d7d7d); + + width: 12px; + height: 12px; + position: relative; + top: -1px; +} + +.input-group { + @include peertube-input-group(300px); + + .dropdown-toggle::after { + margin-left: 0; + } +} + +.caption { + justify-content: flex-end; + + input { + @include peertube-input-text(250px); + flex-grow: 1; + } +} 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 new file mode 100644 index 000000000..fdd5ec76e --- /dev/null +++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts @@ -0,0 +1,111 @@ +import { SortMeta } from 'primeng/api' +import { filter } from 'rxjs/operators' +import { AfterViewInit, Component, OnInit } from '@angular/core' +import { DomSanitizer } from '@angular/platform-browser' +import { ActivatedRoute, Params, Router } from '@angular/router' +import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable, ServerService } from '@app/core' +import { DropdownAction, VideoService } from '@app/shared/shared-main' +import { VideoCommentAdmin, VideoCommentService } from '@app/shared/shared-video-comment' + +@Component({ + selector: 'my-video-comment-list', + templateUrl: './video-comment-list.component.html', + styleUrls: [ './video-comment-list.component.scss' ] +}) +export class VideoCommentListComponent extends RestTable implements OnInit, AfterViewInit { + comments: VideoCommentAdmin[] + totalRecords = 0 + sort: SortMeta = { field: 'createdAt', order: -1 } + pagination: RestPagination = { count: this.rowsPerPage, start: 0 } + + videoCommentActions: DropdownAction[][] = [] + + constructor ( + private notifier: Notifier, + private serverService: ServerService, + private confirmService: ConfirmService, + private videoCommentService: VideoCommentService, + private markdownRenderer: MarkdownService, + private sanitizer: DomSanitizer, + private videoService: VideoService, + private route: ActivatedRoute, + private router: Router + ) { + super() + + this.videoCommentActions = [ + [ + + // remove this comment, + + // remove all comments of this account + + ] + ] + } + + 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() + }) + } + + ngAfterViewInit () { + if (this.search) this.setTableFilter(this.search) + } + + onSearch (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' + } + + toHtml (text: string) { + return this.markdownRenderer.textMarkdownToHTML(text) + } + + protected loadData () { + this.videoCommentService.getAdminVideoComments({ + pagination: this.pagination, + sort: this.sort, + search: this.search + }).subscribe( + async resultList => { + this.totalRecords = resultList.total + + this.comments = [] + + for (const c of resultList.data) { + this.comments.push( + new VideoCommentAdmin(c, await this.toHtml(c.text)) + ) + } + }, + + err => this.notifier.error(err.message) + ) + } +} diff --git a/client/src/app/shared/shared-video-comment/video-comment.model.ts b/client/src/app/shared/shared-video-comment/video-comment.model.ts index e85443196..1589091e5 100644 --- a/client/src/app/shared/shared-video-comment/video-comment.model.ts +++ b/client/src/app/shared/shared-video-comment/video-comment.model.ts @@ -1,6 +1,6 @@ import { getAbsoluteAPIUrl } from '@app/helpers' import { Actor } from '@app/shared/shared-main' -import { Account as AccountInterface, VideoComment as VideoCommentServerModel } from '@shared/models' +import { Account as AccountInterface, VideoComment as VideoCommentServerModel, VideoCommentAdmin as VideoCommentAdminServerModel } from '@shared/models' export class VideoComment implements VideoCommentServerModel { id: number @@ -46,3 +46,53 @@ export class VideoComment implements VideoCommentServerModel { } } } + +export class VideoCommentAdmin implements VideoCommentAdminServerModel { + id: number + url: string + text: string + textHtml: string + + threadId: number + inReplyToCommentId: number + + createdAt: Date | string + updatedAt: Date | string + + account: AccountInterface + + video: { + id: number + uuid: string + name: string + } + + by: string + accountAvatarUrl: string + + constructor (hash: VideoCommentAdminServerModel, textHtml: string) { + this.id = hash.id + this.url = hash.url + this.text = hash.text + this.textHtml = textHtml + + this.threadId = hash.threadId + this.inReplyToCommentId = hash.inReplyToCommentId + + this.createdAt = new Date(hash.createdAt.toString()) + this.updatedAt = new Date(hash.updatedAt.toString()) + + this.video = { + id: hash.video.id, + uuid: hash.video.uuid, + name: hash.video.name + } + + this.account = hash.account + + if (this.account) { + this.by = Actor.CREATE_BY_STRING(this.account.name, this.account.host) + this.accountAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.account) + } + } +} diff --git a/client/src/app/shared/shared-video-comment/video-comment.service.ts b/client/src/app/shared/shared-video-comment/video-comment.service.ts index 81c65aa38..e318e069d 100644 --- a/client/src/app/shared/shared-video-comment/video-comment.service.ts +++ b/client/src/app/shared/shared-video-comment/video-comment.service.ts @@ -2,18 +2,20 @@ import { Observable } from 'rxjs' import { catchError, map } from 'rxjs/operators' import { HttpClient, HttpParams } from '@angular/common/http' import { Injectable } from '@angular/core' -import { ComponentPaginationLight, RestExtractor, RestService } from '@app/core' +import { ComponentPaginationLight, RestExtractor, RestPagination, RestService } from '@app/core' import { objectLineFeedToHtml } from '@app/helpers' import { FeedFormat, ResultList, VideoComment as VideoCommentServerModel, + VideoCommentAdmin, VideoCommentCreate, VideoCommentThreadTree as VideoCommentThreadTreeServerModel } from '@shared/models' import { environment } from '../../../environments/environment' import { VideoCommentThreadTree } from './video-comment-thread-tree.model' import { VideoComment } from './video-comment.model' +import { SortMeta } from 'primeng/api' @Injectable() export class VideoCommentService { @@ -48,6 +50,27 @@ export class VideoCommentService { ) } + getAdminVideoComments (options: { + pagination: RestPagination, + sort: SortMeta, + search?: string + }): Observable> { + const { pagination, sort, search } = options + const url = VideoCommentService.BASE_VIDEO_URL + '/comments' + + let params = new HttpParams() + params = this.restService.addRestGetParams(params, pagination, sort) + + if (search) { + params = this.buildParamsFromSearch(search, params) + } + + return this.authHttp.get>(url, { params }) + .pipe( + catchError(res => this.restExtractor.handleError(res)) + ) + } + getVideoCommentThreads (parameters: { videoId: number | string, componentPagination: ComponentPaginationLight, @@ -146,4 +169,24 @@ export class VideoCommentService { return tree as VideoCommentThreadTree } + + private buildParamsFromSearch (search: string, params: HttpParams) { + const filters = this.restService.parseQueryStringFilter(search, { + state: { + prefix: 'local:', + isBoolean: true, + handler: v => { + if (v === 'true') return v + if (v === 'false') return v + + return undefined + } + }, + + searchAccount: { prefix: 'account:' }, + searchVideo: { prefix: 'video:' } + }) + + return this.restService.addObjectParams(params, filters) + } } -- cgit v1.2.3