diff --git a/db.json b/db.json index 6a14c61..2f3affb 100644 --- a/db.json +++ b/db.json @@ -6051,3 +6051,4 @@ ], "users" : [] } + diff --git a/package-lock.json b/package-lock.json index cdce84c..d0aa4b4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7185,6 +7185,7 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/is-typedarray": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", @@ -7484,6 +7485,7 @@ "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", "dev": true }, + "node_modules/json-server": { "version": "0.17.0", "resolved": "https://registry.npmjs.org/json-server/-/json-server-0.17.0.tgz", diff --git a/src/app/components/avis-bar/avis-bar.component.ts b/src/app/components/avis-bar/avis-bar.component.ts index 17364be..b0ca984 100644 --- a/src/app/components/avis-bar/avis-bar.component.ts +++ b/src/app/components/avis-bar/avis-bar.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, EventEmitter, OnInit, Output } from '@angular/core'; @Component({ selector: 'app-avis-bar', @@ -7,6 +7,8 @@ import { Component, OnInit } from '@angular/core'; }) export class AvisBarComponent implements OnInit { starStates: {stateSelectedUser : boolean, stateHoverUser : boolean}[]; + @Output() stateNumber = new EventEmitter + starStateNumber: number = 0; constructor() { this.starStates = []; @@ -50,13 +52,17 @@ export class AvisBarComponent implements OnInit { } onClickStar(starIndex: number) { + this.starStateNumber = 0; for (let i = 0; i < this.starStates.length ; i++) { if(i <= starIndex) { this.starStates[i].stateSelectedUser = true; + this.starStateNumber++; } else { this.starStates[i].stateSelectedUser = false; } } + //console.log(`Rating : ${this.starStateNumber}`); + this.stateNumber.emit(this.starStateNumber); } } diff --git a/src/app/components/filter-side-bar/filter-side-bar.component.html b/src/app/components/filter-side-bar/filter-side-bar.component.html index b0bf547..2944f0c 100644 --- a/src/app/components/filter-side-bar/filter-side-bar.component.html +++ b/src/app/components/filter-side-bar/filter-side-bar.component.html @@ -7,38 +7,38 @@

Catégories

- + - -
-
- Aucune catégorie disponible -
- - - + - +
+ +
+ + + diff --git a/src/app/components/filter-side-bar/filter-side-bar.component.ts b/src/app/components/filter-side-bar/filter-side-bar.component.ts index 6092628..a2cfb1c 100644 --- a/src/app/components/filter-side-bar/filter-side-bar.component.ts +++ b/src/app/components/filter-side-bar/filter-side-bar.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-filter-side-bar', @@ -7,16 +7,40 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; }) export class FilterSideBarComponent implements OnInit { @Input() listCategories: string[]; + @Output() checkCategory = new EventEmitter(); @Output() stateNumber = new EventEmitter(); + @Output() rangeNumber = new EventEmitter(); filterStateNumber: number = 0; + public selectedCategory: string[]; + constructor() { this.listCategories = []; + this.selectedCategory = []; } ngOnInit(): void { } + onCheckCategory(category: string, event: any) { + console.log(event) + + + if (event.target.checked == true) { + //console.log("true") + this.selectedCategory.push(category); + + + } + if (event.target.checked == false) { + //console.log("false") + this.selectedCategory = this.selectedCategory.filter(product => product !== category); + } + + this.checkCategory.emit(this.selectedCategory); + //console.log("romain" , this.selectedCategory) + } + onStateNumberChange(stateNumber: number): void { this.filterStateNumber = stateNumber; } @@ -25,4 +49,9 @@ export class FilterSideBarComponent implements OnInit { this.stateNumber.emit(this.filterStateNumber); } + onSendValues(minNum: any, maxNum: any): void { + let rangeArray: number[] = [parseFloat(minNum.value), parseFloat(maxNum.value)]; + console.log(typeof(rangeArray[0])); + this.rangeNumber.emit(rangeArray); + } } diff --git a/src/app/pages/page-accueil/page-accueil.component.html b/src/app/pages/page-accueil/page-accueil.component.html index 3314d37..81ad943 100644 --- a/src/app/pages/page-accueil/page-accueil.component.html +++ b/src/app/pages/page-accueil/page-accueil.component.html @@ -1,10 +1,11 @@
- - -
- - + +
+
Trier par : diff --git a/src/app/pages/page-accueil/page-accueil.component.ts b/src/app/pages/page-accueil/page-accueil.component.ts index 799741c..df31350 100644 --- a/src/app/pages/page-accueil/page-accueil.component.ts +++ b/src/app/pages/page-accueil/page-accueil.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { PlantouneService } from 'src/app/services/plantoune.service'; import * as _ from 'underscore'; +import { contains, includes } from 'underscore'; @@ -15,8 +16,18 @@ export class PageAccueilComponent implements OnInit { public listPricePlant : any[]; public clickCounter : any; public listDataGlobal : any[]; - + public listDataFilter: any[]; public listCategoriesFilter: string[]; + public dataFilterCategory : any; + + + public rangeNumber: number[]; + public stateNumber: number; + + public isPricingFilterActive: boolean; + public isRatingFilterActive: boolean; + + public clickCounter : any; constructor(private plantouneService: PlantouneService) { this.listData = []; @@ -24,7 +35,15 @@ export class PageAccueilComponent implements OnInit { this.listPricePlant = []; this.listDataGlobal = []; this.clickCounter = 0; + this.listDataFilter = []; + this.rangeNumber = []; + this.stateNumber = 0; + + this.isPricingFilterActive = false; + this.isRatingFilterActive = false; + + this.clickCounter = 0; } /** @@ -33,8 +52,7 @@ export class PageAccueilComponent implements OnInit { * plantouneService; * * constructor(plantouneService: PlantouneService) { - * this.plantouneService = plantouneService; - * } + * this.plantouneService = plantouneService; } */ ngOnInit(): void { @@ -42,7 +60,10 @@ export class PageAccueilComponent implements OnInit { this.plantouneService.getData().subscribe( (listPlant: any[]) => { console.log(listPlant); - + this.listDataGlobal = [...listPlant]; + this.listDataFilter = [...this.listDataGlobal]; + console.log(this.listDataGlobal); + /** * Technique avec Underscore JS pour recupérer les catégories uniques de nos plantes */ @@ -62,12 +83,11 @@ export class PageAccueilComponent implements OnInit { console.log(listUniqJsCategories); this.listCategoriesFilter = listUniqJsCategories; - this.listData = listPlant; + this.listData = [...listPlant]; this.listData.length = 9; - // console.log(this.listData); - this.listDataGlobal = [...listPlant] - console.log("coucou" + this.listDataGlobal); + + console.log(this.listData); } ) } @@ -76,8 +96,7 @@ export class PageAccueilComponent implements OnInit { this.plantouneService.plantLiked$.next(''); } - //Tri des prix des plantes par ordre croissant ou décroissant -onPriceTri() : void { +onRecherchePlante(choix: any) { this.clickCounter ++ console.log(this.clickCounter) @@ -86,26 +105,130 @@ console.log(this.clickCounter) }else{ this.listData.sort((a, b) => parseFloat(b.product_price) - parseFloat(a.product_price)); } + const search = choix.target.value + console.log(search); + this.listData = this.listDataGlobal.filter((plant) => { + if(plant.product_name.toLowerCase().includes(search.toLowerCase())){ + return plant; + } + }); + //Equivaut à la ligne ci-dessous (version abrégée) + //this.listData = this.listDataGlobal.filter((plant) => plant.product_name.toLowerCase().includes(search.toLowerCase())) + console.log(this.listData); + if (this.listData.length >= 9) {this.listData.length=9} } - //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) + onListCategory(categoryArray: string[]) { + // this.listData=listData; + //console.log(typeof(valueText)); + + if(categoryArray.length == 0) { + this.listData = [...this.listDataGlobal]; + + } else if(categoryArray.length > 0) { + let listProductsByCategory:string[] = []; + this.listDataGlobal.forEach(product => { + + categoryArray.forEach(categorySelected => { + if (product.product_breadcrumb_label == categorySelected){ + listProductsByCategory.push(product); + } + }); + }); + this.listData= [...listProductsByCategory]; + } + + if(this.listData.length>=9){ + this.listData.length=9; } } -//Tri des avis des plantes par ordre croissant ou décroissant -onRatingTri() : void{ + onRatingFilter(stateNumber: number): void { + this.stateNumber = stateNumber; + this.isRatingFilterActive = true; + + this.onApplyFilters(); + } + + onPriceFilter(rangeNumber: number[]) { + this.rangeNumber = [...rangeNumber]; + this.isPricingFilterActive = true; + + this.onApplyFilters(); + } + + onApplyFilters(): void { + this.clickCounter = 0; + + if(this.isPricingFilterActive) { + let listDataFinal: any = []; + this.listDataGlobal.forEach(product => { + if(parseFloat(product.product_unitprice_ati) >= this.rangeNumber[0] && parseFloat(product.product_unitprice_ati) <= this.rangeNumber[1]) { + listDataFinal.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); + } + + if(this.listData.length >= 9) this.listData.length = 9; + } + + //Tri des prix des plantes par ordre croissant ou décroissant +onPriceTri() : 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) + console.log(this.clickCounter) + if (this.clickCounter %2) { + this.listData.sort((a, b) => parseFloat(a.product_price) - parseFloat(b.product_price)); + }else{ + this.listData.sort((a, b) => parseFloat(b.product_price) - parseFloat(a.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) + } + } } +