diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-09-14 11:57:49 +0200 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-09-14 11:57:49 +0200 |
commit | d592e0a9b2931c7c9cbedb27fb8efc9aaacad9bb (patch) | |
tree | 549b14b842de296efed846a11b3681efe08cfa9e /client/src/app/+admin/users | |
parent | 91f6f169b1110eeae6ebf5c387f4204b0d07703c (diff) | |
download | PeerTube-d592e0a9b2931c7c9cbedb27fb8efc9aaacad9bb.tar.gz PeerTube-d592e0a9b2931c7c9cbedb27fb8efc9aaacad9bb.tar.zst PeerTube-d592e0a9b2931c7c9cbedb27fb8efc9aaacad9bb.zip |
Move to HttpClient and PrimeNG data table
Diffstat (limited to 'client/src/app/+admin/users')
3 files changed, 83 insertions, 91 deletions
diff --git a/client/src/app/+admin/users/shared/user.service.ts b/client/src/app/+admin/users/shared/user.service.ts index 999013bcc..a4b89bf1d 100644 --- a/client/src/app/+admin/users/shared/user.service.ts +++ b/client/src/app/+admin/users/shared/user.service.ts | |||
@@ -1,11 +1,14 @@ | |||
1 | import { Injectable } from '@angular/core' | 1 | import { Injectable } from '@angular/core' |
2 | import { HttpClient, HttpParams } from '@angular/common/http' | ||
3 | import { Observable } from 'rxjs/Observable' | ||
2 | import 'rxjs/add/operator/catch' | 4 | import 'rxjs/add/operator/catch' |
3 | import 'rxjs/add/operator/map' | 5 | import 'rxjs/add/operator/map' |
4 | 6 | ||
7 | import { SortMeta } from 'primeng/primeng' | ||
5 | import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe' | 8 | import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe' |
6 | 9 | ||
7 | import { AuthHttp, RestExtractor, RestDataSource, User } from '../../../shared' | 10 | import { RestExtractor, User, RestPagination, RestService } from '../../../shared' |
8 | import { UserCreate, UserUpdate } from '../../../../../../shared' | 11 | import { UserCreate, UserUpdate, ResultList } from '../../../../../../shared' |
9 | 12 | ||
10 | @Injectable() | 13 | @Injectable() |
11 | export class UserService { | 14 | export class UserService { |
@@ -13,53 +16,52 @@ export class UserService { | |||
13 | private bytesPipe = new BytesPipe() | 16 | private bytesPipe = new BytesPipe() |
14 | 17 | ||
15 | constructor ( | 18 | constructor ( |
16 | private authHttp: AuthHttp, | 19 | private authHttp: HttpClient, |
20 | private restService: RestService, | ||
17 | private restExtractor: RestExtractor | 21 | private restExtractor: RestExtractor |
18 | ) {} | 22 | ) {} |
19 | 23 | ||
20 | addUser (userCreate: UserCreate) { | 24 | addUser (userCreate: UserCreate) { |
21 | return this.authHttp.post(UserService.BASE_USERS_URL, userCreate) | 25 | return this.authHttp.post(UserService.BASE_USERS_URL, userCreate) |
22 | .map(this.restExtractor.extractDataBool) | 26 | .map(this.restExtractor.extractDataBool) |
23 | .catch(this.restExtractor.handleError) | 27 | .catch(err => this.restExtractor.handleError(err)) |
24 | } | 28 | } |
25 | 29 | ||
26 | updateUser (userId: number, userUpdate: UserUpdate) { | 30 | updateUser (userId: number, userUpdate: UserUpdate) { |
27 | return this.authHttp.put(UserService.BASE_USERS_URL + userId, userUpdate) | 31 | return this.authHttp.put(UserService.BASE_USERS_URL + userId, userUpdate) |
28 | .map(this.restExtractor.extractDataBool) | 32 | .map(this.restExtractor.extractDataBool) |
29 | .catch(this.restExtractor.handleError) | 33 | .catch(err => this.restExtractor.handleError(err)) |
30 | } | 34 | } |
31 | 35 | ||
32 | getUser (userId: number) { | 36 | getUser (userId: number) { |
33 | return this.authHttp.get(UserService.BASE_USERS_URL + userId) | 37 | return this.authHttp.get<User>(UserService.BASE_USERS_URL + userId) |
34 | .map(this.restExtractor.extractDataGet) | 38 | .catch(err => this.restExtractor.handleError(err)) |
35 | .catch(this.restExtractor.handleError) | ||
36 | } | 39 | } |
37 | 40 | ||
38 | getDataSource () { | 41 | getUsers (pagination: RestPagination, sort: SortMeta): Observable<ResultList<User>> { |
39 | return new RestDataSource(this.authHttp, UserService.BASE_USERS_URL, this.formatDataSource.bind(this)) | 42 | let params = new HttpParams() |
43 | params = this.restService.addRestGetParams(params, pagination, sort) | ||
44 | |||
45 | return this.authHttp.get<ResultList<User>>(UserService.BASE_USERS_URL, { params }) | ||
46 | .map(res => this.restExtractor.convertResultListDateToHuman(res)) | ||
47 | .map(res => this.restExtractor.applyToResultListData(res, this.formatUser.bind(this))) | ||
48 | .catch(err => this.restExtractor.handleError(err)) | ||
40 | } | 49 | } |
41 | 50 | ||
42 | removeUser (user: User) { | 51 | removeUser (user: User) { |
43 | return this.authHttp.delete(UserService.BASE_USERS_URL + user.id) | 52 | return this.authHttp.delete(UserService.BASE_USERS_URL + user.id) |
44 | } | 53 | } |
45 | 54 | ||
46 | private formatDataSource (users: User[]) { | 55 | private formatUser (user: User) { |
47 | const newUsers = [] | 56 | let videoQuota |
57 | if (user.videoQuota === -1) { | ||
58 | videoQuota = 'Unlimited' | ||
59 | } else { | ||
60 | videoQuota = this.bytesPipe.transform(user.videoQuota) | ||
61 | } | ||
48 | 62 | ||
49 | users.forEach(user => { | 63 | return Object.assign(user, { |
50 | let videoQuota | 64 | videoQuota |
51 | if (user.videoQuota === -1) { | ||
52 | videoQuota = 'Unlimited' | ||
53 | } else { | ||
54 | videoQuota = this.bytesPipe.transform(user.videoQuota) | ||
55 | } | ||
56 | |||
57 | const newUser = Object.assign(user, { | ||
58 | videoQuota | ||
59 | }) | ||
60 | newUsers.push(newUser) | ||
61 | }) | 65 | }) |
62 | |||
63 | return newUsers | ||
64 | } | 66 | } |
65 | } | 67 | } |
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 eb5bc9d4a..2944e3cbf 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 | |||
@@ -3,10 +3,29 @@ | |||
3 | 3 | ||
4 | <h3>Users list</h3> | 4 | <h3>Users list</h3> |
5 | 5 | ||
6 | <ng2-smart-table | 6 | <p-dataTable |
7 | [settings]="tableSettings" [source]="usersSource" | 7 | [value]="users" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage" |
8 | (delete)="removeUser($event)" (edit)="editUser($event)" | 8 | sortField="id" (onLazyLoad)="loadLazy($event)" |
9 | ></ng2-smart-table> | 9 | > |
10 | <p-column field="id" header="ID" [sortable]="true"></p-column> | ||
11 | <p-column field="username" header="Username" [sortable]="true"></p-column> | ||
12 | <p-column field="email" header="Email"></p-column> | ||
13 | <p-column field="videoQuota" header="Video quota"></p-column> | ||
14 | <p-column field="role" header="Role"></p-column> | ||
15 | <p-column field="createdAt" header="Created date" [sortable]="true"></p-column> | ||
16 | <p-column header="Edit" styleClass="action-cell"> | ||
17 | <ng-template pTemplate="body" let-user="rowData"> | ||
18 | <a [routerLink]="getRouterUserEditLink(user)" title="Edit this user"> | ||
19 | <span class="glyphicon glyphicon-pencil glyphicon-black"></span> | ||
20 | </a> | ||
21 | </ng-template> | ||
22 | </p-column> | ||
23 | <p-column header="Delete" styleClass="action-cell"> | ||
24 | <ng-template pTemplate="body" let-user="rowData"> | ||
25 | <span (click)="removeUser(user)" class="glyphicon glyphicon-remove glyphicon-black" title="Remove this user"></span> | ||
26 | </ng-template> | ||
27 | </p-column> | ||
28 | </p-dataTable> | ||
10 | 29 | ||
11 | <a class="add-user btn btn-success pull-right" [routerLink]="['/admin/users/add']"> | 30 | <a class="add-user btn btn-success pull-right" [routerLink]="['/admin/users/add']"> |
12 | <span class="glyphicon glyphicon-plus"></span> | 31 | <span class="glyphicon glyphicon-plus"></span> |
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 7187a2008..c3fa55825 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,82 +1,37 @@ | |||
1 | import { Component } from '@angular/core' | 1 | import { Component, OnInit } from '@angular/core' |
2 | import { SortMeta } from 'primeng/primeng' | ||
2 | 3 | ||
3 | import { NotificationsService } from 'angular2-notifications' | 4 | import { NotificationsService } from 'angular2-notifications' |
4 | 5 | ||
5 | import { ConfirmService } from '../../../core' | 6 | import { ConfirmService } from '../../../core' |
6 | import { RestDataSource, User, Utils } from '../../../shared' | 7 | import { RestTable, RestPagination, User } from '../../../shared' |
7 | import { UserService } from '../shared' | 8 | import { UserService } from '../shared' |
8 | import { Router } from '@angular/router' | ||
9 | 9 | ||
10 | @Component({ | 10 | @Component({ |
11 | selector: 'my-user-list', | 11 | selector: 'my-user-list', |
12 | templateUrl: './user-list.component.html', | 12 | templateUrl: './user-list.component.html', |
13 | styleUrls: [ './user-list.component.scss' ] | 13 | styleUrls: [ './user-list.component.scss' ] |
14 | }) | 14 | }) |
15 | export class UserListComponent { | 15 | export class UserListComponent extends RestTable implements OnInit { |
16 | usersSource: RestDataSource = null | 16 | users: User[] = [] |
17 | tableSettings = { | 17 | totalRecords = 0 |
18 | mode: 'external', | 18 | rowsPerPage = 10 |
19 | attr: { | 19 | sort: SortMeta = { field: 'id', order: 1 } |
20 | class: 'table-hover' | 20 | pagination: RestPagination = { count: this.rowsPerPage, start: 0 } |
21 | }, | ||
22 | hideSubHeader: true, | ||
23 | actions: { | ||
24 | position: 'right', | ||
25 | add: false, | ||
26 | edit: true, | ||
27 | delete: true | ||
28 | }, | ||
29 | delete: { | ||
30 | deleteButtonContent: Utils.getRowDeleteButton() | ||
31 | }, | ||
32 | edit: { | ||
33 | editButtonContent: Utils.getRowEditButton() | ||
34 | }, | ||
35 | pager: { | ||
36 | display: true, | ||
37 | perPage: 10 | ||
38 | }, | ||
39 | columns: { | ||
40 | id: { | ||
41 | title: 'ID', | ||
42 | sortDirection: 'asc' | ||
43 | }, | ||
44 | username: { | ||
45 | title: 'Username' | ||
46 | }, | ||
47 | email: { | ||
48 | title: 'Email' | ||
49 | }, | ||
50 | videoQuota: { | ||
51 | title: 'Video quota' | ||
52 | }, | ||
53 | role: { | ||
54 | title: 'Role', | ||
55 | sort: false | ||
56 | }, | ||
57 | createdAt: { | ||
58 | title: 'Created Date', | ||
59 | valuePrepareFunction: Utils.dateToHuman | ||
60 | } | ||
61 | } | ||
62 | } | ||
63 | 21 | ||
64 | constructor ( | 22 | constructor ( |
65 | private router: Router, | ||
66 | private notificationsService: NotificationsService, | 23 | private notificationsService: NotificationsService, |
67 | private confirmService: ConfirmService, | 24 | private confirmService: ConfirmService, |
68 | private userService: UserService | 25 | private userService: UserService |
69 | ) { | 26 | ) { |
70 | this.usersSource = this.userService.getDataSource() | 27 | super() |
71 | } | 28 | } |
72 | 29 | ||
73 | editUser ({ data }: { data: User }) { | 30 | ngOnInit () { |
74 | this.router.navigate([ '/admin', 'users', data.id, 'update' ]) | 31 | this.loadData() |
75 | } | 32 | } |
76 | 33 | ||
77 | removeUser ({ data }: { data: User }) { | 34 | removeUser (user: User) { |
78 | const user = data | ||
79 | |||
80 | if (user.username === 'root') { | 35 | if (user.username === 'root') { |
81 | this.notificationsService.error('Error', 'You cannot delete root.') | 36 | this.notificationsService.error('Error', 'You cannot delete root.') |
82 | return | 37 | return |
@@ -89,12 +44,28 @@ export class UserListComponent { | |||
89 | this.userService.removeUser(user).subscribe( | 44 | this.userService.removeUser(user).subscribe( |
90 | () => { | 45 | () => { |
91 | this.notificationsService.success('Success', `User ${user.username} deleted.`) | 46 | this.notificationsService.success('Success', `User ${user.username} deleted.`) |
92 | this.usersSource.refresh() | 47 | this.loadData() |
93 | }, | 48 | }, |
94 | 49 | ||
95 | err => this.notificationsService.error('Error', err.text) | 50 | err => this.notificationsService.error('Error', err) |
96 | ) | 51 | ) |
97 | } | 52 | } |
98 | ) | 53 | ) |
99 | } | 54 | } |
55 | |||
56 | getRouterUserEditLink (user: User) { | ||
57 | return [ '/admin', 'users', user.id, 'update' ] | ||
58 | } | ||
59 | |||
60 | protected loadData () { | ||
61 | this.userService.getUsers(this.pagination, this.sort) | ||
62 | .subscribe( | ||
63 | resultList => { | ||
64 | this.users = resultList.data | ||
65 | this.totalRecords = resultList.total | ||
66 | }, | ||
67 | |||
68 | err => this.notificationsService.error('Error', err) | ||
69 | ) | ||
70 | } | ||
100 | } | 71 | } |