Move admin comments list in overviews menu

9 files changed, 390 insertions, 6 deletions

diff --git a/client/src/app/+admin/overview/comments/index.ts b/client/src/app/+admin/overview/comments/index.ts
new file mode 100644
index 000000000..c487f7a81
--- /dev/null
+++ b/client/src/app/+admin/overview/comments/index.ts
@@ -0,0 +1,2 @@
+export * from './video-comment-list.component'
+export * from './video-comment.routes'
diff --git a/client/src/app/+admin/overview/comments/video-comment-list.component.html b/client/src/app/+admin/overview/comments/video-comment-list.component.html
new file mode 100644
index 000000000..0dbbbe1cc
--- /dev/null
+++ b/client/src/app/+admin/overview/comments/video-comment-list.component.html
@@ -0,0 +1,111 @@
+<h1>
+  <my-global-icon iconName="message-circle" aria-hidden="true"></my-global-icon>
+  <ng-container i18n>Video comments</ng-container>
+
+  <my-feed [syndicationItems]="syndicationItems"></my-feed>
+</h1>
+
+<em i18n>This view also shows comments from muted accounts.</em>
+
+<p-table
+  [value]="comments" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [sortField]="sort.field" [sortOrder]="sort.order" dataKey="id"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false" [selectionPageOnly]="true"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} comments"
+  [expandedRowKeys]="expandedRows" [(selection)]="selectedComments"
+>
+  <ng-template pTemplate="caption">
+    <div class="caption">
+      <div>
+        <my-action-dropdown
+          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange"
+          [actions]="bulkCommentActions" [entry]="selectedComments"
+        >
+        </my-action-dropdown>
+      </div>
+
+      <div class="ml-auto">
+        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
+      </div>
+    </div>
+  </ng-template>
+
+  <ng-template pTemplate="header">
+    <tr>
+      <th style="width: 40px;">
+        <p-tableHeaderCheckbox ariaLabel="Select all rows" i18n-ariaLabel></p-tableHeaderCheckbox>
+      </th>
+      <th style="width: 40px;"></th>
+      <th style="width: 150px;"></th>
+      <th style="width: 300px;" i18n>Account</th>
+      <th style="width: 300px;" i18n>Video</th>
+      <th i18n>Comment</th>
+      <th style="width: 150px;" i18n pSortableColumn="createdAt">Date <p-sortIcon field="createdAt"></p-sortIcon></th>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="body" let-videoComment let-expanded="expanded">
+    <tr [pSelectableRow]="videoComment">
+
+      <td class="checkbox-cell">
+        <p-tableCheckbox [value]="videoComment" ariaLabel="Select this row" i18n-ariaLabel></p-tableCheckbox>
+      </td>
+
+      <td class="expand-cell" [pRowToggler]="videoComment">
+        <my-table-expander-icon i18n-ngbTooltip ngbTooltip="See full comment" [expanded]="expanded"></my-table-expander-icon>
+      </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>
+
+      <td>
+        <a [href]="videoComment.account.localUrl" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
+          <div class="chip two-lines">
+            <my-actor-avatar [account]="videoComment.account" size="32"></my-actor-avatar>
+          <div>
+              {{ videoComment.account.displayName }}
+              <span>{{ videoComment.by }}</span>
+            </div>
+          </div>
+        </a>
+      </td>
+
+      <td class="video">
+        <em i18n>Commented video</em>
+
+        <a [href]="videoComment.localUrl" target="_blank" rel="noopener noreferrer">{{ videoComment.video.name }}</a>
+      </td>
+
+      <td class="comment-html c-hand" [pRowToggler]="videoComment">
+        <div [innerHTML]="videoComment.textHtml"></div>
+      </td>
+
+      <td class="c-hand" [pRowToggler]="videoComment">{{ videoComment.createdAt | date: 'short' }}</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="7">
+        <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/overview/comments/video-comment-list.component.scss b/client/src/app/+admin/overview/comments/video-comment-list.component.scss
new file mode 100644
index 000000000..3cf7b8db6
--- /dev/null
+++ b/client/src/app/+admin/overview/comments/video-comment-list.component.scss
@@ -0,0 +1,52 @@
+@use '_mixins' as *;
+@use '_variables' as *;
+
+my-feed {
+  @include margin-left(5px);
+
+  display: inline-block;
+  width: 15px;
+}
+
+my-global-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.video {
+  display: flex;
+  flex-direction: column;
+
+  em {
+    font-size: 11px;
+  }
+
+  a {
+    @include ellipsis;
+
+    color: pvar(--mainForegroundColor);
+  }
+}
+
+.comment-html {
+  ::ng-deep {
+    > div {
+      max-height: 22px;
+    }
+
+    div,
+    p {
+      @include ellipsis;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+}
+
+@media screen and (max-width: $primeng-breakpoint) {
+  .video {
+    align-items: flex-start !important;
+  }
+}
diff --git a/client/src/app/+admin/overview/comments/video-comment-list.component.ts b/client/src/app/+admin/overview/comments/video-comment-list.component.ts
new file mode 100644
index 000000000..25fe65133
--- /dev/null
+++ b/client/src/app/+admin/overview/comments/video-comment-list.component.ts
@@ -0,0 +1,186 @@
+import { SortMeta } from 'primeng/api'
+import { Component, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { AuthService, ConfirmService, MarkdownService, Notifier, RestPagination, RestTable } from '@app/core'
+import { AdvancedInputFilter } from '@app/shared/shared-forms'
+import { DropdownAction } from '@app/shared/shared-main'
+import { BulkService } from '@app/shared/shared-moderation'
+import { VideoCommentAdmin, VideoCommentService } from '@app/shared/shared-video-comment'
+import { FeedFormat, UserRight } from '@shared/models'
+
+@Component({
+  selector: 'my-video-comment-list',
+  templateUrl: './video-comment-list.component.html',
+  styleUrls: [ '../../../shared/shared-moderation/moderation.scss', './video-comment-list.component.scss' ]
+})
+export class VideoCommentListComponent extends RestTable implements OnInit {
+  comments: VideoCommentAdmin[]
+  totalRecords = 0
+  sort: SortMeta = { field: 'createdAt', order: -1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+
+  videoCommentActions: DropdownAction<VideoCommentAdmin>[][] = []
+
+  syndicationItems = [
+    {
+      format: FeedFormat.RSS,
+      label: 'media rss 2.0',
+      url: VideoCommentService.BASE_FEEDS_URL + FeedFormat.RSS.toLowerCase()
+    },
+    {
+      format: FeedFormat.ATOM,
+      label: 'atom 1.0',
+      url: VideoCommentService.BASE_FEEDS_URL + FeedFormat.ATOM.toLowerCase()
+    },
+    {
+      format: FeedFormat.JSON,
+      label: 'json 1.0',
+      url: VideoCommentService.BASE_FEEDS_URL + FeedFormat.JSON.toLowerCase()
+    }
+  ]
+
+  selectedComments: VideoCommentAdmin[] = []
+  bulkCommentActions: DropdownAction<VideoCommentAdmin[]>[] = []
+
+  inputFilters: AdvancedInputFilter[] = [
+    {
+      title: $localize`Advanced filters`,
+      children: [
+        {
+          value: 'local:true',
+          label: $localize`Local comments`
+        },
+        {
+          value: 'local:false',
+          label: $localize`Remote comments`
+        }
+      ]
+    }
+  ]
+
+  get authUser () {
+    return this.auth.getUser()
+  }
+
+  constructor (
+    protected router: Router,
+    protected route: ActivatedRoute,
+    private auth: AuthService,
+    private notifier: Notifier,
+    private confirmService: ConfirmService,
+    private videoCommentService: VideoCommentService,
+    private markdownRenderer: MarkdownService,
+    private bulkService: BulkService
+  ) {
+    super()
+
+    this.videoCommentActions = [
+      [
+        {
+          label: $localize`Delete this comment`,
+          handler: comment => this.deleteComment(comment),
+          isDisplayed: () => this.authUser.hasRight(UserRight.REMOVE_ANY_VIDEO_COMMENT)
+        },
+
+        {
+          label: $localize`Delete all comments of this account`,
+          description: $localize`Comments are deleted after a few minutes`,
+          handler: comment => this.deleteUserComments(comment),
+          isDisplayed: () => this.authUser.hasRight(UserRight.REMOVE_ANY_VIDEO_COMMENT)
+        }
+      ]
+    ]
+  }
+
+  ngOnInit () {
+    this.initialize()
+
+    this.bulkCommentActions = [
+      {
+        label: $localize`Delete`,
+        handler: comments => this.removeComments(comments),
+        isDisplayed: () => this.authUser.hasRight(UserRight.REMOVE_ANY_VIDEO_COMMENT),
+        iconName: 'delete'
+      }
+    ]
+  }
+
+  getIdentifier () {
+    return 'VideoCommentListComponent'
+  }
+
+  toHtml (text: string) {
+    return this.markdownRenderer.textMarkdownToHTML(text, true, true)
+  }
+
+  isInSelectionMode () {
+    return this.selectedComments.length !== 0
+  }
+
+  protected reloadData () {
+    this.videoCommentService.getAdminVideoComments({
+      pagination: this.pagination,
+      sort: this.sort,
+      search: this.search
+    }).subscribe({
+      next: 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))
+          )
+        }
+      },
+
+      error: err => this.notifier.error(err.message)
+    })
+  }
+
+  private removeComments (comments: VideoCommentAdmin[]) {
+    const commentArgs = comments.map(c => ({ videoId: c.video.id, commentId: c.id }))
+
+    this.videoCommentService.deleteVideoComments(commentArgs)
+      .subscribe({
+        next: () => {
+          this.notifier.success($localize`${commentArgs.length} comments deleted.`)
+          this.reloadData()
+        },
+
+        error: err => this.notifier.error(err.message),
+
+        complete: () => this.selectedComments = []
+      })
+  }
+
+  private deleteComment (comment: VideoCommentAdmin) {
+    this.videoCommentService.deleteVideoComment(comment.video.id, comment.id)
+      .subscribe({
+        next: () => this.reloadData(),
+
+        error: err => this.notifier.error(err.message)
+      })
+  }
+
+  private async deleteUserComments (comment: VideoCommentAdmin) {
+    const message = $localize`Do you really want to delete all comments of ${comment.by}?`
+    const res = await this.confirmService.confirm(message, $localize`Delete`)
+    if (res === false) return
+
+    const options = {
+      accountName: comment.by,
+      scope: 'instance' as 'instance'
+    }
+
+    this.bulkService.removeCommentsOf(options)
+      .subscribe({
+        next: () => {
+          this.notifier.success($localize`Comments of ${options.accountName} will be deleted in a few minutes`)
+        },
+
+        error: err => this.notifier.error(err.message)
+      })
+  }
+}
diff --git a/client/src/app/+admin/overview/comments/video-comment.routes.ts b/client/src/app/+admin/overview/comments/video-comment.routes.ts
new file mode 100644
index 000000000..f0bd440ad
--- /dev/null
+++ b/client/src/app/+admin/overview/comments/video-comment.routes.ts
@@ -0,0 +1,30 @@
+import { Routes } from '@angular/router'
+import { UserRightGuard } from '@app/core'
+import { UserRight } from '@shared/models'
+import { VideoCommentListComponent } from './video-comment-list.component'
+
+export const commentRoutes: Routes = [
+  {
+    path: 'comments',
+    canActivate: [ UserRightGuard ],
+    data: {
+      userRight: UserRight.SEE_ALL_COMMENTS
+    },
+    children: [
+      {
+        path: '',
+        redirectTo: 'list',
+        pathMatch: 'full'
+      },
+      {
+        path: 'list',
+        component: VideoCommentListComponent,
+        data: {
+          meta: {
+            title: $localize`Comments list`
+          }
+        }
+      }
+    ]
+  }
+]
diff --git a/client/src/app/+admin/overview/index.ts b/client/src/app/+admin/overview/index.ts
index a9c46893f..111360734 100644
--- a/client/src/app/+admin/overview/index.ts
+++ b/client/src/app/+admin/overview/index.ts
@@ -1,3 +1,4 @@
+export * from './comments'
 export * from './users'
 export * from './videos'
 export * from './overview.routes'
diff --git a/client/src/app/+admin/overview/overview.routes.ts b/client/src/app/+admin/overview/overview.routes.ts
index 1e6686d16..72d6835d7 100644
--- a/client/src/app/+admin/overview/overview.routes.ts
+++ b/client/src/app/+admin/overview/overview.routes.ts
@@ -1,8 +1,10 @@
 import { Routes } from '@angular/router'
-import { UsersRoutes } from './users'
-import { VideosRoutes } from './videos'
+import { commentRoutes } from './comments'
+import { usersRoutes } from './users'
+import { videosRoutes } from './videos'
 
 export const OverviewRoutes: Routes = [
-  ...UsersRoutes,
-  ...VideosRoutes
+  ...commentRoutes,
+  ...usersRoutes,
+  ...videosRoutes
 ]
diff --git a/client/src/app/+admin/overview/users/users.routes.ts b/client/src/app/+admin/overview/users/users.routes.ts
index 8b63f5bc7..c9724e5fb 100644
--- a/client/src/app/+admin/overview/users/users.routes.ts
+++ b/client/src/app/+admin/overview/users/users.routes.ts
@@ -4,7 +4,7 @@ import { UserRight } from '@shared/models'
 import { UserCreateComponent, UserUpdateComponent } from './user-edit'
 import { UserListComponent } from './user-list'
 
-export const UsersRoutes: Routes = [
+export const usersRoutes: Routes = [
   {
     path: 'users',
     canActivate: [ UserRightGuard ],
diff --git a/client/src/app/+admin/overview/videos/video.routes.ts b/client/src/app/+admin/overview/videos/video.routes.ts
index 984df7b82..01cb5b497 100644
--- a/client/src/app/+admin/overview/videos/video.routes.ts
+++ b/client/src/app/+admin/overview/videos/video.routes.ts
@@ -3,7 +3,7 @@ import { UserRightGuard } from '@app/core'
 import { UserRight } from '@shared/models'
 import { VideoListComponent } from './video-list.component'
 
-export const VideosRoutes: Routes = [
+export const videosRoutes: Routes = [
   {
     path: 'videos',
     canActivate: [ UserRightGuard ],