diff --git a/src/app/modules/admin/pages/page-tableau/page-tableau.component.html b/src/app/modules/admin/pages/page-tableau/page-tableau.component.html index 2e1e456..7a84f23 100644 --- a/src/app/modules/admin/pages/page-tableau/page-tableau.component.html +++ b/src/app/modules/admin/pages/page-tableau/page-tableau.component.html @@ -1,4 +1,4 @@ -<table class="table"> +<table class="table" *ngIf="subCollection$ | async as collection"> <thead class="thead-dark"> <tr> <th scope="col">Id</th> @@ -14,16 +14,16 @@ </tr> </thead> <tbody> - <tr *ngFor="let products of listData"> - <th scope="row">{{products.product_id}}</th> - <td>{{products.product_name}}</td> - <td>{{products.product_price}}</td> - <td>{{products.product_qty}}</td> - <td>{{products.product_instock}}</td> - <td>{{products.product_breadcrumb_label}}</td> - <td>{{products.product_rating}}</td> + <tr *ngFor="let products of collection"> + <th scope="row">{{products.id}}</th> + <td>{{products.name}}</td> + <td>{{products.price}}</td> + <td>{{products.quantity}}</td> + <td>{{products.instock}}</td> + <!-- <td>{{products.Catégorie.}}</td> --> + <td>{{products.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(5)"></td> </tr> </tbody> </table> diff --git a/src/app/modules/admin/pages/page-tableau/page-tableau.component.ts b/src/app/modules/admin/pages/page-tableau/page-tableau.component.ts index 35af785..04fdef6 100644 --- a/src/app/modules/admin/pages/page-tableau/page-tableau.component.ts +++ b/src/app/modules/admin/pages/page-tableau/page-tableau.component.ts @@ -1,4 +1,6 @@ import { Component, OnInit } from '@angular/core'; +import { Subject } from 'rxjs'; +import { Plant } from '../../models/plant'; import { AdminService } from '../../services/admin.service'; @Component({ @@ -8,15 +10,22 @@ import { AdminService } from '../../services/admin.service'; }) export class PageTableauComponent implements OnInit { public listData!: any[]; - constructor(private adminService: AdminService) { } + public subCollection$: Subject<Plant[]>; + + constructor(private adminService: AdminService) { + this.subCollection$ = this.adminService.subCollection$; + this.adminService.refreshCollection(); + + this.adminService.subCollection$.subscribe((data: Plant[]) => console.log("après mapping", data)) + } ngOnInit(): void { - this.listData = []; - this.adminService.getData().subscribe( - (listPlant: any[]) => { - this.listData = listPlant; - this.listData.length = 9; - }) + // this.listData = []; + // this.adminService.getData().subscribe( + // (listPlant: any[]) => { + // this.listData = listPlant; + // this.listData.length = 9; + // }) } onClickDelete(id: number){ diff --git a/src/app/modules/admin/services/admin.service.ts b/src/app/modules/admin/services/admin.service.ts index 04e441f..994bb74 100644 --- a/src/app/modules/admin/services/admin.service.ts +++ b/src/app/modules/admin/services/admin.service.ts @@ -1,6 +1,6 @@ import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; -import { Observable } from 'rxjs'; +import { map, Observable, Subject } from 'rxjs'; import { environment } from 'src/environments/environment'; import { Plant } from '../models/plant'; @@ -8,17 +8,39 @@ import { Plant } from '../models/plant'; providedIn: 'root', }) export class AdminService { + public collection$!: Observable<Plant[]>; + public subCollection$ = new Subject<Plant[]>(); apiUrl: string; + public plantCollection!: Plant[]; constructor(private httpClient: HttpClient) { this.apiUrl = environment.apiUrl; + this.collection$ = this.httpClient.get<Plant[]>(`${this.apiUrl}/list_products`).pipe( + // Ici on modifie l'objet que transporte notre Observable grâce à l'opérateur map() + map((tabObj: any[]) => { + //console.log("avant mapping: ", tabObj); + // Ici grâce à la méthode .map() on transforme tout les objet json du tableau en instance de notre classe Plant() + return tabObj.map((obj: any) => { + 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); + }) + })); + //this.collection$ = this.httpClient.get<Plant[]>(`${this.apiUrl}/list_products`); + //console.log(this.collection$); } - getData(): Observable<any[]> { - return this.httpClient.get<any[]>(`${this.apiUrl}/list_products`); + public refreshCollection(): void { + // On se sert de notre flux de donnée type observable froid + this.collection$.subscribe((listPlant: Plant[]) => { + this.plantCollection = [...listPlant]; + // Utiliser un observable chaud (subject) pour nexter nos données recues de notre observable froid + this.subCollection$.next(listPlant); + }) } addPlant(plant: Plant): Observable<any> | void { return this.httpClient.post(`${this.apiUrl}`, plant); } + // getData(): Observable<any[]> { + // return this.httpClient.get<any[]>(`${this.apiUrl}/list_products`); + // } }