Commit c0ac3544 authored by Cédric Moreau's avatar Cédric Moreau

[enh] Pagination

parent d2b1d160
......@@ -5,6 +5,20 @@
<ion-label>Chargement...</ion-label>
</ng-container>
<div class="pagination" *ngIf="announces.length > 0">
<button ion-button small color="light" *ngIf="announces.length > 0" (click)="prevPage()" [disabled]="page == 1">
<ion-icon name="arrow-back"></ion-icon>
</button>
<ion-label>
Page {{ page }}/{{ pages }}
</ion-label>
<button ion-button small color="light" *ngIf="announces.length > 0" (click)="nextPage()" [disabled]="page == pages">
<ion-icon name="arrow-forward"></ion-icon>
</button>
<select [(ngModel)]="limit" (change)="updatePage()">
<option value="{{ lim }}" *ngFor="let lim of limits">{{ lim }} annonces par page</option>
</select>
</div>
<ion-list-header *ngIf="announces.length > 0">
Dernières annonces
</ion-list-header>
......
......@@ -45,4 +45,34 @@ home {
.range-col > span {
font-size: 12px;
}
.pagination {
margin-bottom: 0.9em;
}
.pagination ion-label {
display: inline;
position: relative;
top: 4px;
padding: 0 0.9em 0 0.9em;
height: 2.1em;
font-size: 1.3rem;
margin: 0.9em 0;
}
.pagination select {
float: right;
position: relative;
top: 4px;
padding: 0 0.9em;
height: 2.1em;
font-size: 1.3rem;
overflow: hidden;
margin-left: 0.2em;
border-radius: 2px;
font-weight: 500;
color: #000;
background-color: #f4f4f4;
box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 0px 0 rgba(0, 0, 0, 0.12);
}
}
import { Component } from '@angular/core';
import {Component, OnInit} from "@angular/core";
import {AnnounceService} from "../../services/announce-service";
import {CrowdfundingService} from "../../services/crowdfunding-service";
import {ActivatedRoute, Router} from "@angular/router";
@Component({
selector: 'home',
template: require('../../app/topbar.html') + require('./home.html')
})
export class HomePage {
export class HomePage implements OnInit {
limits:any = [10, 20, 50, 100]
limit:Number = 10
page:any = 1
pages:any = 1
titre:string = "Toutes les annonces"
announces:Array<any>
constructor(private announceService:AnnounceService, private crowdfundingService:CrowdfundingService) {
constructor(
private router: Router,
private route: ActivatedRoute,
private announceService:AnnounceService,
private crowdfundingService:CrowdfundingService) {
}
ngOnInit() {
this.route.queryParams.subscribe(params => {
this.page = parseInt(params['page']) || 1
this.limit = parseInt(params['limit']) || 10
this.loadAnnounces()
});
}
loadAnnounces() {
this.announces = []
this.announceService.listAllAnnounces().then(announces => this.announces = announces.map(a => {
a.descLigne = a.desc.replace(/\\n/g, ' ')
a.pctFunded = this.crowdfundingService.getFundingAmount(a)
return a
}))
this.announceService.listAllAnnounces(this.limit, this.page).then(res => {
this.pages = res.pages
this.announces = res.announces.map(a => {
a.descLigne = a.desc.replace(/\\n/g, ' ')
a.pctFunded = this.crowdfundingService.getFundingAmount(a)
return a
})
// Redirection éventuelle si la page est incorrecte relativement aux pages disponibles
if (this.page > this.pages) {
this.router.navigate(['/'],{ queryParams: { page: this.pages, limit: this.limit }})
}
})
}
prevPage() {
this.router.navigate(['/'],{ queryParams: { page: this.page - 1, limit: this.limit }})
}
nextPage() {
this.router.navigate(['/'],{ queryParams: { page: this.page + 1, limit: this.limit }})
}
updatePage() {
this.router.navigate(['/'],{ queryParams: { page: this.page, limit: this.limit }})
}
}
......@@ -85,11 +85,11 @@ export class AnnounceService {
})
}
listAllAnnounces() {
return this.http.get(ANNOUNCES_URL)
listAllAnnounces(limit, page) {
return this.http.get(ANNOUNCES_URL + '?limit=' + limit + '&page=' + page)
.toPromise()
.then((res) => {
return res.json().announces
return res.json()
})
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment