Merge branch 'dev' into Isa

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

@@ -13,7 +13,7 @@
                     {{ 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,6 +1,5 @@
 import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
 
-
 @Component({
   selector: 'app-filter-side-bar',
   templateUrl: './filter-side-bar.component.html',
@@ -9,6 +8,9 @@ import { Component, Input, OnInit, Output, EventEmitter } 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[];
 
 
@@ -39,4 +41,17 @@ export class FilterSideBarComponent implements OnInit {
     //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,6 +1,5 @@
 <div class="d-flex align-items-stretch">
-    <app-filter-side-bar [listCategories]="listCategoriesFilter" (checkCategory)="onListCategory($event)"></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"
@@ -9,9 +8,9 @@
 
       <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" (click)="onPriceTri()">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"(click)="onAlphaTri()">Ordre Alpha</button>
-            <button class="btn btn-outline-success btn-sm me-2">Avis</button>
+          <button class="btn btn-outline-success btn-sm me-2" (click)="onRatingTri()">Avis</button>
       </div>
 
       <div class="row">

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

@@ -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',
@@ -10,14 +13,32 @@ import * as _ from 'underscore';
 export class PageAccueilComponent implements OnInit {
   public listData: 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.listDataFilter = [];
     this.listCategoriesFilter = [];
+
+    this.rangeNumber = [];
+    this.stateNumber = 0;
+
+    this.isPricingFilterActive = false;
+    this.isRatingFilterActive = false;
+
+    this.clickCounter = 0;
    }
 
    /**
@@ -38,15 +59,18 @@ export class PageAccueilComponent implements OnInit {
       (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
          */
         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);
+
 
 
         /**
@@ -60,7 +84,7 @@ export class PageAccueilComponent implements OnInit {
         this.listData = listPlant;
         this.listData.length = 9;
 
-
+        console.log(this.listData);
       }
     )
   }
@@ -94,5 +118,89 @@ export class PageAccueilComponent implements OnInit {
   }
 }
 
+  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)
+      }
+    }
 }