feat: implement image carousel in product dialog; enhance image upload handling and preview functionality

This commit is contained in:
Vincent Guillet
2025-11-18 16:32:29 +01:00
parent d4ffcf0562
commit b756c9fa2d
7 changed files with 302 additions and 58 deletions

View File

@@ -2,8 +2,8 @@ import {Component, inject, OnInit, ViewChild} from '@angular/core';
import {CommonModule} from '@angular/common';
import {
MatCell, MatCellDef, MatColumnDef, MatHeaderCell, MatHeaderCellDef,
MatHeaderRow, MatHeaderRowDef, MatNoDataRow, MatRow, MatRowDef,
MatTable, MatTableDataSource
MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
MatNoDataRow, MatTable, MatTableDataSource
} from '@angular/material/table';
import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator';
import {MatSort, MatSortModule} from '@angular/material/sort';
@@ -13,6 +13,7 @@ import {MatButton, MatIconButton} from '@angular/material/button';
import {MatIcon} from '@angular/material/icon';
import {FormBuilder, ReactiveFormsModule} from '@angular/forms';
import {MatDialog, MatDialogModule} from '@angular/material/dialog';
import {forkJoin} from 'rxjs';
import {PsItem} from '../../interfaces/ps-item';
import {ProductListItem} from '../../interfaces/product-list-item';
@@ -60,19 +61,23 @@ export class PsProductCrudComponent implements OnInit {
filterCtrl = this.fb.control<string>('');
ngOnInit(): void {
// charger référentiels en parallèle
Promise.all([
this.ps.list('categories').toPromise(),
this.ps.list('manufacturers').toPromise(),
this.ps.list('suppliers').toPromise()
]).then(([cats, mans, sups]) => {
this.categories = cats ?? [];
this.catMap = new Map(this.categories.map(x => [x.id, x.name]));
this.manufacturers = mans ?? [];
this.manMap = new Map(this.manufacturers.map(x => [x.id, x.name]));
this.suppliers = sups ?? [];
this.supMap = new Map(this.suppliers.map(x => [x.id, x.name]));
this.reload();
forkJoin({
cats: this.ps.list('categories'),
mans: this.ps.list('manufacturers'),
sups: this.ps.list('suppliers')
}).subscribe({
next: ({cats, mans, sups}) => {
this.categories = cats ?? [];
this.catMap = new Map(this.categories.map(x => [x.id, x.name]));
this.manufacturers = mans ?? [];
this.manMap = new Map(this.manufacturers.map(x => [x.id, x.name]));
this.suppliers = sups ?? [];
this.supMap = new Map(this.suppliers.map(x => [x.id, x.name]));
this.reload();
},
error: err => {
console.error('Erreur lors du chargement des référentiels', err);
}
});
// filtre client
@@ -115,7 +120,7 @@ export class PsProductCrudComponent implements OnInit {
}
private bindProducts(p: (ProductListItem & { priceHt?: number })[]) {
const vat = 0.20; // valeur fixe utilisée pour calcul TTC en liste
const vat = 0.2;
this.dataSource.data = p.map(x => ({
...x,
categoryName: x.id_category_default ? (this.catMap.get(x.id_category_default) ?? '') : '',