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 + * { ...@@ -21,7 +21,7 @@ router-outlet + * {
@media (min-width: 768px) { @media (min-width: 768px) {
#topbar { #topbar {
margin-left: 270px; padding-left: 270px;
} }
.bar-button-menutoggle-md { .bar-button-menutoggle-md {
......
<ion-header id="topbar"> <ion-header id="topbar">
<ion-navbar> <ion-navbar>
<button ion-button menuToggle> <button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-title>{{ titre }}</ion-title> <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-navbar>
</ion-header> </ion-header>
<ion-content padding> <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-spinner></ion-spinner>
<ion-label>Chargement...</ion-label> <ion-label>Chargement...</ion-label>
</ng-container> </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"> <div class="pagination" *ngIf="announces.length > 0">
<button ion-button small color="light" *ngIf="announces.length > 0" (click)="prevPage()" [disabled]="page == 1"> <button ion-button small color="light" *ngIf="announces.length > 0" (click)="prevPage()" [disabled]="page == 1">
...@@ -19,9 +36,12 @@ ...@@ -19,9 +36,12 @@
<option value="{{ lim }}" *ngFor="let lim of limits">{{ lim }} annonces par page</option> <option value="{{ lim }}" *ngFor="let lim of limits">{{ lim }} annonces par page</option>
</select> </select>
</div> </div>
<ion-list-header *ngIf="announces.length > 0"> <ion-list-header *ngIf="announces.length > 0 && !search">
Dernières annonces Dernières annonces
</ion-list-header> </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"> <ion-list id="home-list" *ngIf="announces.length > 0">
<button ion-item class="ligne" *ngFor="let a of announces" routerLink="/announce/{{ a.uuid }}"> <button ion-item class="ligne" *ngFor="let a of announces" routerLink="/announce/{{ a.uuid }}">
<ion-avatar item-left> <ion-avatar item-left>
......
...@@ -46,6 +46,12 @@ home { ...@@ -46,6 +46,12 @@ home {
font-size: 12px; font-size: 12px;
} }
ion-searchbar {
margin-bottom: 10px;
padding-left: 0 !important;
padding-right: 0 !important;
}
.pagination { .pagination {
margin-bottom: 0.9em; margin-bottom: 0.9em;
} }
......
import {Component, OnInit} from "@angular/core"; import {Component, OnInit, ViewChild} from "@angular/core";
import {AnnounceService} from "../../services/announce-service"; import {AnnounceService} from "../../services/announce-service";
import {CrowdfundingService} from "../../services/crowdfunding-service"; import {CrowdfundingService} from "../../services/crowdfunding-service";
import {ActivatedRoute, Router} from "@angular/router"; import {ActivatedRoute, Router} from "@angular/router";
...@@ -9,11 +9,17 @@ import {ActivatedRoute, Router} from "@angular/router"; ...@@ -9,11 +9,17 @@ import {ActivatedRoute, Router} from "@angular/router";
}) })
export class HomePage implements OnInit { export class HomePage implements OnInit {
@ViewChild('searchbar') searchbar;
limits:any = [10, 20, 50, 100] limits:any = [10, 20, 50, 100]
limit:Number = 10 limit:Number = 10
page:any = 1 page:any = 1
pages:any = 1 pages:any = 1
titre:string = "Toutes les annonces" titre:string = "Toutes les annonces"
search:string = undefined
loading:Boolean = false
hasSearch:Boolean = true
searchEnabled:Boolean = false
announces:Array<any> announces:Array<any>
constructor( constructor(
...@@ -27,35 +33,67 @@ export class HomePage implements OnInit { ...@@ -27,35 +33,67 @@ export class HomePage implements OnInit {
this.route.queryParams.subscribe(params => { this.route.queryParams.subscribe(params => {
this.page = parseInt(params['page']) || 1 this.page = parseInt(params['page']) || 1
this.limit = parseInt(params['limit']) || 10 this.limit = parseInt(params['limit']) || 10
this.search = params['search']
this.searchEnabled = params['search'] !== undefined
this.loadAnnounces() this.loadAnnounces()
}); });
} }
loadAnnounces() { loadAnnounces() {
this.announces = [] this.announces = []
this.announceService.listAllAnnounces(this.limit, this.page).then(res => { let search:any = this.search === undefined || this.search.length > 2
this.pages = res.pages if (search) {
this.announces = res.announces.map(a => { this.search = this.search || ""
a.descLigne = a.desc.replace(/\\n/g, ' ') this.loading = true
a.pctFunded = this.crowdfundingService.getFundingAmount(a) this.announceService.listAllAnnounces(this.limit, this.page, this.search).then(res => {
return a 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.newSearch(this.pages, this.limit, this.search)
}
}) })
// 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() { prevPage() {
this.router.navigate(['/'],{ queryParams: { page: this.page - 1, limit: this.limit }}) this.newSearch(this.page - 1, this.limit, this.search)
} }
nextPage() { nextPage() {
this.router.navigate(['/'],{ queryParams: { page: this.page + 1, limit: this.limit }}) this.newSearch(this.page + 1, this.limit, this.search)
} }
updatePage() { 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 { ...@@ -85,8 +85,8 @@ export class AnnounceService {
}) })
} }
listAllAnnounces(limit, page) { listAllAnnounces(limit, page, search) {
return this.http.get(ANNOUNCES_URL + '?limit=' + limit + '&page=' + page) return this.http.get(ANNOUNCES_URL + '?limit=' + limit + '&page=' + page + '&search=' + encodeURIComponent(search))
.toPromise() .toPromise()
.then((res) => { .then((res) => {
return res.json() 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