vincentguillet/gameovergne-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor PrestashopService and ps-product-dialog component to enhance API integration and improve product management functionality

Browse Source
This commit is contained in:
Vincent Guillet
2025-11-29 11:53:25 +01:00
parent 007cb34c81
commit d64fed8157
2 changed files with 268 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
client/src/app/components/ps-product-dialog/ps-product-dialog.component.ts
View File

@@ -1,4 +1,5 @@
import {Component, Inject, OnInit, inject, OnDestroy} from '@angular/core';
// File: src/app/components/ps-product-dialog/ps-product-dialog.component.ts
import { Component, Inject, OnInit, inject, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatFormField, MatLabel } from '@angular/material/form-field';
@@ -20,6 +21,7 @@ import { catchError, forkJoin, of, Observable } from 'rxjs';
import { PsItem } from '../../interfaces/ps-item';
import { ProductListItem } from '../../interfaces/product-list-item';
import { PrestashopService } from '../../services/prestashop.serivce';
import { PsProduct } from '../../interfaces/ps-product'; // si tu as une interface dédiée
export type ProductDialogData = {
mode: 'create' | 'edit';
@@ -87,6 +89,7 @@ export class PsProductDialogComponent implements OnInit, OnDestroy {
// ---------- Helpers locaux ----------
// utilisé seulement pour pré-afficher un TTC approximatif à partir du HT de la liste
private toTtc(ht: number) {
return Math.round(((ht * 1.2) + Number.EPSILON) * 100) / 100;
}
@@ -148,6 +151,7 @@ export class PsProductDialogComponent implements OnInit, OnDestroy {
if (this.mode === 'edit' && this.productRow) {
const r = this.productRow;
// pré-remplissage rapide avec la ligne de liste (HT -> TTC approximatif)
const immediateTtc = r.priceHt == null ? 0 : this.toTtc(r.priceHt);
this.form.patchValue({
name: r.name,
@@ -158,11 +162,7 @@ export class PsProductDialogComponent implements OnInit, OnDestroy {
});
const details$ = this.ps.getProductDetails(r.id).pipe(
catchError(() => of({
id: r.id, name: r.name, description: '',
id_manufacturer: r.id_manufacturer, id_supplier: r.id_supplier,
id_category_default: r.id_category_default, priceHt: r.priceHt ?? 0
}))
catchError(() => of<PsProduct | null>(null))
);
const qty$ = this.ps.getProductQuantity(r.id).pipe(catchError(() => of(0)));
const imgs$ = this.ps.getProductImageUrls(r.id).pipe(catchError(() => of<string[]>([])));
@@ -172,20 +172,23 @@ export class PsProductDialogComponent implements OnInit, OnDestroy {
forkJoin({ details: details$, qty: qty$, imgs: imgs$, flags: flags$ })
.subscribe(({ details, qty, imgs, flags }) => {
const ttc = this.toTtc(details.priceHt ?? 0);
const baseDesc = this.cleanForTextarea(details.description ?? '');
const baseDesc = this.cleanForTextarea(details?.description ?? '');
this.lastLoadedDescription = baseDesc;
this.form.patchValue({
// description depuis le backend (déjà propre / nettoyée normalement)
description: baseDesc,
// flags
complete: flags.complete,
hasManual: flags.hasManual,
conditionLabel: flags.conditionLabel || '',
priceTtc: (ttc || this.form.value.priceTtc || 0),
// TTC "réel" calculé par le backend (si dispo) sinon on garde la valeur actuelle
priceTtc: (details?.priceTtc ?? this.form.value.priceTtc ?? 0),
quantity: qty,
categoryId: (details.id_category_default ?? this.form.value.categoryId) ?? null,
manufacturerId: (details.id_manufacturer ?? this.form.value.manufacturerId) ?? null,
supplierId: (details.id_supplier ?? this.form.value.supplierId) ?? null
// ids de ref issus du DTO backend
categoryId: (details?.categoryId ?? this.form.value.categoryId) ?? null,
manufacturerId: (details?.manufacturerId ?? this.form.value.manufacturerId) ?? null,
supplierId: (details?.supplierId ?? this.form.value.supplierId) ?? null
});
this.existingImageUrls = imgs;
@@ -203,7 +206,7 @@ export class PsProductDialogComponent implements OnInit, OnDestroy {
const fl = (ev.target as HTMLInputElement).files;
// Nettoyage des anciens objectURL
for(let url of this.previewUrls) {
for (let url of this.previewUrls) {
URL.revokeObjectURL(url);
}
this.previewUrls = [];
@@ -261,7 +264,7 @@ export class PsProductDialogComponent implements OnInit, OnDestroy {
}
}
// -------- Save / close inchangés (à part dto.images) --------
// -------- Save / close --------
save() {
if (this.form.invalid) return;
@@ -269,7 +272,7 @@ export class PsProductDialogComponent implements OnInit, OnDestroy {
const v = this.form.getRawValue();
const effectiveDescription = (v.description ?? '').trim() || this.lastLoadedDescription;
const dto = {
const dto: PsProduct = {
name: v.name!,
description: effectiveDescription,
categoryId: +v.categoryId!,

362
client/src/app/services/prestashop.serivce.ts
View File

@@ -1,165 +1,301 @@
// File: src/app/services/prestashop.service.ts
import { inject, Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable, map } from 'rxjs';
import { Observable, map, of } from 'rxjs';
import { PsItem } from '../interfaces/ps-item';
import { PsProduct } from '../interfaces/ps-product';
import { ProductListItem } from '../interfaces/product-list-item';
import { environment } from '../../environments/environment';
export type Resource = 'categories' | 'manufacturers' | 'suppliers';
export interface ProductFlags {
complete: boolean;
hasManual: boolean;
conditionLabel?: string | null;
}
type Resource = 'categories' | 'manufacturers' | 'suppliers';
@Injectable({ providedIn: 'root' })
export class PrestashopService {
private readonly http = inject(HttpClient);
/**
* Base de l'API Spring.
* Exemple dans environment:
* apiUrl: '/gameovergne-api/api'
* Base de ton API Spring.
* Exemple : https://dev.vincent-guillet.fr/gameovergne-api
*
* Assure-toi d'avoir dans environment :
* apiUrl: 'https://dev.vincent-guillet.fr/gameovergne-api'
*/
private readonly base = `${environment.apiUrl}/ps-admin`;
private readonly apiBase = environment.apiUrl;
// ---------------------------------------------------------------------------
// RÉFÉRENTIELS SIMPLES : categories / manufacturers / suppliers
// ---------------------------------------------------------------------------
/** Endpoints backend "intelligents" (logique métier Presta) */
private readonly adminBase = `${this.apiBase}/api/ps-admin`;
list(resource: Resource): Observable<PsItem[]> {
return this.http.get<PsItem[]>(`${this.base}/${resource}`);
}
/** Endpoints proxy bruts vers Presta (si tu en as encore besoin) */
private readonly proxyBase = `${this.apiBase}/api/ps`;
create(resource: Resource, name: string): Observable<number> {
const params = new HttpParams().set('name', name);
return this.http.post<number>(`${this.base}/${resource}`, null, { params });
}
update(resource: Resource, id: number, newName: string): Observable<void> {
const params = new HttpParams().set('name', newName);
return this.http.put<void>(`${this.base}/${resource}/${id}`, null, { params });
}
delete(resource: Resource, id: number): Observable<void> {
return this.http.delete<void>(`${this.base}/${resource}/${id}`);
}
// ---------------------------------------------------------------------------
// PRODUITS : liste, flags, création / mise à jour / suppression
// ---------------------------------------------------------------------------
// ===========================================================================
// 1) CRUD générique (categories / manufacturers / suppliers)
// ===========================================================================
/**
* Liste des produits avec quantité, basée sur l’API Spring.
*
* Le backend renvoie un DTO en camelCase :
* {
* id: number;
* name: string;
* manufacturerId?: number;
* supplierId?: number;
* categoryId?: number;
* priceHt?: number;
* quantity?: number;
* }
*
* On le remappe sur ton interface existante ProductListItem
* (id_manufacturer, id_supplier, id_category_default, etc.).
* Liste les catégories / fabricants / fournisseurs.
* Signature conservée pour les composants existants.
*/
listProducts(query?: string): Observable<ProductListItem[]> {
list(resource: Resource): Observable<PsItem[]> {
return this.http
.get<PsItem[]>(`${this.adminBase}/reference-data/${resource}`)
.pipe(
// Par sécurité, on trie par nom ici (comme avant)
map(items =>
[...items].sort((a, b) =>
a.name.localeCompare(b.name, 'fr', { sensitivity: 'base' })
)
)
);
}
/**
* Crée une catégorie / manufacturer / supplier.
* Retourne l'id créé (ou null si souci).
*/
create(resource: Resource, name: string): Observable<number | null> {
return this.http
.post<{ id: number }>(
`${this.adminBase}/reference-data/${resource}`,
{ name }
)
.pipe(map(res => (res && typeof res.id === 'number' ? res.id : null)));
}
/**
* Met à jour le nom d'une catégorie / manufacturer / supplier.
*/
update(resource: Resource, id: number, newName: string): Observable<boolean> {
return this.http
.put<void>(
`${this.adminBase}/reference-data/${resource}/${id}`,
{ name: newName }
)
.pipe(map(() => true));
}
/**
* Supprime une catégorie / manufacturer / supplier.
*/
delete(resource: Resource, id: number): Observable<boolean> {
return this.http
.delete<void>(`${this.adminBase}/reference-data/${resource}/${id}`)
.pipe(map(() => true));
}
/**
* Récupère le XML brut de l'objet Presta (pour debug / vérif).
* Signature conservée, mais on passe désormais par le backend.
*/
getXml(resource: Resource, id: number): Observable<string> {
return this.http.get(
`${this.adminBase}/reference-data/${resource}/${id}/raw-xml`,
{
responseType: 'text',
}
);
}
// ===========================================================================
// 2) Produits (liste / détails)
// ===========================================================================
/**
* Liste les produits pour l'écran de recherche / listing.
* Anciennement : multi-requêtes directes sur Presta.
* Maintenant : le backend te renvoie déjà les infos nécessaires.
*/
listProducts(
query?: string
): Observable<(ProductListItem & { priceHt?: number; quantity?: number })[]> {
let params = new HttpParams();
if (query?.trim()) {
params = params.set('q', query.trim());
}
return this.http
.get<
Array<{
id: number;
name: string;
manufacturerId?: number;
supplierId?: number;
categoryId?: number;
priceHt?: number;
quantity?: number;
}>
>(`${this.base}/products`, { params })
.pipe(
map((dtoList) =>
dtoList.map(
(dto) =>
({
id: dto.id,
name: dto.name,
id_manufacturer: dto.manufacturerId,
id_supplier: dto.supplierId,
id_category_default: dto.categoryId,
priceHt: dto.priceHt,
quantity: dto.quantity ?? 0,
} as ProductListItem),
),
),
return this.http.get<
(ProductListItem & { priceHt?: number; quantity?: number })[]
>(`${this.adminBase}/products`, { params });
}
/**
* Détails complets d'un produit.
* Le backend renvoie un PsProduct (ou équivalent).
*/
getProductDetails(id: number): Observable<PsProduct> {
return this.http.get<PsProduct>(`${this.adminBase}/products/${id}`);
}
// ===========================================================================
// 3) Images produits
// ===========================================================================
getProductImageUrls(productId: number) {
return this.http.get<string[]>(
`${this.adminBase}/products/${productId}/images`
);
}
/**
* Flags Complet / Notice / État pour un produit.
* Le backend renvoie déjà ce format :
* { complete: boolean; hasManual: boolean; conditionLabel?: string }
* URL de la miniature d'un produit (ou null).
* On délègue au backend (qui sait comment construire l'URL FO).
*
* Ancienne signature conservée : Observable<string | null>.
*/
getProductFlags(productId: number): Observable<ProductFlags> {
return this.http.get<ProductFlags>(`${this.base}/products/${productId}/flags`);
getProductThumbnailUrl(productId: number): Observable<string | null> {
return this.http
.get<{ url: string | null }>(
`${this.adminBase}/products/${productId}/thumbnail`
)
.pipe(map(res => res?.url ?? null));
}
/**
* Valeurs possibles de la caractéristique "État".
* Renvoie une simple liste de libellés.
* Si tu as encore un usage direct de l'upload dans certains composants,
* tu peux garder cette méthode mais la faire pointer sur ton endpoint Spring
* "upload image only".
*
* Si tu n'en as pas besoin, tu peux la laisser mais non utilisée.
*/
uploadProductImage(
productId: number,
file: File
): Observable<unknown> {
const fd = new FormData();
fd.append('image', file);
return this.http.post(
`${this.adminBase}/products/${productId}/images`,
fd
);
}
// ===========================================================================
// 4) Stock (quantité)
// ===========================================================================
/**
* Récupère la quantité du produit dans Presta.
*/
getProductQuantity(productId: number): Observable<number> {
return this.http
.get<{ quantity: number }>(
`${this.adminBase}/products/${productId}/quantity`
)
.pipe(map(res => (res?.quantity ?? 0)));
}
// ===========================================================================
// 5) Caractéristiques Complet / Notice / Etat
// ===========================================================================
/**
* Flags Complet / Notice / Etat d'un produit.
* Signature conservée.
*/
getProductFlags(
productId: number
): Observable<{ complete: boolean; hasManual: boolean; conditionLabel?: string }> {
return this.http.get<{
complete: boolean;
hasManual: boolean;
conditionLabel?: string;
}>(`${this.adminBase}/products/${productId}/flags`);
}
/**
* Liste des valeurs possibles pour la caractéristique "État".
* Signature conservée (Observable<string[]>).
*/
getConditionValues(): Observable<string[]> {
return this.http.get<string[]>(`${this.base}/meta/condition-values`);
return this.http.get<string[]>(
`${this.adminBase}/products/conditions`
);
}
// ===========================================================================
// 6) Création / mise à jour / suppression d'un produit
// ===========================================================================
/**
* Création produit : on envoie ton PsProduct tel quel.
* Toute la logique XML / TVA / caractéristiques / stock est dans Spring.
* Construit un FormData pour envoyer :
* - le DTO produit sans les images en JSON ("meta"),
* - les fichiers images ("images").
*
* NB: Si ton interface PsProduct contient `images?: File[]`,
* Jackson côté Spring ignorera cette propriété (unknown property),
* et tu pourras gérer l'upload dans un endpoint dédié plus tard.
* C'est aligné avec un endpoint Spring @PostMapping(consumes = MULTIPART_FORM_DATA)
* qui prend :
* @RequestPart("meta") PsProductDto
* @RequestPart(name = "images", required = false) List<MultipartFile>
*/
createProduct(dto: PsProduct): Observable<number> {
return this.http.post<number>(`${this.base}/products`, dto);
private buildProductFormData(dto: PsProduct): FormData {
const fd = new FormData();
// On clone le DTO sans les images pour l'envoyer en JSON
const { images, ...meta } = dto as PsProduct & { images?: File[] };
fd.append(
'meta',
new Blob([JSON.stringify(meta)], { type: 'application/json' })
);
if (images && images.length) {
for (const img of images) {
fd.append('images', img);
}
}
return fd;
}
/**
* Mise à jour produit.
* Création d'un produit Presta via ton backend.
* Signature conservée : Observable<number | null> (id du produit Presta).
*/
updateProduct(id: number, dto: PsProduct): Observable<void> {
return this.http.put<void>(`${this.base}/products/${id}`, dto);
createProduct(dto: PsProduct): Observable<number | null> {
const fd = this.buildProductFormData(dto);
return this.http
.post<{ id: number }>(`${this.adminBase}/products`, fd)
.pipe(map(res => (res && typeof res.id === 'number' ? res.id : null)));
}
/**
* Suppression produit.
* Mise à jour d'un produit Presta via ton backend.
* Signature conservée : Observable<boolean>.
*/
deleteProduct(id: number): Observable<void> {
return this.http.delete<void>(`${this.base}/products/${id}`);
updateProduct(id: number, dto: PsProduct): Observable<boolean> {
const fd = this.buildProductFormData(dto);
return this.http
.put<void>(`${this.adminBase}/products/${id}`, fd)
.pipe(map(() => true));
}
// ---------------------------------------------------------------------------
// TODO ultérieur : gestion des images produits via Spring
//
// Exemple de signature à garder côté front (sans impl pour l’instant) :
//
// uploadProductImage(productId: number, file: File): Observable<void> {
// const formData = new FormData();
// formData.append('image', file);
// return this.http.post<void>(`${this.base}/products/${productId}/images`, formData);
// }
//
// Il faudra ajouter le contrôleur + service côté Spring pour
// relayer vers /images/products/{id} de Presta.
// ---------------------------------------------------------------------------
/**
* Suppression d'un produit Presta via ton backend.
* Signature conservée : Observable<boolean>.
*/
deleteProduct(id: number): Observable<boolean> {
return this.http
.delete<void>(`${this.adminBase}/products/${id}`)
.pipe(map(() => true));
}
// ===========================================================================
// 7) (Optionnel) Accès direct proxy /api/ps/** si tu en as encore besoin
// ===========================================================================
/**
* Si certains composants utilisent encore directement l'ancien endpoint
* "base Presta proxy" (ex: this.base + '/categories?display=...'),
* tu peux garder ce helper pour les migrations progressives.
*/
rawGet(path: string, params?: HttpParams): Observable<string> {
const url = `${this.proxyBase}/${path.replace(/^\/+/, '')}`;
return this.http.get(url, {
params,
responseType: 'text',
});
}
}