Merge branch 'dev' into romain

db.json

@@ -6051,3 +6051,4 @@
   ],
   "users" : []
 }
+

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",

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);
   }
 
 }

src/app/components/filter-side-bar/filter-side-bar.component.html

@@ -7,7 +7,7 @@
           <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}}" (click)="onCheckCategory(category,$event)">
 
                 <label class="form-check-label" for="checkBoxCategory{{indexCat}}">
                     {{ category }}
@@ -22,12 +22,12 @@
         <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 #minNum id="numberMin" 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%;">
+                <input #maxNum id="numberMax" 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>
+                <button class="btn btn-success m-3" (click)="onSendValues(minNum, maxNum)">Valider</button>
             </div>
         </div>
     </ul>
@@ -36,7 +36,7 @@
             <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>
+                <app-avis-bar (stateNumber)="onStateNumberChange($event)"></app-avis-bar>
                 <button class="btn btn-success me-2" (click)="onSendRating()">Valider</button>
             </div>
         </div>

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);
+  }
 }

src/app/pages/page-accueil/page-accueil.component.html

@@ -1,10 +1,11 @@
 <div class="d-flex align-items-stretch">
-    <app-filter-side-bar [listCategories]="listCategoriesFilter"></app-filter-side-bar>
+    <app-filter-side-bar [listCategories]="listCategoriesFilter" (stateNumber)="onRatingFilter($event)" (rangeNumber)="onPriceFilter($event)" (checkCategory)="onListCategory($event)"></app-filter-side-bar>
-
   <div class="custom-main container p-3">
-        <input class="form-control" type="text" placeholder="Recherche ta belle plante"
+      <input class="form-control"
-            aria-label="Input Recherche ta belle plante">
+          type="text"
-
+          placeholder="Recherche ta belle plante"
+          aria-label="Input Recherche ta belle plante"
+          (input)="onRecherchePlante($event)">
         <div class="py-3">
             Trier par :
             <button class="btn btn-outline-success btn-sm me-2" (click)="onPriceTri()">Prix</button>

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,6 +60,9 @@ 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,11 +96,113 @@ export class PageAccueilComponent implements OnInit {
     this.plantouneService.plantLiked$.next('');
   }
 
-  //Tri des prix des plantes par ordre croissant ou décroissant
+onRecherchePlante(choix: any) {
-onPriceTri() : void {
 
 this.clickCounter ++
 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));
+    }
+    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}
+  }
+
+}
+
+  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;
+  }
+}
+
+  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 ++
+  console.log(this.clickCounter)
     if (this.clickCounter %2) {
       this.listData.sort((a, b) => parseFloat(a.product_price) - parseFloat(b.product_price));
       }else{
@@ -89,7 +211,7 @@ console.log(this.clickCounter)
     }
   
     //Tri des noms des plantes par ordre alphanumérique
-onAlphaTri() : void {
+  onAlphaTri() : void {
   
     this.clickCounter ++
     if (this.clickCounter %2) {
@@ -97,10 +219,10 @@ onAlphaTri() : void {
       }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
+  //Tri des avis des plantes par ordre croissant ou décroissant
-onRatingTri() : void{
+  onRatingTri() : void{
     this.clickCounter ++
     if (this.clickCounter %2) {
       this.listData.sort((a, b) => (a.product_rating > b.product_rating) ? 1 : -1)
@@ -109,3 +231,4 @@ onRatingTri() : void{
       }
     }
 }
+