Merge branch 'dev' into cecile

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

@@ -1,19 +1,19 @@
 <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}}" (click)="onCheckCategory(category,$event)">
 
                 <label class="form-check-label" for="checkBoxCategory{{indexCat}}">
                     {{ category }}
                 </label>
             </div>
-            <div *ngIf="listCategories.length == 0 ">S
+            <div *ngIf="listCategories.length == 0 ">
                 Aucune catégorie disponible
             </div>
         </div>
@@ -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,8 +36,8 @@
             <p class="mb-1 fs-5 fw-semibold">Avis</p>
             
             <div class="flex-column justify-content-start">
-                <app-avis-bar></app-avis-bar>
+                <app-avis-bar (stateNumber)="onStateNumberChange($event)"></app-avis-bar>
-                <a href="#" class="btn btn-success me-2">Valider</a>
+                <button class="btn btn-success me-2" (click)="onSendRating()">Valider</button>
             </div>
         </div>
     </ul>

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'app-filter-side-bar',
@@ -7,12 +7,51 @@ import { Component, Input, OnInit } 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;
+  }
+
+  onSendRating():void {
+    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,28 +1,26 @@
 <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"
+          aria-label="Input Recherche ta belle plante"
+          (input)="onRecherchePlante($event)">
 
-    <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>
-            (input)="onRecherchePlante($event)"
+      </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>
 

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

@@ -3,6 +3,9 @@ import { PlantouneService } from 'src/app/services/plantoune.service';
 import * as _ from 'underscore';
 import { contains, includes } from 'underscore';
 
+
+
+
 @Component({
   selector: 'app-page-accueil',
   templateUrl: './page-accueil.component.html',
@@ -10,18 +13,40 @@ import { contains, includes } from 'underscore';
 })
 export class PageAccueilComponent implements OnInit {
   public listData: any[];
-  public listDataGlobal : 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 = [];
-    this.listDataGlobal! = [];
+    this.listDataGlobal = [];
+    this.listDataFilter = [];
     this.listCategoriesFilter = [];
+
+    this.rangeNumber = [];
+    this.stateNumber = 0;
+
+    this.isPricingFilterActive = false;
+    this.isRatingFilterActive = false;
+
+    this.clickCounter = 0;
    }
 
    /**
     * equivalent de la ligne du dessus
+    *
     * plantouneService;
+    *
     * constructor(plantouneService: PlantouneService) {
     *   this.plantouneService = plantouneService; }
     */
@@ -31,18 +56,20 @@ export class PageAccueilComponent implements OnInit {
 
     this.plantouneService.getData().subscribe(
       (listPlant: any[]) => {
-      console.log("Liste Plant : ", listPlant);
+        console.log(listPlant);
-    
+        this.listDataGlobal = [...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
          */
         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,6 +83,7 @@ export class PageAccueilComponent implements OnInit {
         this.listData = [...listPlant];
         this.listData.length = 9;
 
+        console.log(this.listData);
       }
     )
   }
@@ -64,7 +92,6 @@ export class PageAccueilComponent implements OnInit {
     this.plantouneService.plantLiked$.next('')
   }
 
-
 onRecherchePlante(choix: any) {
 
     const search = choix.target.value 
@@ -81,3 +108,116 @@ onRecherchePlante(choix: any) {
   }
 
 }
+
+  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{
+      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)
+      }
+    }
+}
+