From c3f0ffe19055001b29b30549b088b6a1582446ef Mon Sep 17 00:00:00 2001 From: Evert Prants Date: Sat, 7 Nov 2020 15:14:39 +0200 Subject: [PATCH] simple paginator works --- src/app/list-page/list-page.component.ts | 4 ++-- .../list-paginate/list-paginate.component.html | 7 ++++++- .../list-paginate/list-paginate.component.ts | 14 ++++++++++---- src/app/list.service.ts | 6 +++--- src/app/list/list.component.ts | 17 ++++++++++++----- 5 files changed, 33 insertions(+), 15 deletions(-) diff --git a/src/app/list-page/list-page.component.ts b/src/app/list-page/list-page.component.ts index 830725d..1ecfa71 100644 --- a/src/app/list-page/list-page.component.ts +++ b/src/app/list-page/list-page.component.ts @@ -14,7 +14,7 @@ export class ListPageComponent implements OnInit { ngOnInit(): void { this.route.queryParams .subscribe((params) => { - this.page = params.page || 1 - }) + this.page = +(params.page || 1); + }); } } diff --git a/src/app/list-paginate/list-paginate.component.html b/src/app/list-paginate/list-paginate.component.html index ffde1ef..2a9f379 100644 --- a/src/app/list-paginate/list-paginate.component.html +++ b/src/app/list-paginate/list-paginate.component.html @@ -1 +1,6 @@ -{{ page }} / {{ pages }} + +< + + {{npage}} + +> diff --git a/src/app/list-paginate/list-paginate.component.ts b/src/app/list-paginate/list-paginate.component.ts index 08b2931..5d1b015 100644 --- a/src/app/list-paginate/list-paginate.component.ts +++ b/src/app/list-paginate/list-paginate.component.ts @@ -1,20 +1,26 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, Input } from '@angular/core'; +import { Router } from '@angular/router'; @Component({ selector: 'app-list-paginate', templateUrl: './list-paginate.component.html', styleUrls: ['./list-paginate.component.styl'] }) -export class ListPaginateComponent implements OnInit { +export class ListPaginateComponent { @Input() page: number; @Input() pages: number; - constructor() { } + constructor(private router: Router) { } - ngOnInit(): void { + public get pageNums(): number[] { + const starti = Math.min(Math.max(this.page - 2, 1), this.pages - 4); + return [...Array(5)].map((p, i) => starti + i); } + public navigate(num: number): void { + this.router.navigate(['/list'], { queryParams: { page: Math.min(Math.max(num, 1), this.pages) }}); + } } diff --git a/src/app/list.service.ts b/src/app/list.service.ts index 006a5f3..e9f172b 100644 --- a/src/app/list.service.ts +++ b/src/app/list.service.ts @@ -7,12 +7,12 @@ import { IAPIResponse } from './api-response' providedIn: 'root' }) export class ListService { - private listUrl = 'http://midaiganes.irw.ee/api/list' + private listUrl = 'http://midaiganes.irw.ee/api/list'; constructor(private http: HttpClient) { } public getList(limit: number = 10, offset: number = 0): Observable { - const url = `${this.listUrl}?offset=${offset}&limit=${limit}` - return this.http.get(url) + const url = `${this.listUrl}?offset=${offset}&limit=${limit}`; + return this.http.get(url); } } diff --git a/src/app/list/list.component.ts b/src/app/list/list.component.ts index 45dcc0d..1bc722d 100644 --- a/src/app/list/list.component.ts +++ b/src/app/list/list.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, OnInit, OnChanges, SimpleChanges, Input } from '@angular/core'; import { ListService } from '../list.service' import { IPerson } from '../person' @@ -9,7 +9,7 @@ import { IAPIResponse } from '../api-response' templateUrl: './list.component.html', styleUrls: ['./list.component.styl'] }) -export class ListComponent implements OnInit { +export class ListComponent implements OnInit, OnChanges { public people: IPerson[]; private selected: IPerson; @@ -23,17 +23,24 @@ export class ListComponent implements OnInit { constructor(private listService: ListService) { } + ngOnChanges(changes: SimpleChanges): void { + if (changes.page) { + this.getList(); + } + } + ngOnInit(): void { - this.getList() + this.getList(); } private getList(): void { - this.listService.getList().subscribe( + const offset = this.perPage * this.page; + this.listService.getList(this.perPage, offset).subscribe( (data) => this.updateList(data)); } private updateList(data: IAPIResponse): void { - this.people = data.list + this.people = data.list; // this.pages = data.stats.total / this.perPage }