Isa Recherche par categorie

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

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

@@ -1,4 +1,5 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+
 
 @Component({
   selector: 'app-filter-side-bar',
@@ -7,12 +8,35 @@ import { Component, Input, OnInit } from '@angular/core';
 })
 export class FilterSideBarComponent implements OnInit {
   @Input() listCategories: string[];
-  
+  @Output() checkCategory = new EventEmitter();
-  constructor() { 
+  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)
+  }
+
 }

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

@@ -1,5 +1,5 @@
 <div class="d-flex align-items-stretch">
-    <app-filter-side-bar [listCategories]="listCategoriesFilter"></app-filter-side-bar>
+    <app-filter-side-bar [listCategories]="listCategoriesFilter" (checkCategory)="onListCategory($event)"></app-filter-side-bar>
 
     <div class="custom-main container p-3">
         <input class="form-control" 
@@ -17,7 +17,7 @@
         <div class="row">
             <div class="col" *ngFor="let product of listData">
                 <app-card-plante [plant]="product" 
-                            (clickLike)="onEventLike()">
+                            (clickLike)="onEventLike()" >
                 </app-card-plante>
             </div>
         </div>

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

@@ -9,10 +9,14 @@ import * as _ from 'underscore';
 })
 export class PageAccueilComponent implements OnInit {
   public listData: any[];
+  public listDataGlobal : any[];
   public listCategoriesFilter: string[];
+  public dataFilterCategory : any;
+  
 
   constructor(private plantouneService: PlantouneService) {
     this.listData = [];
+    this.listDataGlobal=[];
     this.listCategoriesFilter = [];
    }
 
@@ -33,7 +37,8 @@ export class PageAccueilComponent implements OnInit {
     this.plantouneService.getData().subscribe(
       (listPlant: any[]) => {
         console.log(listPlant);
-
+        this.listDataGlobal=[...listPlant];
+        console.log(this.listDataGlobal);
         /**
          * Technique avec Underscore JS pour recupérer les catégories uniques de nos plantes
          */
@@ -54,6 +59,8 @@ export class PageAccueilComponent implements OnInit {
         this.listCategoriesFilter = listUniqJsCategories;
         this.listData = listPlant;
         this.listData.length = 9;
+
+
       }
     )
   }
@@ -62,4 +69,30 @@ export class PageAccueilComponent implements OnInit {
     this.plantouneService.plantLiked$.next('')
   }
 
+  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;
+  }
+}
+
+
 }