Merge pull request #1 from Julian30520/romain

Romain

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>
@@ -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>
-                <a href="#" class="btn btn-success me-2">Valider</a>
+              <app-avis-bar (stateNumber)="onStateNumberChange"></app-avis-bar>
+              <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, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
   selector: 'app-filter-side-bar',
@@ -7,6 +7,8 @@ import { Component, Input, OnInit } from '@angular/core';
 })
 export class FilterSideBarComponent implements OnInit {
   @Input() listCategories: string[];
+  @Output() stateNumber = new EventEmitter();
+  filterStateNumber: number = 0;
 
   constructor() {
     this.listCategories = [];
@@ -15,4 +17,12 @@ export class FilterSideBarComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  onStateNumberChange(stateNumber: number): void {
+    this.filterStateNumber = stateNumber;
+  }
+
+  onSendRating():void {
+    this.stateNumber.emit(this.filterStateNumber);
+  }
+
 }

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

@@ -9,9 +9,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">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)="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="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',
@@ -9,11 +12,19 @@ import * as _ from 'underscore';
 })
 export class PageAccueilComponent implements OnInit {
   public listData: any[];
+  public listRate: any[];
+  public listPricePlant : any[];
+  public clickCounter : any;
+
   public listCategoriesFilter: string[];
 
   constructor(private plantouneService: PlantouneService) {
     this.listData = [];
+    this.listRate = [];
     this.listCategoriesFilter = [];
+    this.listPricePlant = [];
+    this.clickCounter = 0;
+
    }
 
    /**
@@ -38,10 +49,11 @@ 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);
+        // console.log(listAllCategories);
 
         const listUniqCategories = _.uniq(listAllCategories)
-        console.log(listUniqCategories);
+        // console.log(listUniqCategories);
+
 
 
         /**
@@ -54,6 +66,7 @@ export class PageAccueilComponent implements OnInit {
         this.listCategoriesFilter = listUniqJsCategories;
         this.listData = listPlant;
         this.listData.length = 9;
+        // console.log(this.listData);
       }
     )
   }
@@ -62,4 +75,36 @@ export class PageAccueilComponent implements OnInit {
     this.plantouneService.plantLiked$.next('')
   }
 
+  //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(b.product_price) - parseFloat(a.product_price));
+    }else{
+    this.listData.sort((a, b) => parseFloat(a.product_price) - parseFloat(b.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)
+    }
+  }
 }