Support search param in URL for video abuses

2 files changed, 21 insertions, 8 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 c15e98942..9e084cb73 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
@@ -1,5 +1,5 @@
 <p-table
-  [value]="videoAbuses" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [value]="videoAbuses" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
   [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id" [resizableColumns]="true"
   [showCurrentPageReport]="true" i18n-currentPageReportTemplate
   currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} reports"
@@ -123,7 +123,7 @@
                       <span class="text-muted">{{ createByString(videoAbuse.reporterAccount) }}</span>
                     </div>
                   </div>
-                  <a routerLink="/admin/moderation/video-abuses/list" class="ml-auto text-muted video-details-links" i18n>
+                  <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': videoAbuse.reporterAccount.displayName }" class="ml-auto text-muted video-details-links" i18n>
                     {videoAbuse.countReportsForReporter, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
                   </a>
                 </span>
@@ -142,7 +142,7 @@
                       <span class="text-muted">{{ videoAbuse.video.channel.ownerAccount ? createByString(videoAbuse.video.channel.ownerAccount) : '' }}</span>
                     </div>
                   </div>
-                  <a routerLink="/admin/moderation/video-abuses/list" class="ml-auto text-muted video-details-links" *ngIf="!videoAbuse.video.deleted" i18n>
+                  <a [routerLink]="[ '/admin/moderation/video-abuses/list' ]" [queryParams]="{ 'search': videoAbuse.video.channel.ownerAccount.displayName }" class="ml-auto text-muted video-details-links" *ngIf="!videoAbuse.video.deleted" i18n>
                     {videoAbuse.countReportsForReportee, plural, =1 {1 report} other {{{ videoAbuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
                   </a>
                 </span>
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 0c727ae90..2ece5dcc1 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
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core'
+import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'
 import { Account } from '@app/shared/account/account.model'
 import { Notifier } from '@app/core'
 import { SortMeta } from 'primeng/api'
@@ -17,14 +17,14 @@ 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'
+import { filter } from 'rxjs/operators'
 
 @Component({
   selector: 'my-video-abuse-list',
   templateUrl: './video-abuse-list.component.html',
   styleUrls: [ '../moderation.component.scss', './video-abuse-list.component.scss' ]
 })
-export class VideoAbuseListComponent extends RestTable implements OnInit {
+export class VideoAbuseListComponent extends RestTable implements OnInit, AfterViewInit {
   @ViewChild('moderationCommentModal', { static: true }) moderationCommentModal: ModerationCommentModalComponent
 
   videoAbuses: (VideoAbuse & { moderationCommentHtml?: string, reasonHtml?: string })[] = []
@@ -190,8 +190,16 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
     this.initialize()
 
     this.route.queryParams
-      .pipe(first(params => params.search !== undefined && params.search !== null))
-      .subscribe(params => this.search = params.search)
+      .pipe(filter(params => params.search !== undefined && params.search !== null))
+      .subscribe(params => {
+        this.search = params.search
+        this.setTableFilter(params.search)
+        this.loadData()
+      })
+  }
+
+  ngAfterViewInit () {
+    this.setTableFilter(this.search)
   }
 
   getIdentifier () {
@@ -210,6 +218,11 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
     return Account.CREATE_BY_STRING(account.name, account.host)
   }
 
+  setTableFilter (filter: string) {
+    const filterInput = document.getElementById('table-filter') as HTMLInputElement
+    if (filterInput) filterInput.value = filter
+  }
+
   isVideoAbuseAccepted (videoAbuse: VideoAbuse) {
     return videoAbuse.state.id === VideoAbuseState.ACCEPTED
   }