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
}
]
}
}

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="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 }}

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]));
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">
<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">
<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" (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="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="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>

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 * as _ from 'underscore';
@Component({
selector: 'app-page-accueil',
templateUrl: './page-accueil.component.html',
@ -13,21 +16,30 @@ export class PageAccueilComponent implements OnInit {
public listDataFilter: any[];
public listCategoriesFilter: string[];
public indexFilter: number;
public rangeNumber: number[];
public stateNumber: number;
public isPricingFilterActive: boolean;
public isRatingFilterActive: boolean;
constructor(private plantouneService: PlantouneService) {
this.listData = [];
this.listDataGlobal = [];
this.listDataFilter = [];
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;
*
*
* constructor(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
*/
const listAllCategories = listPlant.map(product => product.product_breadcrumb_label);
console.log(listAllCategories);
const listUniqCategories = _.uniq(listAllCategories)
console.log(listUniqCategories);
// console.log(listAllCategories);
const listUniqCategories = _.uniq(listAllCategories)
// console.log(listUniqCategories);
/**
* 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.listData = listPlant;
this.listData.length = 9;
console.log(this.listData);
}
)
@ -74,57 +88,54 @@ export class PageAccueilComponent implements OnInit {
}
onRatingFilter(stateNumber: number): void {
let listRate: any[] = [];
if(this.indexFilter == 0) {
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.stateNumber = stateNumber;
this.isRatingFilterActive = true;
this.onApplyFilters(listRate);
this.onApplyFilters();
}
onPriceFilter(rangeNumber: number[]) {
console.log(rangeNumber);
let listRangedProduct: any[] = [];
if(this.indexFilter == 0) {
this.indexFilter++;
this.rangeNumber = [...rangeNumber];
this.isPricingFilterActive = true;
this.onApplyFilters();
}
onApplyFilters(): void {
if(this.isPricingFilterActive) {
let listDataFinal: any = [];
this.listDataGlobal.forEach(product => {
if(parseFloat(product.product_unitprice_ati) >= rangeNumber[0] && parseFloat(product.product_unitprice_ati) <= rangeNumber[1]) {
listRangedProduct.push(product);
if(parseFloat(product.product_unitprice_ati) >= this.rangeNumber[0] && parseFloat(product.product_unitprice_ati) <= this.rangeNumber[1]) {
listDataFinal.push(product);
}
});
} else {
this.listData.forEach(product => {
if(parseFloat(product.product_unitprice_ati) >= rangeNumber[0] && parseFloat(product.product_unitprice_ati) <= rangeNumber[1]) {
listRangedProduct.push(product);
this.listData = [...listDataFinal];
}
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;
}
}