aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+admin
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/+admin
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/+admin')
-rw-r--r--client/src/app/+admin/users/user-list/user-list.component.html31
-rw-r--r--client/src/app/+admin/users/user-list/user-list.component.scss11
-rw-r--r--client/src/app/+admin/users/user-list/user-list.component.ts93
3 files changed, 129 insertions, 6 deletions
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 cca057ba1..9d1f2e34a 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
@@ -10,10 +10,31 @@
10<p-table 10<p-table
11 [value]="users" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage" 11 [value]="users" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
12 [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id" 12 [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
13 [(selection)]="selectedUsers"
13> 14>
15 <ng-template pTemplate="caption">
16 <div class="caption">
17 <div>
18 <my-action-dropdown
19 *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange"
20 [actions]="bulkUserActions" [entry]="selectedUsers"
21 >
22 </my-action-dropdown>
23 </div>
24
25 <div>
26 <input
27 type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
28 >
29 </div>
30 </div>
31 </ng-template>
32
14 <ng-template pTemplate="header"> 33 <ng-template pTemplate="header">
15 <tr> 34 <tr>
16 <th style="width: 40px"></th> 35 <th style="width: 40px"></th>
36 <th style="width: 40px">
37 </th>
17 <th i18n pSortableColumn="username">Username <p-sortIcon field="username"></p-sortIcon></th> 38 <th i18n pSortableColumn="username">Username <p-sortIcon field="username"></p-sortIcon></th>
18 <th i18n>Email</th> 39 <th i18n>Email</th>
19 <th i18n>Video quota</th> 40 <th i18n>Video quota</th>
@@ -25,12 +46,17 @@
25 46
26 <ng-template pTemplate="body" let-expanded="expanded" let-user> 47 <ng-template pTemplate="body" let-expanded="expanded" let-user>
27 48
28 <tr [ngClass]="{ banned: user.blocked }"> 49 <tr [pSelectableRow]="user" [ngClass]="{ banned: user.blocked }">
50 <td>
51 <p-tableCheckbox [value]="user"></p-tableCheckbox>
52 </td>
53
29 <td> 54 <td>
30 <span *ngIf="user.blockedReason" class="expander" [pRowToggler]="user"> 55 <span *ngIf="user.blockedReason" class="expander" [pRowToggler]="user">
31 <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i> 56 <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
32 </span> 57 </span>
33 </td> 58 </td>
59
34 <td> 60 <td>
35 {{ user.username }} 61 {{ user.username }}
36 <span *ngIf="user.blocked" class="banned-info">(banned)</span> 62 <span *ngIf="user.blocked" class="banned-info">(banned)</span>
@@ -40,7 +66,7 @@
40 <td>{{ user.roleLabel }}</td> 66 <td>{{ user.roleLabel }}</td>
41 <td>{{ user.createdAt }}</td> 67 <td>{{ user.createdAt }}</td>
42 <td class="action-cell"> 68 <td class="action-cell">
43 <my-user-moderation-dropdown [user]="user" (userChanged)="onUserChanged()" (userDeleted)="onUserChanged()"> 69 <my-user-moderation-dropdown *ngIf="!isInSelectionMode()" [user]="user" (userChanged)="onUserChanged()" (userDeleted)="onUserChanged()">
44 </my-user-moderation-dropdown> 70 </my-user-moderation-dropdown>
45 </td> 71 </td>
46 </tr> 72 </tr>
@@ -56,3 +82,4 @@
56 </ng-template> 82 </ng-template>
57</p-table> 83</p-table>
58 84
85<my-user-ban-modal #userBanModal (userBanned)="onUsersBanned()"></my-user-ban-modal>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss
index 47291918d..01f43dfe1 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/users/user-list/user-list.component.scss
@@ -15,4 +15,15 @@ tr.banned {
15 15
16.ban-reason-label { 16.ban-reason-label {
17 font-weight: $font-semibold; 17 font-weight: $font-semibold;
18}
19
20.caption {
21 height: 40px;
22 display: flex;
23 justify-content: space-between;
24 align-items: center;
25
26 input {
27 @include peertube-input-text(250px);
28 }
18} \ No newline at end of file 29} \ No newline at end of file
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 dee3ed643..f3e7e0ead 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
@@ -1,10 +1,12 @@
1import { Component, OnInit } from '@angular/core' 1import { Component, OnInit, ViewChild } from '@angular/core'
2import { NotificationsService } from 'angular2-notifications' 2import { NotificationsService } from 'angular2-notifications'
3import { SortMeta } from 'primeng/components/common/sortmeta' 3import { SortMeta } from 'primeng/components/common/sortmeta'
4import { ConfirmService } from '../../../core' 4import { ConfirmService } from '../../../core'
5import { RestPagination, RestTable, UserService } from '../../../shared' 5import { RestPagination, RestTable, UserService } from '../../../shared'
6import { I18n } from '@ngx-translate/i18n-polyfill' 6import { I18n } from '@ngx-translate/i18n-polyfill'
7import { User } from '../../../../../../shared' 7import { User } from '../../../../../../shared'
8import { UserBanModalComponent } from '@app/shared/moderation'
9import { DropdownAction } from '@app/shared/buttons/action-dropdown.component'
8 10
9@Component({ 11@Component({
10 selector: 'my-user-list', 12 selector: 'my-user-list',
@@ -12,12 +14,17 @@ import { User } from '../../../../../../shared'
12 styleUrls: [ './user-list.component.scss' ] 14 styleUrls: [ './user-list.component.scss' ]
13}) 15})
14export class UserListComponent extends RestTable implements OnInit { 16export class UserListComponent extends RestTable implements OnInit {
17 @ViewChild('userBanModal') userBanModal: UserBanModalComponent
18
15 users: User[] = [] 19 users: User[] = []
16 totalRecords = 0 20 totalRecords = 0
17 rowsPerPage = 10 21 rowsPerPage = 10
18 sort: SortMeta = { field: 'createdAt', order: 1 } 22 sort: SortMeta = { field: 'createdAt', order: 1 }
19 pagination: RestPagination = { count: this.rowsPerPage, start: 0 } 23 pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
20 24
25 selectedUsers: User[] = []
26 bulkUserActions: DropdownAction<User>[] = []
27
21 constructor ( 28 constructor (
22 private notificationsService: NotificationsService, 29 private notificationsService: NotificationsService,
23 private confirmService: ConfirmService, 30 private confirmService: ConfirmService,
@@ -29,13 +36,28 @@ export class UserListComponent extends RestTable implements OnInit {
29 36
30 ngOnInit () { 37 ngOnInit () {
31 this.loadSort() 38 this.loadSort()
32 }
33 39
34 onUserChanged () { 40 this.bulkUserActions = [
35 this.loadData() 41 {
42 label: this.i18n('Delete'),
43 handler: users => this.removeUsers(users)
44 },
45 {
46 label: this.i18n('Ban'),
47 handler: users => this.openBanUserModal(users),
48 isDisplayed: users => users.every(u => u.blocked === false)
49 },
50 {
51 label: this.i18n('Unban'),
52 handler: users => this.unbanUsers(users),
53 isDisplayed: users => users.every(u => u.blocked === true)
54 }
55 ]
36 } 56 }
37 57
38 protected loadData () { 58 protected loadData () {
59 this.selectedUsers = []
60
39 this.userService.getUsers(this.pagination, this.sort) 61 this.userService.getUsers(this.pagination, this.sort)
40 .subscribe( 62 .subscribe(
41 resultList => { 63 resultList => {
@@ -46,4 +68,67 @@ export class UserListComponent extends RestTable implements OnInit {
46 err => this.notificationsService.error(this.i18n('Error'), err.message) 68 err => this.notificationsService.error(this.i18n('Error'), err.message)
47 ) 69 )
48 } 70 }
71
72 openBanUserModal (users: User[]) {
73 for (const user of users) {
74 if (user.username === 'root') {
75 this.notificationsService.error(this.i18n('Error'), this.i18n('You cannot ban root.'))
76 return
77 }
78 }
79
80 this.userBanModal.openModal(users)
81 }
82
83 onUsersBanned () {
84 this.loadData()
85 }
86
87 async unbanUsers (users: User[]) {
88 const message = this.i18n('Do you really want to unban {{num}} users?', { num: users.length })
89
90 const res = await this.confirmService.confirm(message, this.i18n('Unban'))
91 if (res === false) return
92
93 this.userService.unbanUsers(users)
94 .subscribe(
95 () => {
96 const message = this.i18n('{{num}} users unbanned.', { num: users.length })
97
98 this.notificationsService.success(this.i18n('Success'), message)
99 this.loadData()
100 },
101
102 err => this.notificationsService.error(this.i18n('Error'), err.message)
103 )
104 }
105
106 async removeUsers (users: User[]) {
107 for (const user of users) {
108 if (user.username === 'root') {
109 this.notificationsService.error(this.i18n('Error'), this.i18n('You cannot delete root.'))
110 return
111 }
112 }
113
114 const message = this.i18n('If you remove these users, you will not be able to create others with the same username!')
115 const res = await this.confirmService.confirm(message, this.i18n('Delete'))
116 if (res === false) return
117
118 this.userService.removeUser(users).subscribe(
119 () => {
120 this.notificationsService.success(
121 this.i18n('Success'),
122 this.i18n('{{num}} users deleted.', { num: users.length })
123 )
124 this.loadData()
125 },
126
127 err => this.notificationsService.error(this.i18n('Error'), err.message)
128 )
129 }
130
131 isInSelectionMode () {
132 return this.selectedUsers.length !== 0
133 }
49} 134}