From 28798b5d949826551740fc893d06e6424b77aa6a Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 30 Jan 2017 22:41:14 +0100 Subject: Client: replace simple tables by ng2 smart table component --- .../friends/friend-list/friend-list.component.html | 24 +------ .../friends/friend-list/friend-list.component.ts | 58 ++++++++++++----- .../app/+admin/friends/shared/friend.service.ts | 18 ++---- client/src/app/+admin/users/shared/user.service.ts | 20 +----- .../users/user-list/user-list.component.html | 25 ++------ .../+admin/users/user-list/user-list.component.ts | 71 ++++++++++++++------ .../video-abuse-list.component.html | 28 +------- .../video-abuse-list/video-abuse-list.component.ts | 75 ++++++++++++++++------ 8 files changed, 167 insertions(+), 152 deletions(-) (limited to 'client/src/app/+admin') 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 06258f8c8..254d0c65e 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 @@ -1,29 +1,11 @@

Friends list

- - - - - - - - - + - - - - - - - - -
IDHostScoreCreated Date
{{ friend.id }}{{ friend.host }}{{ friend.score }}{{ friend.createdAt | date: 'medium' }}
- - + 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 175ad9cba..f29427640 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,8 +1,10 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { NotificationsService } from 'angular2-notifications'; +import { ServerDataSource } from 'ng2-smart-table'; import { ConfirmService } from '../../../core'; +import { Utils } from '../../../shared'; import { Friend, FriendService } from '../shared'; @Component({ @@ -10,17 +12,51 @@ import { Friend, FriendService } from '../shared'; templateUrl: './friend-list.component.html', styleUrls: [ './friend-list.component.scss' ] }) -export class FriendListComponent implements OnInit { - friends: Friend[]; +export class FriendListComponent { + friendsSource = null; + tableSettings = { + attr: { + class: 'table-hover' + }, + hideSubHeader: true, + actions: { + position: 'right', + add: false, + edit: false, + delete: false + }, + columns: { + id: { + title: 'ID', + sort: false, + sortDirection: 'asc' + }, + host: { + title: 'Host', + sort: false + }, + score: { + title: 'Score', + sort: false + }, + createdAt: { + title: 'Created Date', + sort: false, + valuePrepareFunction: Utils.dateToHuman + } + } + } constructor( private notificationsService: NotificationsService, private confirmService: ConfirmService, private friendService: FriendService - ) { } + ) { + this.friendsSource = this.friendService.getDataSource(); + } - ngOnInit() { - this.getFriends(); + hasFriends() { + return this.friendsSource.count() != 0; } quitFriends() { @@ -33,7 +69,7 @@ export class FriendListComponent implements OnInit { status => { this.notificationsService.success('Sucess', 'Friends left!'); - this.getFriends(); + this.friendsSource.refresh(); }, err => this.notificationsService.error('Error', err.text) @@ -41,12 +77,4 @@ export class FriendListComponent implements OnInit { } ); } - - private getFriends() { - this.friendService.getFriends().subscribe( - res => this.friends = res.friends, - - err => this.notificationsService.error('Error', err.text) - ); - } } diff --git a/client/src/app/+admin/friends/shared/friend.service.ts b/client/src/app/+admin/friends/shared/friend.service.ts index e97459385..6cb84f5cd 100644 --- a/client/src/app/+admin/friends/shared/friend.service.ts +++ b/client/src/app/+admin/friends/shared/friend.service.ts @@ -3,8 +3,10 @@ import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/map'; +import { ServerDataSource } from 'ng2-smart-table'; + import { Friend } from './friend.model'; -import { AuthHttp, RestExtractor, ResultList } from '../../../shared'; +import { AuthHttp, RestExtractor, RestDataSource, ResultList } from '../../../shared'; @Injectable() export class FriendService { @@ -15,11 +17,8 @@ export class FriendService { private restExtractor: RestExtractor ) {} - getFriends() { - return this.authHttp.get(FriendService.BASE_FRIEND_URL) - .map(this.restExtractor.extractDataList) - .map(this.extractFriends) - .catch((res) => this.restExtractor.handleError(res)); + getDataSource() { + return new RestDataSource(this.authHttp, FriendService.BASE_FRIEND_URL); } makeFriends(notEmptyHosts) { @@ -37,11 +36,4 @@ export class FriendService { .map(res => res.status) .catch((res) => this.restExtractor.handleError(res)); } - - private extractFriends(result: ResultList) { - const friends: Friend[] = result.data; - const totalFriends = result.total; - - return { friends, totalFriends }; - } } diff --git a/client/src/app/+admin/users/shared/user.service.ts b/client/src/app/+admin/users/shared/user.service.ts index d9005b213..f6d360e09 100644 --- a/client/src/app/+admin/users/shared/user.service.ts +++ b/client/src/app/+admin/users/shared/user.service.ts @@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'; import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/map'; -import { AuthHttp, RestExtractor, ResultList, User } from '../../../shared'; +import { AuthHttp, RestExtractor, RestDataSource, User } from '../../../shared'; @Injectable() export class UserService { @@ -25,25 +25,11 @@ export class UserService { .catch(this.restExtractor.handleError); } - getUsers() { - return this.authHttp.get(UserService.BASE_USERS_URL) - .map(this.restExtractor.extractDataList) - .map(this.extractUsers) - .catch((res) => this.restExtractor.handleError(res)); + getDataSource() { + return new RestDataSource(this.authHttp, UserService.BASE_USERS_URL); } removeUser(user: User) { return this.authHttp.delete(UserService.BASE_USERS_URL + user.id); } - - private extractUsers(result: ResultList) { - const usersJson = result.data; - const totalUsers = result.total; - const users = []; - for (const userJson of usersJson) { - users.push(new User(userJson)); - } - - return { users, totalUsers }; - } } 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 36193d119..3d3d7e054 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 @@ -1,26 +1,9 @@

Users list

- - - - - - - - - - - - - - - - - - -
IDUsernameCreated DateRemove
{{ user.id }}{{ user.username }}{{ user.createdAt | date: 'medium' }} - -
+ 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 baefb7064..db025d3a8 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,9 +1,9 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { NotificationsService } from 'angular2-notifications'; import { ConfirmService } from '../../../core'; -import { User } from '../../../shared'; +import { User, Utils } from '../../../shared'; import { UserService } from '../shared'; @Component({ @@ -11,33 +11,62 @@ import { UserService } from '../shared'; templateUrl: './user-list.component.html', styleUrls: [ './user-list.component.scss' ] }) -export class UserListComponent implements OnInit { - totalUsers: number; - users: User[]; +export class UserListComponent { + usersSource = null; + tableSettings = { + mode: 'external', + attr: { + class: 'table-hover' + }, + hideSubHeader: true, + actions: { + position: 'right', + add: false, + edit: false, + delete: true + }, + delete: { + deleteButtonContent: Utils.getRowDeleteButton() + }, + pager: { + display: true, + perPage: 10 + }, + columns: { + id: { + title: 'ID', + sortDirection: 'asc' + }, + username: { + title: 'Username' + }, + role: { + title: 'Role', + sort: false + }, + createdAt: { + title: 'Created Date', + valuePrepareFunction: Utils.dateToHuman + } + } + } constructor( private notificationsService: NotificationsService, private confirmService: ConfirmService, private userService: UserService - ) {} - - ngOnInit() { - this.getUsers(); + ) { + this.usersSource = this.userService.getDataSource(); } - getUsers() { - this.userService.getUsers().subscribe( - ({ users, totalUsers }) => { - this.users = users; - this.totalUsers = totalUsers; - }, - - err => this.notificationsService.error('Error', err.text) - ); - } + removeUser({ data }) { + const user: User = data; + if (user.username === 'root') { + this.notificationsService.error('Error', 'You cannot delete root.'); + return; + } - removeUser(user: User) { this.confirmService.confirm('Do you really want to delete this user?', 'Delete').subscribe( res => { if (res === false) return; @@ -45,7 +74,7 @@ export class UserListComponent implements OnInit { this.userService.removeUser(user).subscribe( () => { this.notificationsService.success('Success', `User ${user.username} deleted.`); - this.getUsers(); + this.usersSource.refresh(); }, err => this.notificationsService.error('Error', err.text) 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 46043577c..b2fd17bf0 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 @@ -1,27 +1,5 @@

Video abuses list

- - - - - - - - - - - - - - - - - - - - - - -
IDReasonReporter pod hostReporter usernameVideoCreated at
{{ videoAbuse.id }}{{ videoAbuse.reason }}{{ videoAbuse.reporterPodHost }}{{ videoAbuse.reporterUsername }} - {{ videoAbuse.videoId }} - {{ videoAbuse.createdAt | date: 'medium' }}
+ 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 cfd9151b0..2f22a4ab0 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,35 +1,72 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { NotificationsService } from 'angular2-notifications'; -import { VideoAbuseService, VideoAbuse} from '../../../shared'; +import { Utils, VideoAbuseService, VideoAbuse} from '../../../shared'; @Component({ selector: 'my-video-abuse-list', templateUrl: './video-abuse-list.component.html', styleUrls: [ './video-abuse-list.component.scss' ] }) -export class VideoAbuseListComponent implements OnInit { - videoAbuses: VideoAbuse[]; +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 + } + } + } constructor( private notificationsService: NotificationsService, private videoAbuseService: VideoAbuseService - ) { } - - ngOnInit() { - this.getVideoAbuses(); - } - - buildVideoLink(videoAbuse: VideoAbuse) { - return `/videos/${videoAbuse.videoId}`; - } - - private getVideoAbuses() { - this.videoAbuseService.getVideoAbuses().subscribe( - res => this.videoAbuses = res.videoAbuses, + ) { + this.videoAbusesSource = this.videoAbuseService.getDataSource(); + } - err => this.notificationsService.error('Error', err.text) - ); + buildVideoLink(videoId: string) { + // TODO: transform to routerLink + // https://github.com/akveo/ng2-smart-table/issues/57 + return `${videoId}`; } } -- cgit v1.2.3