Add users search filter

13 files changed, 41 insertions, 12 deletions

diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.ts b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
index ca993dcd3..4a25b7ff3 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.ts
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
@@ -28,7 +28,7 @@ export class FollowersListComponent extends RestTable implements OnInit {
   }
 
   ngOnInit () {
-    this.loadSort()
+    this.initialize()
   }
 
   protected loadData () {
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.ts b/client/src/app/+admin/follows/following-list/following-list.component.ts
index dd57884c6..70235a48d 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.ts
+++ b/client/src/app/+admin/follows/following-list/following-list.component.ts
@@ -29,7 +29,7 @@ export class FollowingListComponent extends RestTable implements OnInit {
   }
 
   ngOnInit () {
-    this.loadSort()
+    this.initialize()
   }
 
   async removeFollowing (follow: ActorFollow) {
diff --git a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts
index 866ba1b23..44778ab56 100644
--- a/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts
+++ b/client/src/app/+admin/jobs/jobs-list/jobs-list.component.ts
@@ -34,7 +34,7 @@ export class JobsListComponent extends RestTable implements OnInit {
 
   ngOnInit () {
     this.loadJobState()
-    this.loadSort()
+    this.initialize()
   }
 
   onJobStateChanged () {
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 681db7434..9837af586 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
@@ -57,7 +57,7 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
   }
 
   ngOnInit () {
-    this.loadSort()
+    this.initialize()
   }
 
   openModerationCommentModal (videoAbuse: VideoAbuse) {
diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
index bb051d00f..e491edaca 100644
--- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
+++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
@@ -39,7 +39,7 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit {
   }
 
   ngOnInit () {
-    this.loadSort()
+    this.initialize()
   }
 
   getVideoUrl (videoBlacklist: VideoBlacklist) {
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 9d1f2e34a..ae8921802 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -25,6 +25,7 @@
       <div>
         <input
           type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+          (keyup)="onSearch($event.target.value)"
         >
       </div>
     </div>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts
index f3e7e0ead..33384dc35 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/users/user-list/user-list.component.ts
@@ -35,7 +35,7 @@ export class UserListComponent extends RestTable implements OnInit {
   }
 
   ngOnInit () {
-    this.loadSort()
+    this.initialize()
 
     this.bulkUserActions = [
       {
@@ -58,7 +58,7 @@ export class UserListComponent extends RestTable implements OnInit {
   protected loadData () {
     this.selectedUsers = []
 
-    this.userService.getUsers(this.pagination, this.sort)
+    this.userService.getUsers(this.pagination, this.sort, this.search)
                     .subscribe(
                       resultList => {
                         this.users = resultList.data
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
index 13517b9f4..520278671 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
@@ -31,7 +31,7 @@ export class MyAccountOwnershipComponent extends RestTable implements OnInit {
   }
 
   ngOnInit () {
-    this.loadSort()
+    this.initialize()
   }
 
   protected loadData () {
diff --git a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts
index d9fb20446..5b920c98d 100644
--- a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts
+++ b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts
@@ -27,7 +27,7 @@ export class MyAccountVideoImportsComponent extends RestTable implements OnInit
   }
 
   ngOnInit () {
-    this.loadSort()
+    this.initialize()
   }
 
   isVideoImportSuccess (videoImport: VideoImport) {
diff --git a/client/src/app/shared/moderation/user-moderation-dropdown.component.html b/client/src/app/shared/moderation/user-moderation-dropdown.component.html
index 2c477ab23..01db7cd4a 100644
--- a/client/src/app/shared/moderation/user-moderation-dropdown.component.html
+++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngIf="user && userActions.length !== 0">
   <my-user-ban-modal #userBanModal (userBanned)="onUserBanned()"></my-user-ban-modal>
 
-  <my-action-dropdown [actions]="userActions" [entry]="user" [buttonSize]="buttonSize"></my-action-dropdown>
+  <my-action-dropdown [actions]="userActions" [entry]="user" [buttonSize]="buttonSize" [placement]="placement"></my-action-dropdown>
 </ng-container>
\ No newline at end of file
diff --git a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
index 174e9f024..105c99d8b 100644
--- a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
@@ -17,6 +17,7 @@ export class UserModerationDropdownComponent implements OnInit {
 
   @Input() user: User
   @Input() buttonSize: 'normal' | 'small' = 'normal'
+  @Input() placement = 'left'
 
   @Output() userChanged = new EventEmitter()
   @Output() userDeleted = new EventEmitter()
diff --git a/client/src/app/shared/rest/rest-table.ts b/client/src/app/shared/rest/rest-table.ts
index fe1a91d2d..26748f245 100644
--- a/client/src/app/shared/rest/rest-table.ts
+++ b/client/src/app/shared/rest/rest-table.ts
@@ -1,8 +1,9 @@
 import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
 import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent'
 import { SortMeta } from 'primeng/components/common/sortmeta'
-
 import { RestPagination } from './rest-pagination'
+import { Subject } from 'rxjs'
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
 
 export abstract class RestTable {
 
@@ -11,10 +12,17 @@ export abstract class RestTable {
   abstract sort: SortMeta
   abstract pagination: RestPagination
 
+  protected search: string
+  private searchStream: Subject<string>
   private sortLocalStorageKey = 'rest-table-sort-' + this.constructor.name
 
   protected abstract loadData (): void
 
+  initialize () {
+    this.loadSort()
+    this.initSearch()
+  }
+
   loadSort () {
     const result = peertubeLocalStorage.getItem(this.sortLocalStorageKey)
 
@@ -46,4 +54,21 @@ export abstract class RestTable {
     peertubeLocalStorage.setItem(this.sortLocalStorageKey, JSON.stringify(this.sort))
   }
 
+  initSearch () {
+    this.searchStream = new Subject()
+
+    this.searchStream
+      .pipe(
+        debounceTime(400),
+        distinctUntilChanged()
+      )
+      .subscribe(search => {
+        this.search = search
+        this.loadData()
+      })
+  }
+
+  onSearch (search: string) {
+    this.searchStream.next(search)
+  }
 }
diff --git a/client/src/app/shared/users/user.service.ts b/client/src/app/shared/users/user.service.ts
index 0eb3870b0..27a81f0a2 100644
--- a/client/src/app/shared/users/user.service.ts
+++ b/client/src/app/shared/users/user.service.ts
@@ -158,10 +158,12 @@ export class UserService {
                .pipe(catchError(err => this.restExtractor.handleError(err)))
   }
 
-  getUsers (pagination: RestPagination, sort: SortMeta): Observable<ResultList<User>> {
+  getUsers (pagination: RestPagination, sort: SortMeta, search?: string): Observable<ResultList<User>> {
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
 
+    if (search) params = params.append('search', search)
+
     return this.authHttp.get<ResultList<User>>(UserService.BASE_USERS_URL, { params })
                .pipe(
                  map(res => this.restExtractor.convertResultListDateToHuman(res)),