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 --- 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 ++++++++-------------- 3 files changed, 83 insertions(+), 91 deletions(-) (limited to 'client/src/app/+admin/users') 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) + ) + } } -- cgit v1.2.3