Add fonction Tri
This commit is contained in:
Romain
parent
cf65a3a258
commit
4b18ed8b44
|
|
@ -1,44 +1,44 @@
|
|||
<div class="custom-side-bar flex-shrink-0 bg-white border-end">
|
||||
<div class="p-3">
|
||||
<span class="fs-5 fw-semibold">Filtres</span>
|
||||
</div>
|
||||
<ul class="list-unstyled ps-0 border-top">
|
||||
<div class="p-3">
|
||||
<p class="mb-1 fs-5 fw-semibold">Catégories</p>
|
||||
<div *ngFor="let category of listCategories; let indexCat = index" class="form-check">
|
||||
<div class="p-3">
|
||||
<span class="fs-5 fw-semibold">Filtres</span>
|
||||
</div>
|
||||
<ul class="list-unstyled ps-0 border-top">
|
||||
<div class="p-3">
|
||||
<p class="mb-1 fs-5 fw-semibold">Catégories</p>
|
||||
<div *ngFor="let category of listCategories; let indexCat = index" class="form-check">
|
||||
|
||||
<input class="form-check-input" type="checkbox" value="testcategory" id="checkBoxCategory{{indexCat}}">
|
||||
<input class="form-check-input" type="checkbox" value="testcategory" id="checkBoxCategory{{indexCat}}">
|
||||
|
||||
<label class="form-check-label" for="checkBoxCategory{{indexCat}}">
|
||||
{{ category }}
|
||||
</label>
|
||||
</div>
|
||||
<div *ngIf="listCategories.length == 0 ">S
|
||||
Aucune catégorie disponible
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
<ul class="list-unstyled ps-0 border-top">
|
||||
<div class="p-3">
|
||||
<p class="mb-1 fs-5 fw-semibold">Prix</p>
|
||||
<div class="d-flex justify-content-center">
|
||||
<input id="number" type="number" placeholder="min" min=0 value="" class="me-2" style="width: 45%;">
|
||||
<input id="number" type="number" placeholder="max" value="" class="me-2" style="width: 45%;">
|
||||
</div>
|
||||
<label class="form-check-label" for="checkBoxCategory{{indexCat}}">
|
||||
{{ category }}
|
||||
</label>
|
||||
</div>
|
||||
<div *ngIf="listCategories.length == 0 ">
|
||||
Aucune catégorie disponible
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
<ul class="list-unstyled ps-0 border-top">
|
||||
<div class="p-3">
|
||||
<p class="mb-1 fs-5 fw-semibold">Prix</p>
|
||||
<div class="d-flex justify-content-center">
|
||||
<input id="number" type="number" placeholder="min" min=0 value="" class="me-2" style="width: 45%;">
|
||||
<input id="number" type="number" placeholder="max" value="" class="me-2" style="width: 45%;">
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="#" class="btn btn-success m-3">Valider</a>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
<ul class="list-unstyled ps-0 border-top">
|
||||
<div class="p-3">
|
||||
<p class="mb-1 fs-5 fw-semibold">Avis</p>
|
||||
|
||||
<div class="flex-column justify-content-start">
|
||||
<app-avis-bar></app-avis-bar>
|
||||
<a href="#" class="btn btn-success me-2">Valider</a>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="#" class="btn btn-success m-3">Valider</a>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
<ul class="list-unstyled ps-0 border-top">
|
||||
<div class="p-3">
|
||||
<p class="mb-1 fs-5 fw-semibold">Avis</p>
|
||||
|
||||
<div class="flex-column justify-content-start">
|
||||
<app-avis-bar (stateNumber)="onStateNumberChange"></app-avis-bar>
|
||||
<button class="btn btn-success me-2" (click)="onSendRating()">Valider</button>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-filter-side-bar',
|
||||
|
|
@ -7,12 +7,22 @@ import { Component, Input, OnInit } from '@angular/core';
|
|||
})
|
||||
export class FilterSideBarComponent implements OnInit {
|
||||
@Input() listCategories: string[];
|
||||
|
||||
constructor() {
|
||||
@Output() stateNumber = new EventEmitter();
|
||||
filterStateNumber: number = 0;
|
||||
|
||||
constructor() {
|
||||
this.listCategories = [];
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
onStateNumberChange(stateNumber: number): void {
|
||||
this.filterStateNumber = stateNumber;
|
||||
}
|
||||
|
||||
onSendRating():void {
|
||||
this.stateNumber.emit(this.filterStateNumber);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
<div class="d-flex align-items-stretch">
|
||||
<app-filter-side-bar [listCategories]="listCategoriesFilter" (stateNumber)=onRatingFilter($event)></app-filter-side-bar>
|
||||
<app-filter-side-bar [listCategories]="listCategoriesFilter"></app-filter-side-bar>
|
||||
|
||||
<div class="custom-main container p-3">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
placeholder="Recherche ta belle plante"
|
||||
aria-label="Input Recherche ta belle plante">
|
||||
<div class="custom-main container p-3">
|
||||
<input class="form-control"
|
||||
type="text"
|
||||
placeholder="Recherche ta belle plante"
|
||||
aria-label="Input Recherche ta belle plante">
|
||||
|
||||
<div class="py-3">
|
||||
Trier par :
|
||||
<button class="btn btn-outline-success btn-sm me-2">Prix</button>
|
||||
<button class="btn btn-outline-success btn-sm me-2">Ordre Alpha</button>
|
||||
<button class="btn btn-outline-success btn-sm me-2">Avis</button>
|
||||
</div>
|
||||
<div class="py-3">
|
||||
Trier par :
|
||||
<button class="btn btn-outline-success btn-sm me-2" (click)="onPriceTri()">Prix</button>
|
||||
<button class="btn btn-outline-success btn-sm me-2"(click)="onAlphaTri()">Ordre Alpha</button>
|
||||
<button class="btn btn-outline-success btn-sm me-2" (click)="onRatingTri()">Avis</button>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col" *ngFor="let product of listData">
|
||||
<app-card-plante [plant]="product"
|
||||
(clickLike)="onEventLike()">
|
||||
</app-card-plante>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" *ngFor="let product of listData">
|
||||
<app-card-plante [plant]="product"
|
||||
(clickLike)="onEventLike()">
|
||||
</app-card-plante>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@ import { Component, OnInit } from '@angular/core';
|
|||
import { PlantouneService } from 'src/app/services/plantoune.service';
|
||||
import * as _ from 'underscore';
|
||||
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-accueil',
|
||||
templateUrl: './page-accueil.component.html',
|
||||
|
|
@ -10,12 +13,18 @@ import * as _ from 'underscore';
|
|||
export class PageAccueilComponent implements OnInit {
|
||||
public listData: any[];
|
||||
public listRate: any[];
|
||||
public listPricePlant : any[];
|
||||
public clickCounter : any;
|
||||
|
||||
public listCategoriesFilter: string[];
|
||||
|
||||
constructor(private plantouneService: PlantouneService) {
|
||||
this.listData = [];
|
||||
this.listRate = [];
|
||||
this.listCategoriesFilter = [];
|
||||
this.listPricePlant = [];
|
||||
this.clickCounter = 0;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -40,10 +49,11 @@ export class PageAccueilComponent implements OnInit {
|
|||
* Technique avec Underscore JS pour recupérer les catégories uniques de nos plantes
|
||||
*/
|
||||
const listAllCategories = listPlant.map(product => product.product_breadcrumb_label);
|
||||
console.log(listAllCategories);
|
||||
// console.log(listAllCategories);
|
||||
|
||||
const listUniqCategories = _.uniq(listAllCategories)
|
||||
console.log(listUniqCategories);
|
||||
// console.log(listUniqCategories);
|
||||
|
||||
|
||||
|
||||
/**
|
||||
|
|
@ -56,7 +66,7 @@ export class PageAccueilComponent implements OnInit {
|
|||
this.listCategoriesFilter = listUniqJsCategories;
|
||||
this.listData = listPlant;
|
||||
this.listData.length = 9;
|
||||
console.log(this.listData);
|
||||
// console.log(this.listData);
|
||||
}
|
||||
)
|
||||
}
|
||||
|
|
@ -65,15 +75,36 @@ export class PageAccueilComponent implements OnInit {
|
|||
this.plantouneService.plantLiked$.next('')
|
||||
}
|
||||
|
||||
onRatingFilter(stateNumber: number): void {
|
||||
console.log(stateNumber);
|
||||
this.listData.forEach(product => {
|
||||
if(product.product_rating >= stateNumber) {
|
||||
this.listRate.push(product);
|
||||
}
|
||||
});
|
||||
this.listData = this.listRate;
|
||||
console.log(this.listData);
|
||||
//Tri des prix des plantes par ordre croissant ou décroissant
|
||||
onPriceTri() : void {
|
||||
|
||||
this.clickCounter ++
|
||||
console.log(this.clickCounter)
|
||||
if (this.clickCounter %2) {
|
||||
this.listData.sort((a, b) => parseFloat(b.product_price) - parseFloat(a.product_price));
|
||||
}else{
|
||||
this.listData.sort((a, b) => parseFloat(a.product_price) - parseFloat(b.product_price));
|
||||
}
|
||||
}
|
||||
|
||||
//Tri des noms des plantes par ordre alphanumérique
|
||||
onAlphaTri() : void {
|
||||
|
||||
this.clickCounter ++
|
||||
if (this.clickCounter %2) {
|
||||
this.listData.sort((a, b) => (a.product_name > b.product_name) ? 1 : -1)
|
||||
}else{
|
||||
this.listData.sort((a, b) => (b.product_name > a.product_name) ? 1 : -1)
|
||||
}
|
||||
}
|
||||
|
||||
//Tri des avis des plantes par ordre croissant ou décroissant
|
||||
onRatingTri() : void{
|
||||
this.clickCounter ++
|
||||
if (this.clickCounter %2) {
|
||||
this.listData.sort((a, b) => (a.product_rating > b.product_rating) ? 1 : -1)
|
||||
}else{
|
||||
this.listData.sort((a, b) => (b.product_rating > a.product_rating) ? 1 : -1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue