Forked commit

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

@@ -0,0 +1,26 @@
+<div class="d-flex align-items-stretch">
+    <app-filter-side-bar [listCategories]="listCategoriesFilter"></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">
+
+        <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>
+        </div>
+
+        <div class="row">
+            <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.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageAccueilComponent } from './page-accueil.component';
+
+describe('PageAccueilComponent', () => {
+  let component: PageAccueilComponent;
+  let fixture: ComponentFixture<PageAccueilComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageAccueilComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageAccueilComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,65 @@
+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',
+  styleUrls: ['./page-accueil.component.scss']
+})
+export class PageAccueilComponent implements OnInit {
+  public listData: any[];
+  public listCategoriesFilter: string[];
+
+  constructor(private plantouneService: PlantouneService) {
+    this.listData = [];
+    this.listCategoriesFilter = [];
+   }
+
+   /**
+    * equivalent de la ligne du dessus 
+    * 
+    * plantouneService;
+    * 
+    * constructor(plantouneService: PlantouneService) {
+    *   this.plantouneService = plantouneService;
+    * }
+    */
+
+
+
+  ngOnInit(): void {
+
+    this.plantouneService.getData().subscribe(
+      (listPlant: any[]) => {
+        console.log(listPlant);
+
+        /**
+         * 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);
+        
+        const listUniqCategories = _.uniq(listAllCategories) 
+        console.log(listUniqCategories);
+        
+
+        /**
+         * Technique native JS pour recupérer les catégories uniques de nos plantes
+         */
+
+        const listUniqJsCategories = [...new Set(listAllCategories)];
+        console.log(listUniqJsCategories);
+
+        this.listCategoriesFilter = listUniqJsCategories;
+        this.listData = listPlant;
+        this.listData.length = 9;
+      }
+    )
+  }
+
+  onEventLike() {
+    this.plantouneService.plantLiked$.next('')
+  }
+
+}