supprimer

src/app/modules/admin/pages/page-tableau/page-tableau.component.html

@@ -15,7 +15,7 @@
   </thead>
   <tbody>
     <tr *ngFor="let products of listData">
-      <th scope="row">{{products.product_id}}</th>
+      <th scope="row">{{products.id}}</th>
       <td>{{products.product_name}}</td>
       <td>{{products.product_price}}</td>
       <td>{{products.product_qty}}</td>
@@ -23,7 +23,7 @@
       <td>{{products.product_breadcrumb_label}}</td>
       <td>{{products.product_rating}}</td>
       <td><a class="bi-pencil-square" routerLink="../modifier"></a></td>
-      <td class="bi-trash-fill" style="color: red; cursor: pointer;" (click)="onClickDelete(products.product_id)"></td>
+      <td class="bi-trash-fill" style="color: red; cursor: pointer;" (click)="onClickDelete(products.id)"></td>
     </tr>
   </tbody>
 </table>

src/app/modules/admin/pages/page-tableau/page-tableau.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Plant } from '../../models/plant';
 import { AdminService } from '../../services/admin.service';
 
 @Component({
@@ -21,6 +22,9 @@ export class PageTableauComponent implements OnInit {
 
   onClickDelete(id: number){
     console.log(id);
+    this.adminService.onClickDelete(id).subscribe((resp) => {
+      console.log("Suppression successful : ", resp);
+    });
 
   }
 

src/app/modules/admin/services/admin.service.ts

@@ -1,19 +1,47 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Observable, Subject, tap, map } from 'rxjs';
 import { environment } from 'src/environments/environment';
+//import { map } from 'underscore';
+import { Plant } from '../models/plant';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AdminService {
   apiUrl: string;
+  public collection$!: Observable<Plant[]>;
+  public subCollection$ = new Subject<Plant[]>();
 
   constructor(private httpClient: HttpClient) {
     this.apiUrl = environment.apiUrl;
+
+    this.collection$ = this.httpClient.get<Plant[]>(`${this.apiUrl}/list_products`).pipe(
+      map((tabObj : any[]) => {
+        return tabObj.map((obj: any) => {
+          //return new Plant(obj)
+          return new Plant(obj.product_name, obj.product_price,obj.product_quantity,obj.product_instock,obj.product_breadcrumb_label,obj.product_image_source,obj.product_rating,obj.id)
+        })
+      })
+    );
+
+  }
+
+  public refreshCollection(): void {
+    // On se sert de notre flux de donnée type observable froid
+    this.collection$.subscribe((listPlant: Plant[]) => {
+      // Utiliser un observable chaud (subject) pour nexter nos données recues de notre observable froid
+      this.subCollection$.next(listPlant);
+    })
   }
 
   getData(): Observable<any[]> {
     return this.httpClient.get<any[]>(`${this.apiUrl}/list_products`);
   }
+
+  onClickDelete(id: number): Observable<any> {
+    return this.httpClient.delete<any>(`${this.apiUrl}/list_products/${id}`).pipe(
+      tap(() => this.refreshCollection())
+    );
+  }
 }