Carte détail grossière

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

@@ -2,26 +2,21 @@
     <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"
+        <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" (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)="onAlphaTri()">Ordre Alpha</button>
             <button class="btn btn-outline-success btn-sm me-2" (click)="onRatingTri()">Avis</button>
         </div>
 
         <div class="row">
             <div class="col" *ngFor="let product of listData">
-              <app-card-plante [plant]="product"
-              [routerLink]="['/details/:productId']" 
-                          (clickLike)="onEventLike()">
+                <app-card-plante [plant]="product" [routerLink]="['/details/:productId']" (clickLike)="onEventLike()">
                 </app-card-plante>
             </div>
         </div>
     </div>
 </div>
-

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

@@ -1,3 +1,25 @@
-<p (clickCardId) = "test($event)"></p>
-
-
+<div class="container" *ngIf="detailsPlant">
+    <div class="row my-4">
+        <img src="{{detailsPlant.product_url_picture}}" class="col-sm-5" style="width: 30rem;"
+            alt="Image de {{ detailsPlant.product_name }}">
+        <div class="col-sm-6">
+            <h4 style=" color: green;">{{detailsPlant.product_breadcrumb_label}}</h4>
+            <h2 class="card-title" style="font-size: 30px;">{{ detailsPlant.product_name }}</h2>
+            <div>
+            </div>
+            <div class="card-content">
+            </div>
+            <div style="border-style: solid; border-color: green; margin: auto; text-align: center;">
+                <p>
+                    Plante appréciant la chaleur et un bon réseau wifi,
+                    interconnectée avec son propriétaire et détestant les chats.
+                    Beaucoup de café et un peu d’eau. Ne pas sortir en extérieur, sauf en terrasse. Floraison totale au
+                    mois de juin.
+                </p>
+            </div>
+            <div class="card-content" style="font-weight: bold">{{ detailsPlant.product_unitprice_ati }} €
+            </div>
+            <div>Quantité restante : {{detailsPlant.product_qty}}</div>
+        </div>
+    </div>
+</div>

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

@@ -10,8 +10,8 @@ import { PlantouneService } from 'src/app/services/plantoune.service';
 })
 export class PageDetailsComponent implements OnInit {
 
-  product : any;
- public listData : any[];
+  detailsPlant: any;
+  public listData: any[];
 
   constructor(private route: ActivatedRoute, private plantouneService: PlantouneService) {
 
@@ -29,16 +29,20 @@ export class PageDetailsComponent implements OnInit {
 
         //ajoute le ProductId à l'url
         const routeParams = this.route.snapshot.paramMap;
-    const productIdFromRoute = Number (routeParams.get('productId'));
+        const productIdFromRoute = Number(routeParams.get('productId'));
 
-    //trouve le produit qui correspond à l'Id de la route
+        // Faire appel au service et récuperer et executer la requete http  et lui fournir le productId
+        this.plantouneService.getPlantById(productIdFromRoute).subscribe
+          (plant => {
+            this.detailsPlant = plant[0];
+            console.log(this.detailsPlant);
+          })
 
-   this.product = this.listData.find (product => product.product_id === productIdFromRoute);
 
       })
-}
+  }
 
-  test(id:any){
+  test(id: any) {
     console.log(id);
   }
 }

src/app/services/plantoune.service.ts

@@ -11,6 +11,11 @@ export class PlantouneService {
   constructor(private httpClient: HttpClient) { }
 
   getData(): Observable<any[]> {
+    
     return this.httpClient.get<any[]>('http://localhost:3000/list_products');
   }
+  
+  getPlantById(id : any): Observable<any[]> {
+    return this.httpClient.get<any[]>('http://localhost:3000/list_products?product_id=' + id);
+  }
 }