Add users search filter

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 () {

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) {

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 () {

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) {

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) {

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>

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

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 () {

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) {

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>

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()

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)
+  }
 }

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)),

server/controllers/api/users/index.ts

@@ -238,7 +238,7 @@ async function autocompleteUsers (req: express.Request, res: express.Response, n
 }
 
 async function listUsers (req: express.Request, res: express.Response, next: express.NextFunction) {
-  const resultList = await UserModel.listForApi(req.query.start, req.query.count, req.query.sort)
+  const resultList = await UserModel.listForApi(req.query.start, req.query.count, req.query.sort, req.query.search)
 
   return res.json(getFormattedObjects(resultList.data, resultList.total))
 }

server/models/account/user.ts

@@ -181,7 +181,25 @@ export class UserModel extends Model<UserModel> {
     return this.count()
   }
 
-  static listForApi (start: number, count: number, sort: string) {
+  static listForApi (start: number, count: number, sort: string, search?: string) {
+    let where = undefined
+    if (search) {
+      where = {
+        [Sequelize.Op.or]: [
+          {
+            email: {
+              [Sequelize.Op.iLike]: '%' + search + '%'
+            }
+          },
+          {
+            username: {
+              [ Sequelize.Op.iLike ]: '%' + search + '%'
+            }
+          }
+        ]
+      }
+    }
+
     const query = {
       attributes: {
         include: [
@@ -204,7 +222,8 @@ export class UserModel extends Model<UserModel> {
       },
       offset: start,
       limit: count,
-      order: getSort(sort)
+      order: getSort(sort),
+      where
     }
 
     return UserModel.findAndCountAll(query)

server/tests/api/users/users.ts

@@ -180,7 +180,7 @@ describe('Test users', function () {
   it('Should be able to upload a video again')
 
   it('Should be able to create a new user', async function () {
-    await createUser(server.url, accessToken, user.username,user.password, 2 * 1024 * 1024)
+    await createUser(server.url, accessToken, user.username, user.password, 2 * 1024 * 1024)
   })
 
   it('Should be able to login with this user', async function () {
@@ -322,6 +322,40 @@ describe('Test users', function () {
     expect(users[ 1 ].nsfwPolicy).to.equal('display')
   })
 
+  it('Should search user by username', async function () {
+    const res = await getUsersListPaginationAndSort(server.url, server.accessToken, 0, 2, 'createdAt', 'oot')
+    const users = res.body.data as User[]
+
+    expect(res.body.total).to.equal(1)
+    expect(users.length).to.equal(1)
+
+    expect(users[ 0 ].username).to.equal('root')
+  })
+
+  it('Should search user by email', async function () {
+    {
+      const res = await getUsersListPaginationAndSort(server.url, server.accessToken, 0, 2, 'createdAt', 'r_1@exam')
+      const users = res.body.data as User[]
+
+      expect(res.body.total).to.equal(1)
+      expect(users.length).to.equal(1)
+
+      expect(users[ 0 ].username).to.equal('user_1')
+      expect(users[ 0 ].email).to.equal('user_1@example.com')
+    }
+
+    {
+      const res = await getUsersListPaginationAndSort(server.url, server.accessToken, 0, 2, 'createdAt', 'example')
+      const users = res.body.data as User[]
+
+      expect(res.body.total).to.equal(2)
+      expect(users.length).to.equal(2)
+
+      expect(users[ 0 ].username).to.equal('root')
+      expect(users[ 1 ].username).to.equal('user_1')
+    }
+  })
+
   it('Should update my password', async function () {
     await updateMyUser({
       url: server.url,

server/tests/utils/users/users.ts

@@ -112,7 +112,7 @@ function getUsersList (url: string, accessToken: string) {
           .expect('Content-Type', /json/)
 }
 
-function getUsersListPaginationAndSort (url: string, accessToken: string, start: number, count: number, sort: string) {
+function getUsersListPaginationAndSort (url: string, accessToken: string, start: number, count: number, sort: string, search?: string) {
   const path = '/api/v1/users'
 
   return request(url)
@@ -120,6 +120,7 @@ function getUsersListPaginationAndSort (url: string, accessToken: string, start:
           .query({ start })
           .query({ count })
           .query({ sort })
+          .query({ search })
           .set('Accept', 'application/json')
           .set('Authorization', 'Bearer ' + accessToken)
           .expect(200)