simple paginator works
This commit is contained in:
parent
ba3ec9b06a
commit
c3f0ffe190
@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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) }});
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user