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/shared/rest/index.ts | 1 + client/src/app/shared/rest/rest-data-source.ts | 98 +++++++--------------- .../src/app/shared/rest/rest-extractor.service.ts | 66 ++++++++------- client/src/app/shared/rest/rest-pagination.ts | 5 +- client/src/app/shared/rest/rest-table.ts | 27 ++++++ client/src/app/shared/rest/rest.service.ts | 31 ++++--- 6 files changed, 116 insertions(+), 112 deletions(-) create mode 100644 client/src/app/shared/rest/rest-table.ts (limited to 'client/src/app/shared/rest') diff --git a/client/src/app/shared/rest/index.ts b/client/src/app/shared/rest/index.ts index e0be155cf..3f1996130 100644 --- a/client/src/app/shared/rest/index.ts +++ b/client/src/app/shared/rest/index.ts @@ -2,3 +2,4 @@ export * from './rest-data-source' export * from './rest-extractor.service' export * from './rest-pagination' export * from './rest.service' +export * from './rest-table' diff --git a/client/src/app/shared/rest/rest-data-source.ts b/client/src/app/shared/rest/rest-data-source.ts index 5c205d280..57a2efb57 100644 --- a/client/src/app/shared/rest/rest-data-source.ts +++ b/client/src/app/shared/rest/rest-data-source.ts @@ -1,68 +1,32 @@ -import { Http, RequestOptionsArgs, URLSearchParams, Response } from '@angular/http' - -import { ServerDataSource } from 'ng2-smart-table' - -export class RestDataSource extends ServerDataSource { - private updateResponse: (input: any[]) => any[] - - constructor (http: Http, endpoint: string, updateResponse?: (input: any[]) => any[]) { - const options = { - endPoint: endpoint, - sortFieldKey: 'sort', - dataKey: 'data' - } - super(http, options) - - if (updateResponse) { - this.updateResponse = updateResponse - } - } - - protected extractDataFromResponse (res: Response) { - const json = res.json() - if (!json) return [] - let data = json.data - - if (this.updateResponse !== undefined) { - data = this.updateResponse(data) - } - - return data - } - - protected extractTotalFromResponse (res: Response) { - const rawData = res.json() - return rawData ? parseInt(rawData.total, 10) : 0 - } - - protected addSortRequestOptions (requestOptions: RequestOptionsArgs) { - const searchParams = requestOptions.params as URLSearchParams - - if (this.sortConf) { - this.sortConf.forEach((fieldConf) => { - const sortPrefix = fieldConf.direction === 'desc' ? '-' : '' - - searchParams.set(this.conf.sortFieldKey, sortPrefix + fieldConf.field) - }) - } - - return requestOptions - } - - protected addPagerRequestOptions (requestOptions: RequestOptionsArgs) { - const searchParams = requestOptions.params as URLSearchParams - - if (this.pagingConf && this.pagingConf['page'] && this.pagingConf['perPage']) { - const perPage = this.pagingConf['perPage'] - const page = this.pagingConf['page'] - - const start = (page - 1) * perPage - const count = perPage - - searchParams.set('start', start.toString()) - searchParams.set('count', count.toString()) - } - - return requestOptions - } +export class RestDataSource { + // protected addSortRequestOptions (requestOptions: RequestOptionsArgs) { + // const searchParams = requestOptions.params as URLSearchParams + // + // if (this.sortConf) { + // this.sortConf.forEach((fieldConf) => { + // const sortPrefix = fieldConf.direction === 'desc' ? '-' : '' + // + // searchParams.set(this.conf.sortFieldKey, sortPrefix + fieldConf.field) + // }) + // } + // + // return requestOptions + // } + // + // protected addPagerRequestOptions (requestOptions: RequestOptionsArgs) { + // const searchParams = requestOptions.params as URLSearchParams + // + // if (this.pagingConf && this.pagingConf['page'] && this.pagingConf['perPage']) { + // const perPage = this.pagingConf['perPage'] + // const page = this.pagingConf['page'] + // + // const start = (page - 1) * perPage + // const count = perPage + // + // searchParams.set('start', start.toString()) + // searchParams.set('count', count.toString()) + // } + // + // return requestOptions + // } } diff --git a/client/src/app/shared/rest/rest-extractor.service.ts b/client/src/app/shared/rest/rest-extractor.service.ts index f6a818ec8..32dad5c73 100644 --- a/client/src/app/shared/rest/rest-extractor.service.ts +++ b/client/src/app/shared/rest/rest-extractor.service.ts @@ -1,52 +1,58 @@ import { Injectable } from '@angular/core' -import { Response } from '@angular/http' import { Observable } from 'rxjs/Observable' +import { HttpErrorResponse } from '@angular/common/http' -export interface ResultList { - data: any[] - total: number -} +import { Utils } from '../utils' +import { ResultList } from '../../../../../shared' @Injectable() export class RestExtractor { - extractDataBool (res: Response) { + extractDataBool () { return true } - extractDataList (res: Response) { - const body = res.json() + applyToResultListData (result: ResultList, fun: Function, additionalArgs?: any[]): ResultList { + const data: T[] = result.data + const newData: T[] = [] - const ret: ResultList = { - data: body.data, - total: body.total - } + data.forEach(d => newData.push(fun.call(this, d, additionalArgs))) - return ret + return { + total: result.total, + data: newData + } } - extractDataGet (res: Response) { - return res.json() + convertResultListDateToHuman (result: ResultList, fieldsToConvert: string[] = [ 'createdAt' ]): ResultList { + return this.applyToResultListData(result, this.convertDateToHuman, [ fieldsToConvert ]) } - handleError (res: Response) { - let text = 'Server error: ' - text += res.text() - let json = '' + convertDateToHuman (target: object, fieldsToConvert: string[]) { + const source = {} + fieldsToConvert.forEach(field => { + source[field] = Utils.dateToHuman(target[field]) + }) - try { - json = res.json() - } catch (err) { - console.error('Cannot get JSON from response.') - } + return Object.assign(target, source) + } - const error = { - json, - text + handleError (err: HttpErrorResponse) { + let errorMessage + + if (err.error instanceof Error) { + // A client-side or network error occurred. Handle it accordingly. + errorMessage = err.error.message + console.error('An error occurred:', errorMessage) + } else if (err.status !== undefined) { + // The backend returned an unsuccessful response code. + // The response body may contain clues as to what went wrong, + errorMessage = err.error + console.error(`Backend returned code ${err.status}, body was: ${errorMessage}`) + } else { + errorMessage = err } - console.error(error) - - return Observable.throw(error) + return Observable.throw(errorMessage) } } diff --git a/client/src/app/shared/rest/rest-pagination.ts b/client/src/app/shared/rest/rest-pagination.ts index 766e7a9e5..0faa59303 100644 --- a/client/src/app/shared/rest/rest-pagination.ts +++ b/client/src/app/shared/rest/rest-pagination.ts @@ -1,5 +1,4 @@ export interface RestPagination { - currentPage: number - itemsPerPage: number - totalItems: number + start: number + count: number } diff --git a/client/src/app/shared/rest/rest-table.ts b/client/src/app/shared/rest/rest-table.ts new file mode 100644 index 000000000..db2cb5e14 --- /dev/null +++ b/client/src/app/shared/rest/rest-table.ts @@ -0,0 +1,27 @@ +import { LazyLoadEvent, SortMeta } from 'primeng/primeng' + +import { RestPagination } from './rest-pagination' + +export abstract class RestTable { + abstract totalRecords: number + abstract rowsPerPage: number + abstract sort: SortMeta + abstract pagination: RestPagination + + protected abstract loadData (): void + + loadLazy (event: LazyLoadEvent) { + this.sort = { + order: event.sortOrder, + field: event.sortField + } + + this.pagination = { + start: event.first, + count: this.rowsPerPage + } + + this.loadData() + } + +} diff --git a/client/src/app/shared/rest/rest.service.ts b/client/src/app/shared/rest/rest.service.ts index 43dc20b34..f7838ba06 100644 --- a/client/src/app/shared/rest/rest.service.ts +++ b/client/src/app/shared/rest/rest.service.ts @@ -1,27 +1,34 @@ import { Injectable } from '@angular/core' -import { URLSearchParams } from '@angular/http' +import { HttpParams } from '@angular/common/http' +import { SortMeta } from 'primeng/primeng' import { RestPagination } from './rest-pagination' @Injectable() export class RestService { - buildRestGetParams (pagination?: RestPagination, sort?: string) { - const params = new URLSearchParams() + addRestGetParams (params: HttpParams, pagination?: RestPagination, sort?: SortMeta | string) { + let newParams = params - if (pagination) { - const start: number = (pagination.currentPage - 1) * pagination.itemsPerPage - const count: number = pagination.itemsPerPage - - params.set('start', start.toString()) - params.set('count', count.toString()) + if (pagination !== undefined) { + newParams = newParams.set('start', pagination.start.toString()) + .set('count', pagination.count.toString()) } - if (sort) { - params.set('sort', sort) + if (sort !== undefined) { + let sortString = '' + + if (typeof sort === 'string') { + sortString = sort + } else { + const sortPrefix = sort.order === 1 ? '' : '-' + sortString = sortPrefix + sort.field + } + + newParams = newParams.set('sort', sortString) } - return params + return newParams } } -- cgit v1.2.3