aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+admin/moderation
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-11-13 16:38:23 +0100
committerChocobozzz <me@florianbigard.com>2020-11-13 16:38:23 +0100
commit0f8d00e3144060270d7fe603865fccaf18649c47 (patch)
tree6ccd0b44735ea4541a53d4fda17459260a69e676 /client/src/app/+admin/moderation
parentdc13623baa244e13c33cc803de808818ef1e95a4 (diff)
downloadPeerTube-0f8d00e3144060270d7fe603865fccaf18649c47.tar.gz
PeerTube-0f8d00e3144060270d7fe603865fccaf18649c47.tar.zst
PeerTube-0f8d00e3144060270d7fe603865fccaf18649c47.zip
Implement video comment list in admin
Diffstat (limited to 'client/src/app/+admin/moderation')
-rw-r--r--client/src/app/+admin/moderation/moderation.routes.ts24
-rw-r--r--client/src/app/+admin/moderation/video-comment-list/index.ts1
-rw-r--r--client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html102
-rw-r--r--client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss27
-rw-r--r--client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.ts111
5 files changed, 263 insertions, 2 deletions
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 @@
1import { Routes } from '@angular/router' 1import { Routes } from '@angular/router'
2import { AbuseListComponent } from '@app/+admin/moderation/abuse-list'
2import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } from '@app/+admin/moderation/instance-blocklist' 3import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } from '@app/+admin/moderation/instance-blocklist'
3import { ModerationComponent } from '@app/+admin/moderation/moderation.component' 4import { ModerationComponent } from '@app/+admin/moderation/moderation.component'
4import { AbuseListComponent } from '@app/+admin/moderation/abuse-list'
5import { VideoBlockListComponent } from '@app/+admin/moderation/video-block-list' 5import { VideoBlockListComponent } from '@app/+admin/moderation/video-block-list'
6import { VideoCommentListComponent } from './video-comment-list'
6import { UserRightGuard } from '@app/core' 7import { UserRightGuard } from '@app/core'
7import { UserRight } from '@shared/models' 8import { UserRight } from '@shared/models'
8 9
@@ -37,6 +38,7 @@ export const ModerationRoutes: Routes = [
37 } 38 }
38 } 39 }
39 }, 40 },
41
40 { 42 {
41 path: 'video-blacklist', 43 path: 'video-blacklist',
42 redirectTo: 'video-blocks/list', 44 redirectTo: 'video-blocks/list',
@@ -64,10 +66,28 @@ export const ModerationRoutes: Routes = [
64 data: { 66 data: {
65 userRight: UserRight.MANAGE_VIDEO_BLACKLIST, 67 userRight: UserRight.MANAGE_VIDEO_BLACKLIST,
66 meta: { 68 meta: {
67 title: $localize`Videos blocked` 69 title: $localize`Blocked videos`
68 } 70 }
69 } 71 }
70 }, 72 },
73
74 {
75 path: 'video-comments',
76 redirectTo: 'video-comments/list',
77 pathMatch: 'full'
78 },
79 {
80 path: 'video-comments/list',
81 component: VideoCommentListComponent,
82 canActivate: [ UserRightGuard ],
83 data: {
84 userRight: UserRight.SEE_ALL_COMMENTS,
85 meta: {
86 title: $localize`Video comments`
87 }
88 }
89 },
90
71 { 91 {
72 path: 'blocklist/accounts', 92 path: 'blocklist/accounts',
73 component: InstanceAccountBlocklistComponent, 93 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 @@
1<h1>
2 <my-global-icon iconName="cross" aria-hidden="true"></my-global-icon>
3 <ng-container i18n>Video comments</ng-container>
4</h1>
5
6this view does show comments from muted accounts so you can delete them
7
8<p-table
9 [value]="comments" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
10 [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
11 [showCurrentPageReport]="true" i18n-currentPageReportTemplate
12 currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} comments"
13 (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
14>
15 <ng-template pTemplate="caption">
16 <div class="caption">
17 <div class="ml-auto">
18 <div class="input-group has-feedback has-clear">
19 <div class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
20 <div class="input-group-text" ngbDropdownToggle>
21 <span class="caret" aria-haspopup="menu" role="button"></span>
22 </div>
23
24 <div role="menu" ngbDropdownMenu>
25 <h6 class="dropdown-header" i18n>Advanced comments filters</h6>
26 <a [routerLink]="[ '/admin/moderation/video-comments/list' ]" [queryParams]="{ 'search': 'local:true' }" class="dropdown-item" i18n>Local comments</a>
27 <a [routerLink]="[ '/admin/moderation/video-comments/list' ]" [queryParams]="{ 'search': 'local:false' }" class="dropdown-item" i18n>Remote comments</a>
28 </div>
29 </div>
30 <input
31 type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
32 (keyup)="onSearch($event)"
33 >
34 <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetTableFilter()"></a>
35 <span class="sr-only" i18n>Clear filters</span>
36 </div>
37 </div>
38 </div>
39 </ng-template>
40
41 <ng-template pTemplate="header">
42 <tr>
43 <th style="width: 40px"></th>
44 <th style="width: 100px;" i18n>Account</th>
45 <th style="width: 100px;" i18n>Video</th>
46 <th style="width: 100px;" i18n>Comment</th>
47 <th style="width: 150px;" i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
48 <th style="width: 150px;"></th>
49 </tr>
50 </ng-template>
51
52 <ng-template pTemplate="body" let-videoComment let-expanded="expanded">
53 <tr>
54 <td class="expand-cell c-hand" [pRowToggler]="videoComment" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">
55 <span class="expander">
56 <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
57 </span>
58 </td>
59
60 <td>
61 {{ videoComment.by }}
62 </td>
63
64 <td>
65 {{ videoComment.video.name }}
66 </td>
67
68 <td>
69 <div [innerHTML]="videoComment.textHtml"></div>
70 </td>
71
72 <td>{{ videoComment.createdAt | date: 'short' }}</td>
73
74 <td class="action-cell">
75 <my-action-dropdown
76 [ngClass]="{ 'show': expanded }" placement="bottom-right" container="body"
77 i18n-label label="Actions" [actions]="videoCommentActions" [entry]="videoComment"
78 ></my-action-dropdown>
79 </td>
80 </tr>
81 </ng-template>
82
83 <ng-template pTemplate="rowexpansion" let-videoComment>
84 <tr>
85 <td class="expand-cell" colspan="5">
86 <div [innerHTML]="videoComment.textHtml"></div>
87 </td>
88 </tr>
89 </ng-template>
90
91 <ng-template pTemplate="emptymessage">
92 <tr>
93 <td colspan="5">
94 <div class="no-results">
95 <ng-container *ngIf="search" i18n>No comments found matching current filters.</ng-container>
96 <ng-container *ngIf="!search" i18n>No comments found.</ng-container>
97 </div>
98 </td>
99 </tr>
100 </ng-template>
101</p-table>
102
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 @@
1@import 'mixins';
2
3my-global-icon {
4 @include apply-svg-color(#7d7d7d);
5
6 width: 12px;
7 height: 12px;
8 position: relative;
9 top: -1px;
10}
11
12.input-group {
13 @include peertube-input-group(300px);
14
15 .dropdown-toggle::after {
16 margin-left: 0;
17 }
18}
19
20.caption {
21 justify-content: flex-end;
22
23 input {
24 @include peertube-input-text(250px);
25 flex-grow: 1;
26 }
27}
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 @@
1import { SortMeta } from 'primeng/api'
2import { filter } from 'rxjs/operators'
3import { AfterViewInit, Component, OnInit } from '@angular/core'
4import { DomSanitizer } from '@angular/platform-browser'
5import { ActivatedRoute, Params, Router } from '@angular/router'
6import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
7import { DropdownAction, VideoService } from '@app/shared/shared-main'
8import { VideoCommentAdmin, VideoCommentService } from '@app/shared/shared-video-comment'
9
10@Component({
11 selector: 'my-video-comment-list',
12 templateUrl: './video-comment-list.component.html',
13 styleUrls: [ './video-comment-list.component.scss' ]
14})
15export class VideoCommentListComponent extends RestTable implements OnInit, AfterViewInit {
16 comments: VideoCommentAdmin[]
17 totalRecords = 0
18 sort: SortMeta = { field: 'createdAt', order: -1 }
19 pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
20
21 videoCommentActions: DropdownAction<VideoCommentAdmin>[][] = []
22
23 constructor (
24 private notifier: Notifier,
25 private serverService: ServerService,
26 private confirmService: ConfirmService,
27 private videoCommentService: VideoCommentService,
28 private markdownRenderer: MarkdownService,
29 private sanitizer: DomSanitizer,
30 private videoService: VideoService,
31 private route: ActivatedRoute,
32 private router: Router
33 ) {
34 super()
35
36 this.videoCommentActions = [
37 [
38
39 // remove this comment,
40
41 // remove all comments of this account
42
43 ]
44 ]
45 }
46
47 ngOnInit () {
48 this.initialize()
49
50 this.route.queryParams
51 .pipe(filter(params => params.search !== undefined && params.search !== null))
52 .subscribe(params => {
53 this.search = params.search
54 this.setTableFilter(params.search)
55 this.loadData()
56 })
57 }
58
59 ngAfterViewInit () {
60 if (this.search) this.setTableFilter(this.search)
61 }
62
63 onSearch (event: Event) {
64 this.onSearch(event)
65 this.setQueryParams((event.target as HTMLInputElement).value)
66 }
67
68 setQueryParams (search: string) {
69 const queryParams: Params = {}
70
71 if (search) Object.assign(queryParams, { search })
72 this.router.navigate([ '/admin/moderation/video-comments/list' ], { queryParams })
73 }
74
75 resetTableFilter () {
76 this.setTableFilter('')
77 this.setQueryParams('')
78 this.resetSearch()
79 }
80 /* END Table filter functions */
81
82 getIdentifier () {
83 return 'VideoCommentListComponent'
84 }
85
86 toHtml (text: string) {
87 return this.markdownRenderer.textMarkdownToHTML(text)
88 }
89
90 protected loadData () {
91 this.videoCommentService.getAdminVideoComments({
92 pagination: this.pagination,
93 sort: this.sort,
94 search: this.search
95 }).subscribe(
96 async resultList => {
97 this.totalRecords = resultList.total
98
99 this.comments = []
100
101 for (const c of resultList.data) {
102 this.comments.push(
103 new VideoCommentAdmin(c, await this.toHtml(c.text))
104 )
105 }
106 },
107
108 err => this.notifier.error(err.message)
109 )
110 }
111}