From c3f0ffe19055001b29b30549b088b6a1582446ef Mon Sep 17 00:00:00 2001
From: Evert Prants <imsonotsleepy@gmail.com>
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 }}
+
+<a (click)="navigate(page - 1)"><</a>
+<a *ngFor="let npage of pageNums" (click)="navigate(npage)" [ngClass]="{ 'active': page == npage }">
+  {{npage}}
+</a>
+<a (click)="navigate(page + 1)">></a>
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<IAPIResponse> {
-    const url = `${this.listUrl}?offset=${offset}&limit=${limit}`
-    return this.http.get<IAPIResponse>(url)
+    const url = `${this.listUrl}?offset=${offset}&limit=${limit}`;
+    return this.http.get<IAPIResponse>(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
   }