aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-10-08 15:15:11 +0200
committerChocobozzz <me@florianbigard.com>2018-10-08 15:55:32 +0200
commit791645e620fb98c6e7c32271d91d91ff7e41b892 (patch)
treeb9554ae53c93c1e699d8cc2e137128e599a4c045 /client/src/app/shared
parent80c7336a896d9eb1e71b7c89a72285f914259457 (diff)
downloadPeerTube-791645e620fb98c6e7c32271d91d91ff7e41b892.tar.gz
PeerTube-791645e620fb98c6e7c32271d91d91ff7e41b892.tar.zst
PeerTube-791645e620fb98c6e7c32271d91d91ff7e41b892.zip
Add bulk actions in users table
Diffstat (limited to 'client/src/app/shared')
-rw-r--r--client/src/app/shared/buttons/action-dropdown.component.html8
-rw-r--r--client/src/app/shared/buttons/action-dropdown.component.scss14
-rw-r--r--client/src/app/shared/buttons/action-dropdown.component.ts4
-rw-r--r--client/src/app/shared/moderation/user-ban-modal.component.html2
-rw-r--r--client/src/app/shared/moderation/user-ban-modal.component.ts23
-rw-r--r--client/src/app/shared/moderation/user-moderation-dropdown.component.html2
-rw-r--r--client/src/app/shared/moderation/user-moderation-dropdown.component.ts9
-rw-r--r--client/src/app/shared/users/user.service.ts39
8 files changed, 65 insertions, 36 deletions
diff --git a/client/src/app/shared/buttons/action-dropdown.component.html b/client/src/app/shared/buttons/action-dropdown.component.html
index 8110e2515..111627424 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/buttons/action-dropdown.component.html
@@ -1,6 +1,10 @@
1<div class="dropdown-root" ngbDropdown [placement]="placement"> 1<div class="dropdown-root" ngbDropdown [placement]="placement">
2 <div class="action-button" [ngClass]="{ small: buttonSize === 'small' }" ngbDropdownToggle role="button"> 2 <div
3 <span class="icon icon-action"></span> 3 class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange' }"
4 ngbDropdownToggle role="button"
5 >
6 <span *ngIf="!label" class="icon icon-action"></span>
7 <span *ngIf="label" class="dropdown-toggle">{{ label }}</span>
4 </div> 8 </div>
5 9
6 <div ngbDropdownMenu class="dropdown-menu"> 10 <div ngbDropdownMenu class="dropdown-menu">
diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index 00f120fb8..0a9aa7b04 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -3,7 +3,14 @@
3 3
4.action-button { 4.action-button {
5 @include peertube-button; 5 @include peertube-button;
6 @include grey-button; 6
7 &.grey {
8 @include grey-button;
9 }
10
11 &.orange {
12 @include orange-button;
13 }
7 14
8 display: inline-block; 15 display: inline-block;
9 padding: 0 10px; 16 padding: 0 10px;
@@ -30,6 +37,11 @@
30 } 37 }
31} 38}
32 39
40.dropdown-toggle::after {
41 position: relative;
42 top: 1px;
43}
44
33.dropdown-menu { 45.dropdown-menu {
34 .dropdown-item { 46 .dropdown-item {
35 cursor: pointer; 47 cursor: pointer;
diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
index 1838ff697..022ab5ee8 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -16,6 +16,8 @@ export type DropdownAction<T> = {
16export class ActionDropdownComponent<T> { 16export class ActionDropdownComponent<T> {
17 @Input() actions: DropdownAction<T>[] = [] 17 @Input() actions: DropdownAction<T>[] = []
18 @Input() entry: T 18 @Input() entry: T
19 @Input() placement = 'left' 19 @Input() placement = 'bottom-left'
20 @Input() buttonSize: 'normal' | 'small' = 'normal' 20 @Input() buttonSize: 'normal' | 'small' = 'normal'
21 @Input() label: string
22 @Input() theme: 'orange' | 'grey' = 'grey'
21} 23}
diff --git a/client/src/app/shared/moderation/user-ban-modal.component.html b/client/src/app/shared/moderation/user-ban-modal.component.html
index b2958caa4..fa5cb7404 100644
--- a/client/src/app/shared/moderation/user-ban-modal.component.html
+++ b/client/src/app/shared/moderation/user-ban-modal.component.html
@@ -1,6 +1,6 @@
1<ng-template #modal> 1<ng-template #modal>
2 <div class="modal-header"> 2 <div class="modal-header">
3 <h4 i18n class="modal-title">Ban {{ userToBan.username }}</h4> 3 <h4 i18n class="modal-title">Ban</h4>
4 <span class="close" aria-hidden="true" (click)="hideBanUserModal()"></span> 4 <span class="close" aria-hidden="true" (click)="hideBanUserModal()"></span>
5 </div> 5 </div>
6 6
diff --git a/client/src/app/shared/moderation/user-ban-modal.component.ts b/client/src/app/shared/moderation/user-ban-modal.component.ts
index 67ae38e48..60bd442dd 100644
--- a/client/src/app/shared/moderation/user-ban-modal.component.ts
+++ b/client/src/app/shared/moderation/user-ban-modal.component.ts
@@ -15,9 +15,9 @@ import { User } from '../../../../../shared'
15}) 15})
16export class UserBanModalComponent extends FormReactive implements OnInit { 16export class UserBanModalComponent extends FormReactive implements OnInit {
17 @ViewChild('modal') modal: NgbModal 17 @ViewChild('modal') modal: NgbModal
18 @Output() userBanned = new EventEmitter<User>() 18 @Output() userBanned = new EventEmitter<User | User[]>()
19 19
20 private userToBan: User 20 private usersToBan: User | User[]
21 private openedModal: NgbModalRef 21 private openedModal: NgbModalRef
22 22
23 constructor ( 23 constructor (
@@ -37,28 +37,29 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
37 }) 37 })
38 } 38 }
39 39
40 openModal (user: User) { 40 openModal (user: User | User[]) {
41 this.userToBan = user 41 this.usersToBan = user
42 this.openedModal = this.modalService.open(this.modal) 42 this.openedModal = this.modalService.open(this.modal)
43 } 43 }
44 44
45 hideBanUserModal () { 45 hideBanUserModal () {
46 this.userToBan = undefined 46 this.usersToBan = undefined
47 this.openedModal.close() 47 this.openedModal.close()
48 } 48 }
49 49
50 async banUser () { 50 async banUser () {
51 const reason = this.form.value['reason'] || undefined 51 const reason = this.form.value['reason'] || undefined
52 52
53 this.userService.banUser(this.userToBan, reason) 53 this.userService.banUsers(this.usersToBan, reason)
54 .subscribe( 54 .subscribe(
55 () => { 55 () => {
56 this.notificationsService.success( 56 const message = Array.isArray(this.usersToBan)
57 this.i18n('Success'), 57 ? this.i18n('{{num}} users banned.', { num: this.usersToBan.length })
58 this.i18n('User {{username}} banned.', { username: this.userToBan.username }) 58 : this.i18n('User {{username}} banned.', { username: this.usersToBan.username })
59 )
60 59
61 this.userBanned.emit(this.userToBan) 60 this.notificationsService.success(this.i18n('Success'), message)
61
62 this.userBanned.emit(this.usersToBan)
62 this.hideBanUserModal() 63 this.hideBanUserModal()
63 }, 64 },
64 65
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 ed1a4c863..2c477ab23 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 @@
1<ng-container *ngIf="user && userActions.length !== 0"> 1<ng-container *ngIf="user && userActions.length !== 0">
2 <my-user-ban-modal #userBanModal (userBanned)="onUserBanned()"></my-user-ban-modal> 2 <my-user-ban-modal #userBanModal (userBanned)="onUserBanned()"></my-user-ban-modal>
3 3
4 <my-action-dropdown i18n-label label="Actions" [actions]="userActions" [entry]="user" [buttonSize]="buttonSize"></my-action-dropdown> 4 <my-action-dropdown [actions]="userActions" [entry]="user" [buttonSize]="buttonSize"></my-action-dropdown>
5</ng-container> \ No newline at end of file 5</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 4f88456de..174e9f024 100644
--- a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
@@ -2,7 +2,6 @@ import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angu
2import { NotificationsService } from 'angular2-notifications' 2import { NotificationsService } from 'angular2-notifications'
3import { I18n } from '@ngx-translate/i18n-polyfill' 3import { I18n } from '@ngx-translate/i18n-polyfill'
4import { DropdownAction } from '@app/shared/buttons/action-dropdown.component' 4import { DropdownAction } from '@app/shared/buttons/action-dropdown.component'
5import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
6import { UserBanModalComponent } from '@app/shared/moderation/user-ban-modal.component' 5import { UserBanModalComponent } from '@app/shared/moderation/user-ban-modal.component'
7import { UserService } from '@app/shared/users' 6import { UserService } from '@app/shared/users'
8import { AuthService, ConfirmService } from '@app/core' 7import { AuthService, ConfirmService } from '@app/core'
@@ -24,8 +23,6 @@ export class UserModerationDropdownComponent implements OnInit {
24 23
25 userActions: DropdownAction<User>[] = [] 24 userActions: DropdownAction<User>[] = []
26 25
27 private openedModal: NgbModalRef
28
29 constructor ( 26 constructor (
30 private authService: AuthService, 27 private authService: AuthService,
31 private notificationsService: NotificationsService, 28 private notificationsService: NotificationsService,
@@ -38,10 +35,6 @@ export class UserModerationDropdownComponent implements OnInit {
38 this.buildActions() 35 this.buildActions()
39 } 36 }
40 37
41 hideBanUserModal () {
42 this.openedModal.close()
43 }
44
45 openBanUserModal (user: User) { 38 openBanUserModal (user: User) {
46 if (user.username === 'root') { 39 if (user.username === 'root') {
47 this.notificationsService.error(this.i18n('Error'), this.i18n('You cannot ban root.')) 40 this.notificationsService.error(this.i18n('Error'), this.i18n('You cannot ban root.'))
@@ -60,7 +53,7 @@ export class UserModerationDropdownComponent implements OnInit {
60 const res = await this.confirmService.confirm(message, this.i18n('Unban')) 53 const res = await this.confirmService.confirm(message, this.i18n('Unban'))
61 if (res === false) return 54 if (res === false) return
62 55
63 this.userService.unbanUser(user) 56 this.userService.unbanUsers(user)
64 .subscribe( 57 .subscribe(
65 () => { 58 () => {
66 this.notificationsService.success( 59 this.notificationsService.success(
diff --git a/client/src/app/shared/users/user.service.ts b/client/src/app/shared/users/user.service.ts
index d9b81c181..0eb3870b0 100644
--- a/client/src/app/shared/users/user.service.ts
+++ b/client/src/app/shared/users/user.service.ts
@@ -1,5 +1,5 @@
1import { Observable } from 'rxjs' 1import { from, Observable } from 'rxjs'
2import { catchError, map } from 'rxjs/operators' 2import { catchError, concatMap, map, toArray } from 'rxjs/operators'
3import { HttpClient, HttpParams } from '@angular/common/http' 3import { HttpClient, HttpParams } from '@angular/common/http'
4import { Injectable } from '@angular/core' 4import { Injectable } from '@angular/core'
5import { ResultList, User, UserCreate, UserRole, UserUpdate, UserUpdateMe, UserVideoQuota } from '../../../../../shared' 5import { ResultList, User, UserCreate, UserRole, UserUpdate, UserUpdateMe, UserVideoQuota } from '../../../../../shared'
@@ -170,21 +170,38 @@ export class UserService {
170 ) 170 )
171 } 171 }
172 172
173 removeUser (user: { id: number }) { 173 removeUser (usersArg: User | User[]) {
174 return this.authHttp.delete(UserService.BASE_USERS_URL + user.id) 174 const users = Array.isArray(usersArg) ? usersArg : [ usersArg ]
175 .pipe(catchError(err => this.restExtractor.handleError(err))) 175
176 return from(users)
177 .pipe(
178 concatMap(u => this.authHttp.delete(UserService.BASE_USERS_URL + u.id)),
179 toArray(),
180 catchError(err => this.restExtractor.handleError(err))
181 )
176 } 182 }
177 183
178 banUser (user: { id: number }, reason?: string) { 184 banUsers (usersArg: User | User[], reason?: string) {
179 const body = reason ? { reason } : {} 185 const body = reason ? { reason } : {}
186 const users = Array.isArray(usersArg) ? usersArg : [ usersArg ]
180 187
181 return this.authHttp.post(UserService.BASE_USERS_URL + user.id + '/block', body) 188 return from(users)
182 .pipe(catchError(err => this.restExtractor.handleError(err))) 189 .pipe(
190 concatMap(u => this.authHttp.post(UserService.BASE_USERS_URL + u.id + '/block', body)),
191 toArray(),
192 catchError(err => this.restExtractor.handleError(err))
193 )
183 } 194 }
184 195
185 unbanUser (user: { id: number }) { 196 unbanUsers (usersArg: User | User[]) {
186 return this.authHttp.post(UserService.BASE_USERS_URL + user.id + '/unblock', {}) 197 const users = Array.isArray(usersArg) ? usersArg : [ usersArg ]
187 .pipe(catchError(err => this.restExtractor.handleError(err))) 198
199 return from(users)
200 .pipe(
201 concatMap(u => this.authHttp.post(UserService.BASE_USERS_URL + u.id + '/unblock', {})),
202 toArray(),
203 catchError(err => this.restExtractor.handleError(err))
204 )
188 } 205 }
189 206
190 private formatUser (user: User) { 207 private formatUser (user: User) {