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

[enh] Recherche dans les annonces

parent c0ac3544
......@@ -21,7 +21,7 @@ router-outlet + * {
@media (min-width: 768px) {
#topbar {
margin-left: 270px;
padding-left: 270px;
}
.bar-button-menutoggle-md {
......
<ion-header id="topbar">
<ion-navbar>
<button ion-button menuToggle>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{ titre }}</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="enableSearchBar()" *ngIf="hasSearch">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-searchbar
*ngIf="searchEnabled"
[(ngModel)]="search"
(ionInput)="onInput($event)"
(ionCancel)="onCancel($event)"
debounce="750"
showCancelButton="true"
cancelButtonText="Annuler"
placeholder="Titre, vendeur, description, ..."
(blur)="onBlur()"
#searchbar>
</ion-searchbar>
<ng-container *ngIf="announces.length == 0">
<ng-container *ngIf="loading">
<ion-spinner></ion-spinner>
<ion-label>Chargement...</ion-label>
</ng-container>
<div class="pagination" *ngIf="announces.length == 0">
<span *ngIf="search && search.length > 2">Aucune annonce trouvée pour « {{ search }} ».</span>
<span *ngIf="search && search.length <= 2">Tapez au moins 3 caractères de recherche.</span>
<span *ngIf="!search"></span>
</div>
<div class="pagination" *ngIf="announces.length > 0">
<button ion-button small color="light" *ngIf="announces.length > 0" (click)="prevPage()" [disabled]="page == 1">
......@@ -19,9 +36,12 @@
<option value="{{ lim }}" *ngFor="let lim of limits">{{ lim }} annonces par page</option>
</select>
</div>
<ion-list-header *ngIf="announces.length > 0">
<ion-list-header *ngIf="announces.length > 0 && !search">
Dernières annonces
</ion-list-header>
<ion-list-header *ngIf="announces.length > 0 && search">
Résultats de la recherche
</ion-list-header>
<ion-list id="home-list" *ngIf="announces.length > 0">
<button ion-item class="ligne" *ngFor="let a of announces" routerLink="/announce/{{ a.uuid }}">
<ion-avatar item-left>
......
......@@ -46,6 +46,12 @@ home {
font-size: 12px;
}
ion-searchbar {
margin-bottom: 10px;
padding-left: 0 !important;
padding-right: 0 !important;
}
.pagination {
margin-bottom: 0.9em;
}
......
import {Component, OnInit} from "@angular/core";
import {Component, OnInit, ViewChild} from "@angular/core";
import {AnnounceService} from "../../services/announce-service";
import {CrowdfundingService} from "../../services/crowdfunding-service";
import {ActivatedRoute, Router} from "@angular/router";
......@@ -9,11 +9,17 @@ import {ActivatedRoute, Router} from "@angular/router";
})
export class HomePage implements OnInit {
@ViewChild('searchbar') searchbar;
limits:any = [10, 20, 50, 100]
limit:Number = 10
page:any = 1
pages:any = 1
titre:string = "Toutes les annonces"
search:string = undefined
loading:Boolean = false
hasSearch:Boolean = true
searchEnabled:Boolean = false
announces:Array<any>
constructor(
......@@ -27,35 +33,67 @@ export class HomePage implements OnInit {
this.route.queryParams.subscribe(params => {
this.page = parseInt(params['page']) || 1
this.limit = parseInt(params['limit']) || 10
this.search = params['search']
this.searchEnabled = params['search'] !== undefined
this.loadAnnounces()
});
}
loadAnnounces() {
this.announces = []
this.announceService.listAllAnnounces(this.limit, this.page).then(res => {
let search:any = this.search === undefined || this.search.length > 2
if (search) {
this.search = this.search || ""
this.loading = true
this.announceService.listAllAnnounces(this.limit, this.page, this.search).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
})
this.loading = false
// 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 }})
this.newSearch(this.pages, this.limit, this.search)
}
})
}
}
prevPage() {
this.router.navigate(['/'],{ queryParams: { page: this.page - 1, limit: this.limit }})
this.newSearch(this.page - 1, this.limit, this.search)
}
nextPage() {
this.router.navigate(['/'],{ queryParams: { page: this.page + 1, limit: this.limit }})
this.newSearch(this.page + 1, this.limit, this.search)
}
updatePage() {
this.router.navigate(['/'],{ queryParams: { page: this.page, limit: this.limit }})
this.newSearch(this.page, this.limit, this.search)
}
onInput() {
this.newSearch(this.page, this.limit, this.search)
}
onCancel() {
this.searchEnabled = false
this.newSearch(this.page, this.limit, this.search)
}
enableSearchBar() {
this.searchEnabled = true
setTimeout(() => {
this.searchbar.setFocus();
}, 1);
}
newSearch(page, limit, search) {
const queryParams:any = { page, limit }
if (this.searchEnabled) {
queryParams.search = search
}
this.router.navigate(['/'],{ queryParams })
}
}
......@@ -85,8 +85,8 @@ export class AnnounceService {
})
}
listAllAnnounces(limit, page) {
return this.http.get(ANNOUNCES_URL + '?limit=' + limit + '&page=' + page)
listAllAnnounces(limit, page, search) {
return this.http.get(ANNOUNCES_URL + '?limit=' + limit + '&page=' + page + '&search=' + encodeURIComponent(search))
.toPromise()
.then((res) => {
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