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,38 +7,38 @@
           <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}}">
+                <label class="form-check-label" for="checkBoxCategory{{indexCat}}">
-                  {{ category }}
+                    {{ category }}
-              </label>
+                </label>
-          </div>
+            </div>
-          <div *ngIf="listCategories.length == 0 ">
+            <div *ngIf="listCategories.length == 0 ">
-              Aucune catégorie disponible
+                Aucune catégorie disponible
-          </div>
+            </div>
-      </div>
+        </div>
-  </ul>
+    </ul>
-  <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">Prix</p>
+            <p class="mb-1 fs-5 fw-semibold">Prix</p>
-          <div class="d-flex justify-content-center">
+            <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>
 
-          <div class="d-flex justify-content-center">
+            <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>
-      </div>
+        </div>
-  </ul>
+    </ul>
-  <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">Avis</p>
+            <p class="mb-1 fs-5 fw-semibold">Avis</p>
-
+            
-          <div class="flex-column justify-content-start">
+            <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>
+                <button class="btn btn-success me-2" (click)="onSendRating()">Valider</button>
-          </div>
+            </div>
-      </div>
+        </div>
-  </ul>
+    </ul>
 </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">
-    <div class="custom-main container p-3">
+      <input class="form-control"
-        <input class="form-control" type="text" placeholder="Recherche ta belle plante"
+          type="text"
-            aria-label="Input Recherche ta belle plante">
+          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,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
+onRecherchePlante(choix: any) {
-onPriceTri() : void {
 
 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 ++
+  onListCategory(categoryArray: string[]) {
-  if (this.clickCounter %2) {
+   // this.listData=listData;
-    this.listData.sort((a, b) => (a.product_name > b.product_name) ? 1 : -1)
+    //console.log(typeof(valueText));
-    }else{
+
-    this.listData.sort((a, b) => (b.product_name > a.product_name) ? 1 : -1)
+    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
+  onRatingFilter(stateNumber: number): void {
-onRatingTri() : 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) {
+  console.log(this.clickCounter)
-    this.listData.sort((a, b) => (a.product_rating > b.product_rating) ? 1 : -1)
+    if (this.clickCounter %2) {
-    }else{
+      this.listData.sort((a, b) => parseFloat(a.product_price) - parseFloat(b.product_price));
-    this.listData.sort((a, b) => (b.product_rating > a.product_rating) ? 1 : -1)
+      }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)
+      }
+    }
 }
+