Implement video comment list in admin

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 @@
 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 @@
+<h1>
+  <my-global-icon iconName="cross" aria-hidden="true"></my-global-icon>
+  <ng-container i18n>Video comments</ng-container>
+</h1>
+
+this view does show comments from muted accounts so you can delete them
+
+<p-table
+  [value]="comments" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} comments"
+  (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
+>
+  <ng-template pTemplate="caption">
+    <div class="caption">
+      <div class="ml-auto">
+        <div class="input-group has-feedback has-clear">
+          <div class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
+            <div class="input-group-text" ngbDropdownToggle>
+              <span class="caret" aria-haspopup="menu" role="button"></span>
+            </div>
+
+            <div role="menu" ngbDropdownMenu>
+              <h6 class="dropdown-header" i18n>Advanced comments filters</h6>
+              <a [routerLink]="[ '/admin/moderation/video-comments/list' ]" [queryParams]="{ 'search': 'local:true' }" class="dropdown-item" i18n>Local comments</a>
+              <a [routerLink]="[ '/admin/moderation/video-comments/list' ]" [queryParams]="{ 'search': 'local:false' }" class="dropdown-item" i18n>Remote comments</a>
+            </div>
+          </div>
+          <input
+            type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+            (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>
+        </div>
+      </div>
+    </div>
+  </ng-template>
+
+  <ng-template pTemplate="header">
+    <tr>
+      <th style="width: 40px"></th>
+      <th style="width: 100px;" i18n>Account</th>
+      <th style="width: 100px;" i18n>Video</th>
+      <th style="width: 100px;" i18n>Comment</th>
+      <th style="width: 150px;" i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th style="width: 150px;"></th>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="body" let-videoComment let-expanded="expanded">
+    <tr>
+      <td class="expand-cell c-hand" [pRowToggler]="videoComment" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">
+        <span class="expander">
+          <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
+        </span>
+      </td>
+
+      <td>
+        {{ videoComment.by }}
+      </td>
+
+      <td>
+        {{ videoComment.video.name }}
+      </td>
+
+      <td>
+        <div [innerHTML]="videoComment.textHtml"></div>
+      </td>
+
+      <td>{{ videoComment.createdAt | date: 'short' }}</td>
+
+      <td class="action-cell">
+        <my-action-dropdown
+          [ngClass]="{ 'show': expanded }" placement="bottom-right" container="body"
+          i18n-label label="Actions" [actions]="videoCommentActions" [entry]="videoComment"
+        ></my-action-dropdown>
+      </td>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="rowexpansion" let-videoComment>
+    <tr>
+      <td class="expand-cell" colspan="5">
+        <div [innerHTML]="videoComment.textHtml"></div>
+      </td>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="5">
+        <div class="no-results">
+          <ng-container *ngIf="search" i18n>No comments found matching current filters.</ng-container>
+          <ng-container *ngIf="!search" i18n>No comments found.</ng-container>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
+
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<VideoCommentAdmin>[][] = []
+
+  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)
+      )
+  }
+}