simple paginator works

This commit is contained in:
Evert Prants 2020-11-07 15:14:39 +02:00
parent ba3ec9b06a
commit c3f0ffe190
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
5 changed files with 33 additions and 15 deletions

View File

@ -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);
});
}
}

View File

@ -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>

View File

@ -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) }});
}
}

View File

@ -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);
}
}

View File

@ -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
}