isa44.74/brief-la-belle-plante2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'Julian' of https://github.com/Julian30520/brief-la-belle-plante into Julian

Browse source
This commit is contained in:
Julian30520 2022-01-17 15:47:56 +01:00
commit 768c489792
5 changed files with 90 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
db.json
View file

@ -6061,4 +6061,4 @@
"id": 2 "id": 2
} }
] ]
} }

16
src/app/components/filter-side-bar/filter-side-bar.component.html
View file

@ -1,13 +1,13 @@
<div class="custom-side-bar flex-shrink-0 bg-white border-end"> <div class="custom-side-bar flex-shrink-0 bg-white border-end">
<div class="p-3"> <div class="p-3">
<span class="fs-5 fw-semibold">Filtres</span> <span class="fs-5 fw-semibold">Filtres</span>
</div> </div>
<ul class="list-unstyled ps-0 border-top"> <ul class="list-unstyled ps-0 border-top">
<div class="p-3"> <div class="p-3">
<p class="mb-1 fs-5 fw-semibold">Catégories</p> <p class="mb-1 fs-5 fw-semibold">Catégories</p>
<div *ngFor="let category of listCategories; let indexCat = index" class="form-check"> <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}}"> <label class="form-check-label" for="checkBoxCategory{{indexCat}}">
{{ category }} {{ category }}

1
src/app/components/filter-side-bar/filter-side-bar.component.ts
View file

@ -31,5 +31,4 @@ export class FilterSideBarComponent implements OnInit {
console.log(typeof(rangeArray[0])); console.log(typeof(rangeArray[0]));
this.rangeNumber.emit(rangeArray); this.rangeNumber.emit(rangeArray);
} }
} }

39
src/app/pages/page-accueil/page-accueil.component.html
View file

@ -1,26 +1,25 @@
<div class="d-flex align-items-stretch"> <div class="d-flex align-items-stretch">
<app-filter-side-bar [listCategories]="listCategoriesFilter" (stateNumber)="onRatingFilter($event)" (rangeNumber)="onPriceFilter($event)"></app-filter-side-bar> <app-filter-side-bar [listCategories]="listCategoriesFilter" (stateNumber)="onRatingFilter($event)" (rangeNumber)="onPriceFilter($event)"></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"> <div class="py-3">
<input class="form-control" Trier par :
type="text" <button class="btn btn-outline-success btn-sm me-2" (click)="onPriceTri()">Prix</button>
placeholder="Recherche ta belle plante" <button class="btn btn-outline-success btn-sm me-2"(click)="onAlphaTri()">Ordre Alpha</button>
aria-label="Input Recherche ta belle plante"> <button class="btn btn-outline-success btn-sm me-2" (click)="onRatingTri()">Avis</button>
</div>
<div class="py-3"> <div class="row">
Trier par : <div class="col" *ngFor="let product of listData">
<button class="btn btn-outline-success btn-sm me-2">Prix</button> <app-card-plante [plant]="product"
<button class="btn btn-outline-success btn-sm me-2">Ordre Alpha</button> (clickLike)="onEventLike()">
<button class="btn btn-outline-success btn-sm me-2">Avis</button> </app-card-plante>
</div> </div>
</div>
<div class="row"> </div>
<div class="col" *ngFor="let product of listData">
<app-card-plante [plant]="product"
(clickLike)="onEventLike()">
</app-card-plante>
</div>
</div>
</div>
</div> </div>

113
src/app/pages/page-accueil/page-accueil.component.ts
View file

@ -2,6 +2,9 @@ import { Component, OnInit } from '@angular/core';
import { PlantouneService } from 'src/app/services/plantoune.service'; import { PlantouneService } from 'src/app/services/plantoune.service';
import * as _ from 'underscore'; import * as _ from 'underscore';
@Component({ @Component({
selector: 'app-page-accueil', selector: 'app-page-accueil',
templateUrl: './page-accueil.component.html', templateUrl: './page-accueil.component.html',
@ -13,21 +16,30 @@ export class PageAccueilComponent implements OnInit {
public listDataFilter: any[]; public listDataFilter: any[];
public listCategoriesFilter: string[]; public listCategoriesFilter: string[];
public indexFilter: number; public rangeNumber: number[];
public stateNumber: number;
public isPricingFilterActive: boolean;
public isRatingFilterActive: boolean;
constructor(private plantouneService: PlantouneService) { constructor(private plantouneService: PlantouneService) {
this.listData = []; this.listData = [];
this.listDataGlobal = []; this.listDataGlobal = [];
this.listDataFilter = []; this.listDataFilter = [];
this.listCategoriesFilter = []; this.listCategoriesFilter = [];
this.indexFilter = 0;
this.rangeNumber = [];
this.stateNumber = 0;
this.isPricingFilterActive = false;
this.isRatingFilterActive = false;
} }
/** /**
* equivalent de la ligne du dessus * equivalent de la ligne du dessus
* *
* plantouneService; * plantouneService;
* *
* constructor(plantouneService: PlantouneService) { * constructor(plantouneService: PlantouneService) {
* this.plantouneService = plantouneService; * this.plantouneService = plantouneService;
* } * }
@ -48,11 +60,12 @@ export class PageAccueilComponent implements OnInit {
* Technique avec Underscore JS pour recupérer les catégories uniques de nos plantes * Technique avec Underscore JS pour recupérer les catégories uniques de nos plantes
*/ */
const listAllCategories = listPlant.map(product => product.product_breadcrumb_label); const listAllCategories = listPlant.map(product => product.product_breadcrumb_label);
console.log(listAllCategories); // console.log(listAllCategories);
const listUniqCategories = _.uniq(listAllCategories) const listUniqCategories = _.uniq(listAllCategories)
console.log(listUniqCategories); // console.log(listUniqCategories);
/** /**
* Technique native JS pour recupérer les catégories uniques de nos plantes * Technique native JS pour recupérer les catégories uniques de nos plantes
@ -64,6 +77,7 @@ export class PageAccueilComponent implements OnInit {
this.listCategoriesFilter = listUniqJsCategories; this.listCategoriesFilter = listUniqJsCategories;
this.listData = listPlant; this.listData = listPlant;
this.listData.length = 9; this.listData.length = 9;
console.log(this.listData); console.log(this.listData);
} }
) )
@ -74,57 +88,54 @@ export class PageAccueilComponent implements OnInit {
} }
onRatingFilter(stateNumber: number): void { onRatingFilter(stateNumber: number): void {
let listRate: any[] = []; this.stateNumber = stateNumber;
if(this.indexFilter == 0) { this.isRatingFilterActive = true;
this.indexFilter++;
this.listDataGlobal.forEach(product => {
if(product.product_rating >= stateNumber) {
listRate.push(product);
}
});
} else {
this.listData.forEach(product => {
if(product.product_rating >= stateNumber) {
listRate.push(product);
}
});
}
this.onApplyFilters(listRate); this.onApplyFilters();
} }
onPriceFilter(rangeNumber: number[]) { onPriceFilter(rangeNumber: number[]) {
console.log(rangeNumber); this.rangeNumber = [...rangeNumber];
let listRangedProduct: any[] = []; this.isPricingFilterActive = true;
if(this.indexFilter == 0) {
this.indexFilter++; this.onApplyFilters();
}
onApplyFilters(): void {
if(this.isPricingFilterActive) {
let listDataFinal: any = [];
this.listDataGlobal.forEach(product => { this.listDataGlobal.forEach(product => {
if(parseFloat(product.product_unitprice_ati) >= rangeNumber[0] && parseFloat(product.product_unitprice_ati) <= rangeNumber[1]) { if(parseFloat(product.product_unitprice_ati) >= this.rangeNumber[0] && parseFloat(product.product_unitprice_ati) <= this.rangeNumber[1]) {
listRangedProduct.push(product); listDataFinal.push(product);
} }
}); });
} else { this.listData = [...listDataFinal];
this.listData.forEach(product => { }
if(parseFloat(product.product_unitprice_ati) >= rangeNumber[0] && parseFloat(product.product_unitprice_ati) <= rangeNumber[1]) {
listRangedProduct.push(product); if(this.isRatingFilterActive) {
let listDataFinal: any = [];
this.listDataGlobal.forEach(product => {
if(product.product_rating >= this.stateNumber) {
listDataFinal.push(product);
} }
}); });
this.listData = [...listDataFinal];
}
if(this.isPricingFilterActive && this.isRatingFilterActive) {
let listDataFinal: any = [];
this.listDataGlobal.forEach(product => {
if(parseFloat(product.product_unitprice_ati) >= this.rangeNumber[0]
&& parseFloat(product.product_unitprice_ati) <= this.rangeNumber[1]
&& product.product_rating >= this.stateNumber) {
listDataFinal.push(product);
}
});
this.listData = [...listDataFinal];
console.log(this.listData);
} }
this.onApplyFilters(listRangedProduct); if(this.listData.length >= 9) this.listData.length = 9;
} }
onApplyFilters(DataFilter: any[]): void {
/*if(this.indexFilter == 0) {
this.listData = [...DataFilter];
this.indexFilter++;
} else {
this.listDataFilter = [...this.listData];
}*/
this.listData = [...DataFilter];
//if(this.listData.length >= 9) this.listData.length = 9;
}
} }