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 { ngOnInit(): void {
this.route.queryParams this.route.queryParams
.subscribe((params) => { .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({ @Component({
selector: 'app-list-paginate', selector: 'app-list-paginate',
templateUrl: './list-paginate.component.html', templateUrl: './list-paginate.component.html',
styleUrls: ['./list-paginate.component.styl'] styleUrls: ['./list-paginate.component.styl']
}) })
export class ListPaginateComponent implements OnInit { export class ListPaginateComponent {
@Input() @Input()
page: number; page: number;
@Input() @Input()
pages: number; 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' providedIn: 'root'
}) })
export class ListService { export class ListService {
private listUrl = 'http://midaiganes.irw.ee/api/list' private listUrl = 'http://midaiganes.irw.ee/api/list';
constructor(private http: HttpClient) { } constructor(private http: HttpClient) { }
public getList(limit: number = 10, offset: number = 0): Observable<IAPIResponse> { public getList(limit: number = 10, offset: number = 0): Observable<IAPIResponse> {
const url = `${this.listUrl}?offset=${offset}&limit=${limit}` const url = `${this.listUrl}?offset=${offset}&limit=${limit}`;
return this.http.get<IAPIResponse>(url) 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 { ListService } from '../list.service'
import { IPerson } from '../person' import { IPerson } from '../person'
@ -9,7 +9,7 @@ import { IAPIResponse } from '../api-response'
templateUrl: './list.component.html', templateUrl: './list.component.html',
styleUrls: ['./list.component.styl'] styleUrls: ['./list.component.styl']
}) })
export class ListComponent implements OnInit { export class ListComponent implements OnInit, OnChanges {
public people: IPerson[]; public people: IPerson[];
private selected: IPerson; private selected: IPerson;
@ -23,17 +23,24 @@ export class ListComponent implements OnInit {
constructor(private listService: ListService) { } constructor(private listService: ListService) { }
ngOnChanges(changes: SimpleChanges): void {
if (changes.page) {
this.getList();
}
}
ngOnInit(): void { ngOnInit(): void {
this.getList() this.getList();
} }
private getList(): void { private getList(): void {
this.listService.getList().subscribe( const offset = this.perPage * this.page;
this.listService.getList(this.perPage, offset).subscribe(
(data) => this.updateList(data)); (data) => this.updateList(data));
} }
private updateList(data: IAPIResponse): void { private updateList(data: IAPIResponse): void {
this.people = data.list this.people = data.list;
// this.pages = data.stats.total / this.perPage // this.pages = data.stats.total / this.perPage
} }