From d592e0a9b2931c7c9cbedb27fb8efc9aaacad9bb Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 14 Sep 2017 11:57:49 +0200 Subject: Move to HttpClient and PrimeNG data table --- .../friends/friend-add/friend-add.component.ts | 5 +- .../friends/friend-list/friend-list.component.html | 15 +++- .../friends/friend-list/friend-list.component.ts | 88 +++++++-------------- .../app/+admin/friends/shared/friend.service.ts | 24 +++--- .../shared/request-schedulers.service.ts | 16 ++-- client/src/app/+admin/users/shared/user.service.ts | 56 ++++++------- .../users/user-list/user-list.component.html | 27 ++++++- .../+admin/users/user-list/user-list.component.ts | 91 ++++++++-------------- .../video-abuse-list.component.html | 18 ++++- .../video-abuse-list/video-abuse-list.component.ts | 84 +++++++------------- 10 files changed, 192 insertions(+), 232 deletions(-) (limited to 'client/src/app/+admin') diff --git a/client/src/app/+admin/friends/friend-add/friend-add.component.ts b/client/src/app/+admin/friends/friend-add/friend-add.component.ts index 0449d26a9..02543d393 100644 --- a/client/src/app/+admin/friends/friend-add/friend-add.component.ts +++ b/client/src/app/+admin/friends/friend-add/friend-add.component.ts @@ -93,8 +93,9 @@ export class FriendAddComponent implements OnInit { this.friendService.makeFriends(notEmptyHosts).subscribe( status => { - this.notificationsService.success('Sucess', 'Make friends request sent!') - this.router.navigate([ '/admin/friends/list' ]) + this.notificationsService.success('Success', 'Make friends request sent!') + // Wait requests between pods + setTimeout(() => this.router.navigate([ '/admin/friends/list' ]), 1000) }, err => this.notificationsService.error('Error', err.text) diff --git a/client/src/app/+admin/friends/friend-list/friend-list.component.html b/client/src/app/+admin/friends/friend-list/friend-list.component.html index 7b9fff304..7887bc5e3 100644 --- a/client/src/app/+admin/friends/friend-list/friend-list.component.html +++ b/client/src/app/+admin/friends/friend-list/friend-list.component.html @@ -2,13 +2,24 @@

Friends list

- + + + + + + + + + + + + Quit friends - + Make friends
diff --git a/client/src/app/+admin/friends/friend-list/friend-list.component.ts b/client/src/app/+admin/friends/friend-list/friend-list.component.ts index 822a112cc..6a8bd492c 100644 --- a/client/src/app/+admin/friends/friend-list/friend-list.component.ts +++ b/client/src/app/+admin/friends/friend-list/friend-list.component.ts @@ -1,71 +1,31 @@ -import { Component } from '@angular/core' +import { Component, OnInit } from '@angular/core' import { NotificationsService } from 'angular2-notifications' -import { ServerDataSource } from 'ng2-smart-table' import { ConfirmService } from '../../../core' -import { Utils } from '../../../shared' import { FriendService } from '../shared' import { Pod } from '../../../../../../shared' @Component({ selector: 'my-friend-list', templateUrl: './friend-list.component.html', - styleUrls: [ './friend-list.component.scss' ] + styleUrls: ['./friend-list.component.scss'] }) -export class FriendListComponent { - friendsSource = null - tableSettings = { - mode: 'external', - attr: { - class: 'table-hover' - }, - hideSubHeader: true, - actions: { - position: 'right', - add: false, - edit: false, - delete: true - }, - delete: { - deleteButtonContent: Utils.getRowDeleteButton() - }, - columns: { - id: { - title: 'ID', - sort: false, - sortDirection: 'asc' - }, - host: { - title: 'Host', - sort: false - }, - email: { - title: 'Email', - sort: false - }, - score: { - title: 'Score', - sort: false - }, - createdAt: { - title: 'Created Date', - sort: false, - valuePrepareFunction: Utils.dateToHuman - } - } - } +export class FriendListComponent implements OnInit { + friends: Pod[] = [] constructor ( private notificationsService: NotificationsService, private confirmService: ConfirmService, private friendService: FriendService - ) { - this.friendsSource = this.friendService.getDataSource() + ) {} + + ngOnInit () { + this.loadData() } hasFriends () { - return this.friendsSource.count() !== 0 + return this.friends.length !== 0 } quitFriends () { @@ -77,32 +37,42 @@ export class FriendListComponent { this.friendService.quitFriends().subscribe( status => { this.notificationsService.success('Success', 'Friends left!') - this.friendsSource.refresh() + this.loadData() }, - err => this.notificationsService.error('Error', err.text) + err => this.notificationsService.error('Error', err) ) } ) } - removeFriend ({ data }) { + removeFriend (friend: Pod) { const confirmMessage = 'Do you really want to remove this friend ? All its videos will be deleted.' - const friend: Pod = data this.confirmService.confirm(confirmMessage, 'Remove').subscribe( res => { if (res === false) return this.friendService.removeFriend(friend).subscribe( - status => { - this.notificationsService.success('Success', 'Friend removed') - this.friendsSource.refresh() - }, + status => { + this.notificationsService.success('Success', 'Friend removed') + this.loadData() + }, - err => this.notificationsService.error('Error', err.text) - ) + err => this.notificationsService.error('Error', err) + ) } ) } + + private loadData () { + this.friendService.getFriends() + .subscribe( + resultList => { + this.friends = resultList.data + }, + + err => this.notificationsService.error('Error', err) + ) + } } diff --git a/client/src/app/+admin/friends/shared/friend.service.ts b/client/src/app/+admin/friends/shared/friend.service.ts index 9b3ff04b1..45607e28d 100644 --- a/client/src/app/+admin/friends/shared/friend.service.ts +++ b/client/src/app/+admin/friends/shared/friend.service.ts @@ -1,24 +1,24 @@ import { Injectable } from '@angular/core' -import { Observable } from 'rxjs/Observable' +import { HttpClient } from '@angular/common/http' import 'rxjs/add/operator/catch' import 'rxjs/add/operator/map' -import { ServerDataSource } from 'ng2-smart-table' - -import { AuthHttp, RestExtractor, RestDataSource, ResultList } from '../../../shared' -import { Pod } from '../../../../../../shared' +import { RestExtractor, } from '../../../shared' +import { Pod, ResultList } from '../../../../../../shared' @Injectable() export class FriendService { private static BASE_FRIEND_URL = API_URL + '/api/v1/pods/' constructor ( - private authHttp: AuthHttp, + private authHttp: HttpClient, private restExtractor: RestExtractor ) {} - getDataSource () { - return new RestDataSource(this.authHttp, FriendService.BASE_FRIEND_URL) + getFriends () { + return this.authHttp.get>(FriendService.BASE_FRIEND_URL) + .map(res => this.restExtractor.convertResultListDateToHuman(res)) + .catch(res => this.restExtractor.handleError(res)) } makeFriends (notEmptyHosts: String[]) { @@ -28,18 +28,18 @@ export class FriendService { return this.authHttp.post(FriendService.BASE_FRIEND_URL + 'make-friends', body) .map(this.restExtractor.extractDataBool) - .catch((res) => this.restExtractor.handleError(res)) + .catch(res => this.restExtractor.handleError(res)) } quitFriends () { return this.authHttp.get(FriendService.BASE_FRIEND_URL + 'quit-friends') - .map(res => res.status) - .catch((res) => this.restExtractor.handleError(res)) + .map(this.restExtractor.extractDataBool) + .catch(res => this.restExtractor.handleError(res)) } removeFriend (friend: Pod) { return this.authHttp.delete(FriendService.BASE_FRIEND_URL + friend.id) .map(this.restExtractor.extractDataBool) - .catch((res) => this.restExtractor.handleError(res)) + .catch(res => this.restExtractor.handleError(res)) } } diff --git a/client/src/app/+admin/request-schedulers/shared/request-schedulers.service.ts b/client/src/app/+admin/request-schedulers/shared/request-schedulers.service.ts index e9b166f78..44d9cbc3e 100644 --- a/client/src/app/+admin/request-schedulers/shared/request-schedulers.service.ts +++ b/client/src/app/+admin/request-schedulers/shared/request-schedulers.service.ts @@ -1,10 +1,11 @@ import { Injectable } from '@angular/core' +import { HttpClient } from '@angular/common/http' import { Observable } from 'rxjs/Observable' import 'rxjs/add/operator/catch' import 'rxjs/add/operator/map' import { RequestSchedulerStats } from '../../../../../../shared' -import { AuthHttp, RestExtractor } from '../../../shared' +import { RestExtractor } from '../../../shared' import { RequestSchedulerStatsAttributes } from './request-schedulers-stats-attributes.model' @Injectable() @@ -12,19 +13,18 @@ export class RequestSchedulersService { private static BASE_REQUEST_URL = API_URL + '/api/v1/request-schedulers/' constructor ( - private authHttp: AuthHttp, + private authHttp: HttpClient, private restExtractor: RestExtractor ) {} - getStats (): Observable { - return this.authHttp.get(RequestSchedulersService.BASE_REQUEST_URL + 'stats') - .map(this.restExtractor.extractDataGet) - .map(this.buildRequestObjects) - .catch((res) => this.restExtractor.handleError(res)) + getStats () { + return this.authHttp.get(RequestSchedulersService.BASE_REQUEST_URL + 'stats') + .map(res => this.buildRequestObjects(res)) + .catch(res => this.restExtractor.handleError(res)) } private buildRequestObjects (data: RequestSchedulerStats) { - const requestSchedulers = {} + const requestSchedulers: { [ id: string ]: RequestSchedulerStatsAttributes } = {} Object.keys(data).forEach(requestSchedulerName => { requestSchedulers[requestSchedulerName] = new RequestSchedulerStatsAttributes(data[requestSchedulerName]) 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 @@ import { Injectable } from '@angular/core' +import { HttpClient, HttpParams } from '@angular/common/http' +import { Observable } from 'rxjs/Observable' import 'rxjs/add/operator/catch' import 'rxjs/add/operator/map' +import { SortMeta } from 'primeng/primeng' import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe' -import { AuthHttp, RestExtractor, RestDataSource, User } from '../../../shared' -import { UserCreate, UserUpdate } from '../../../../../../shared' +import { RestExtractor, User, RestPagination, RestService } from '../../../shared' +import { UserCreate, UserUpdate, ResultList } from '../../../../../../shared' @Injectable() export class UserService { @@ -13,53 +16,52 @@ export class UserService { private bytesPipe = new BytesPipe() constructor ( - private authHttp: AuthHttp, + private authHttp: HttpClient, + private restService: RestService, private restExtractor: RestExtractor ) {} addUser (userCreate: UserCreate) { return this.authHttp.post(UserService.BASE_USERS_URL, userCreate) .map(this.restExtractor.extractDataBool) - .catch(this.restExtractor.handleError) + .catch(err => this.restExtractor.handleError(err)) } updateUser (userId: number, userUpdate: UserUpdate) { return this.authHttp.put(UserService.BASE_USERS_URL + userId, userUpdate) - .map(this.restExtractor.extractDataBool) - .catch(this.restExtractor.handleError) + .map(this.restExtractor.extractDataBool) + .catch(err => this.restExtractor.handleError(err)) } getUser (userId: number) { - return this.authHttp.get(UserService.BASE_USERS_URL + userId) - .map(this.restExtractor.extractDataGet) - .catch(this.restExtractor.handleError) + return this.authHttp.get(UserService.BASE_USERS_URL + userId) + .catch(err => this.restExtractor.handleError(err)) } - getDataSource () { - return new RestDataSource(this.authHttp, UserService.BASE_USERS_URL, this.formatDataSource.bind(this)) + getUsers (pagination: RestPagination, sort: SortMeta): Observable> { + let params = new HttpParams() + params = this.restService.addRestGetParams(params, pagination, sort) + + return this.authHttp.get>(UserService.BASE_USERS_URL, { params }) + .map(res => this.restExtractor.convertResultListDateToHuman(res)) + .map(res => this.restExtractor.applyToResultListData(res, this.formatUser.bind(this))) + .catch(err => this.restExtractor.handleError(err)) } removeUser (user: User) { return this.authHttp.delete(UserService.BASE_USERS_URL + user.id) } - private formatDataSource (users: User[]) { - const newUsers = [] + private formatUser (user: User) { + let videoQuota + if (user.videoQuota === -1) { + videoQuota = 'Unlimited' + } else { + videoQuota = this.bytesPipe.transform(user.videoQuota) + } - users.forEach(user => { - let videoQuota - if (user.videoQuota === -1) { - videoQuota = 'Unlimited' - } else { - videoQuota = this.bytesPipe.transform(user.videoQuota) - } - - const newUser = Object.assign(user, { - videoQuota - }) - newUsers.push(newUser) + return Object.assign(user, { + videoQuota }) - - return newUsers } } 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 @@

Users list

- + + + + + + + + + + + + + + + + + + + + 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 @@ -import { Component } from '@angular/core' +import { Component, OnInit } from '@angular/core' +import { SortMeta } from 'primeng/primeng' import { NotificationsService } from 'angular2-notifications' import { ConfirmService } from '../../../core' -import { RestDataSource, User, Utils } from '../../../shared' +import { RestTable, RestPagination, User } from '../../../shared' import { UserService } from '../shared' -import { Router } from '@angular/router' @Component({ selector: 'my-user-list', templateUrl: './user-list.component.html', styleUrls: [ './user-list.component.scss' ] }) -export class UserListComponent { - usersSource: RestDataSource = null - tableSettings = { - mode: 'external', - attr: { - class: 'table-hover' - }, - hideSubHeader: true, - actions: { - position: 'right', - add: false, - edit: true, - delete: true - }, - delete: { - deleteButtonContent: Utils.getRowDeleteButton() - }, - edit: { - editButtonContent: Utils.getRowEditButton() - }, - pager: { - display: true, - perPage: 10 - }, - columns: { - id: { - title: 'ID', - sortDirection: 'asc' - }, - username: { - title: 'Username' - }, - email: { - title: 'Email' - }, - videoQuota: { - title: 'Video quota' - }, - role: { - title: 'Role', - sort: false - }, - createdAt: { - title: 'Created Date', - valuePrepareFunction: Utils.dateToHuman - } - } - } +export class UserListComponent extends RestTable implements OnInit { + users: User[] = [] + totalRecords = 0 + rowsPerPage = 10 + sort: SortMeta = { field: 'id', order: 1 } + pagination: RestPagination = { count: this.rowsPerPage, start: 0 } constructor ( - private router: Router, private notificationsService: NotificationsService, private confirmService: ConfirmService, private userService: UserService ) { - this.usersSource = this.userService.getDataSource() + super() } - editUser ({ data }: { data: User }) { - this.router.navigate([ '/admin', 'users', data.id, 'update' ]) + ngOnInit () { + this.loadData() } - removeUser ({ data }: { data: User }) { - const user = data - + removeUser (user: User) { if (user.username === 'root') { this.notificationsService.error('Error', 'You cannot delete root.') return @@ -89,12 +44,28 @@ export class UserListComponent { this.userService.removeUser(user).subscribe( () => { this.notificationsService.success('Success', `User ${user.username} deleted.`) - this.usersSource.refresh() + this.loadData() }, - err => this.notificationsService.error('Error', err.text) + err => this.notificationsService.error('Error', err) ) } ) } + + getRouterUserEditLink (user: User) { + return [ '/admin', 'users', user.id, 'update' ] + } + + protected loadData () { + this.userService.getUsers(this.pagination, this.sort) + .subscribe( + resultList => { + this.users = resultList.data + this.totalRecords = resultList.total + }, + + err => this.notificationsService.error('Error', err) + ) + } } diff --git a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html index c6723a734..e73f38112 100644 --- a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html +++ b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.html @@ -3,9 +3,21 @@

Video abuses list

- + + + + + + + + {{ videoAbuse.videoId }} + + + + diff --git a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts index 7c838fbf0..cc9c1bdf4 100644 --- a/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts +++ b/client/src/app/+admin/video-abuses/video-abuse-list/video-abuse-list.component.ts @@ -1,72 +1,46 @@ -import { Component } from '@angular/core' +import { Component, OnInit } from '@angular/core' import { NotificationsService } from 'angular2-notifications' +import { SortMeta } from 'primeng/primeng' -import { Utils, VideoAbuseService } from '../../../shared' -import { VideoAbuse } from '../../../../../shared' +import { RestTable, RestPagination, VideoAbuseService } from '../../../shared' +import { VideoAbuse } from '../../../../../../shared' @Component({ selector: 'my-video-abuse-list', templateUrl: './video-abuse-list.component.html' }) -export class VideoAbuseListComponent { - videoAbusesSource = null - tableSettings = { - mode: 'external', - attr: { - class: 'table-hover' - }, - hideSubHeader: true, - actions: { - position: 'right', - add: false, - edit: false, - delete: false - }, - pager: { - display: true, - perPage: 10 - }, - columns: { - id: { - title: 'ID', - sortDirection: 'asc' - }, - reason: { - title: 'Reason', - sort: false - }, - reporterPodHost: { - title: 'Reporter pod host', - sort: false - }, - reporterUsername: { - title: 'Reporter username', - sort: false - }, - videoId: { - title: 'Video', - type: 'html', - sort: false, - valuePrepareFunction: this.buildVideoLink - }, - createdAt: { - title: 'Created Date', - valuePrepareFunction: Utils.dateToHuman - } - } - } +export class VideoAbuseListComponent extends RestTable implements OnInit { + videoAbuses: VideoAbuse[] = [] + totalRecords = 0 + rowsPerPage = 1 + sort: SortMeta = { field: 'id', order: 1 } + pagination: RestPagination = { count: this.rowsPerPage, start: 0 } constructor ( private notificationsService: NotificationsService, private videoAbuseService: VideoAbuseService ) { - this.videoAbusesSource = this.videoAbuseService.getDataSource() + super() + } + + ngOnInit () { + this.loadData() } - buildVideoLink (videoId: string) { - // TODO: transform to routerLink - // https://github.com/akveo/ng2-smart-table/issues/57 - return `${videoId}` + getRouterVideoLink (videoId: number) { + return [ '/videos', videoId ] + } + + protected loadData () { + return this.videoAbuseService.getVideoAbuses(this.pagination, this.sort) + .subscribe( + resultList => { + this.videoAbuses = resultList.data + this.totalRecords = resultList.total + }, + + err => this.notificationsService.error('Error', err) + ) } } -- cgit v1.2.3