conflit de merge

This commit is contained in:
Vincent Ramiere 2022-03-21 18:36:26 +01:00
commit 04f3b22fd3
3 changed files with 47 additions and 22 deletions

View File

@ -1,4 +1,4 @@
<table class="table"> <table class="table" *ngIf="subCollection$ | async as collection">
<thead class="thead-dark"> <thead class="thead-dark">
<tr> <tr>
<th scope="col">Id</th> <th scope="col">Id</th>
@ -14,6 +14,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<<<<<<< HEAD
<tr *ngFor="let products of listData"> <tr *ngFor="let products of listData">
<th scope="row">{{products.id}}</th> <th scope="row">{{products.id}}</th>
<td>{{products.product_name}}</td> <td>{{products.product_name}}</td>
@ -24,6 +25,18 @@
<td>{{products.product_rating}}</td> <td>{{products.product_rating}}</td>
<td><a class="bi-pencil-square" routerLink="../modifier"></a></td> <td><a class="bi-pencil-square" routerLink="../modifier"></a></td>
<td class="bi-trash-fill" style="color: red; cursor: pointer;" (click)="onClickDelete(products.id)"></td> <td class="bi-trash-fill" style="color: red; cursor: pointer;" (click)="onClickDelete(products.id)"></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(5)"></td>
>>>>>>> main
</tr> </tr>
</tbody> </tbody>
</table> </table>

View File

@ -1,4 +1,8 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
<<<<<<< HEAD
=======
import { Subject } from 'rxjs';
>>>>>>> main
import { Plant } from '../../models/plant'; import { Plant } from '../../models/plant';
import { AdminService } from '../../services/admin.service'; import { AdminService } from '../../services/admin.service';
@ -9,15 +13,22 @@ import { AdminService } from '../../services/admin.service';
}) })
export class PageTableauComponent implements OnInit { export class PageTableauComponent implements OnInit {
public listData!: any[]; 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 { ngOnInit(): void {
this.listData = []; // this.listData = [];
this.adminService.getData().subscribe( // this.adminService.getData().subscribe(
(listPlant: any[]) => { // (listPlant: any[]) => {
this.listData = listPlant; // this.listData = listPlant;
this.listData.length = 9; // this.listData.length = 9;
}) // })
} }
onClickDelete(id: number){ onClickDelete(id: number){

View File

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