Add search for video, reporter and channel name fields

3 files changed, 67 insertions, 29 deletions

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 2204bb371..c1ce093d7 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
@@ -4,6 +4,17 @@
   [showCurrentPageReport]="true" i18n-currentPageReportTemplate
   currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} reports"
 >
+  <ng-template pTemplate="caption">
+    <div class="caption">
+      <div class="ml-auto">
+        <input
+          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+          (keyup)="onSearch($event)"
+        >
+      </div>
+    </div>
+  </ng-template>
+
   <ng-template pTemplate="header">
     <tr> <!-- header -->
       <th style="width: 40px;"></th>
@@ -40,18 +51,14 @@
         </a>
       </td>
 
-      <td>
+      <td *ngIf="!videoAbuse.video.deleted">
         <a [href]="getVideoUrl(videoAbuse)" class="video-abuse-video-link" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
           <div class="video-abuse-video">
-            <div class="video-abuse-video-image">
-              <img *ngIf="!videoAbuse.video.deleted" [src]="videoAbuse.video.thumbnailPath">
-              <span *ngIf="videoAbuse.video.deleted" i18n>Deleted</span>
-            </div>
+            <div class="video-abuse-video-image"><img [src]="videoAbuse.video.thumbnailPath"></div>
             <div class="video-abuse-video-text">
               <div>
                 {{ videoAbuse.video.name }}
-                <span *ngIf="!videoAbuse.video.deleted && !videoAbuse.video.blacklisted" class="glyphicon glyphicon-new-window"></span>
-                <span *ngIf="videoAbuse.video.deleted" i18n-title title="Video was deleted" class="glyphicon glyphicon-trash"></span>
+                <span *ngIf="!videoAbuse.video.blacklisted" class="glyphicon glyphicon-new-window"></span>
                 <span *ngIf="videoAbuse.video.blacklisted" i18n-title title="Video was blacklisted" class="glyphicon glyphicon-ban-circle"></span>
               </div>
               <div class="text-muted">by {{ videoAbuse.video.channel?.displayName }} on {{ videoAbuse.video.channel?.host }} </div>
@@ -60,7 +67,20 @@
         </a>
       </td>
 
-      <td>{{ videoAbuse.createdAt }}</td>
+      <td *ngIf="videoAbuse.video.deleted" class="c-hand" [pRowToggler]="videoAbuse">
+        <div class="video-abuse-video" i18n-title title="Video was deleted">
+          <div class="video-abuse-video-image"><span i18n>Deleted</span></div>
+          <div class="video-abuse-video-text">
+            <div>
+              {{ videoAbuse.video.name }}
+              <span class="glyphicon glyphicon-trash"></span>
+            </div>
+            <div class="text-muted">by {{ videoAbuse.video.channel?.displayName }} on {{ videoAbuse.video.channel?.host }} </div>
+          </div>
+        </div>
+      </td>
+
+      <td class="c-hand" [pRowToggler]="videoAbuse">{{ videoAbuse.createdAt }}</td>
 
       <td class="c-hand video-abuse-states" [pRowToggler]="videoAbuse">
         <span *ngIf="isVideoAbuseAccepted(videoAbuse)" [title]="videoAbuse.state.label" class="glyphicon glyphicon-ok"></span>
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss
index 09402fda7..9b60c39dc 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.scss
@@ -1,6 +1,14 @@
 @import 'mixins';
 @import 'miniature';
 
+.caption {
+  justify-content: flex-end;
+
+  input {
+    @include peertube-input-text(250px);
+  }
+}
+
 .video-abuse-video-link {
   @include disable-outline;
   position: relative;
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 cc5014ae8..6dcf96ccf 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,6 +16,8 @@ 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 { first } from 'rxjs/operators'
 
 @Component({
   selector: 'my-video-abuse-list',
@@ -43,7 +45,8 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
     private confirmService: ConfirmService,
     private i18n: I18n,
     private markdownRenderer: MarkdownService,
-    private sanitizer: DomSanitizer
+    private sanitizer: DomSanitizer,
+    private route: ActivatedRoute,
   ) {
     super()
 
@@ -185,6 +188,10 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
 
   ngOnInit () {
     this.initialize()
+
+    this.route.queryParams
+      .pipe(first(params => params.search !== undefined && params.search !== null))
+      .subscribe(params => this.search = params.search)
   }
 
   getIdentifier () {
@@ -253,26 +260,29 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
   }
 
   protected loadData () {
-    return this.videoAbuseService.getVideoAbuses(this.pagination, this.sort)
-               .subscribe(
-                 async resultList => {
-                   this.totalRecords = resultList.total
-
-                   this.videoAbuses = resultList.data
-
-                   for (const abuse of this.videoAbuses) {
-                     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)
-                     })
-                   }
-
-                 },
-
-                 err => this.notifier.error(err.message)
-               )
+    return this.videoAbuseService.getVideoAbuses({
+      pagination: this.pagination,
+      sort: this.sort,
+      search: this.search
+    }).subscribe(
+        async resultList => {
+          this.totalRecords = resultList.total
+
+          this.videoAbuses = resultList.data
+
+          for (const abuse of this.videoAbuses) {
+            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)
+            })
+          }
+
+        },
+
+        err => this.notifier.error(err.message)
+      )
   }
 
   private toHtml (text: string) {