feat: add quantity field to product CRUD; implement image upload and condition handling in product dialog

This commit is contained in:
Vincent Guillet
2025-11-18 15:38:24 +01:00
parent bcc71b965b
commit d4ffcf0562
5 changed files with 691 additions and 298 deletions

View File

@@ -1,11 +1,37 @@
<h2 mat-dialog-title>{{ mode === 'create' ? 'Nouveau produit' : 'Modifier le produit' }}</h2>
<div mat-dialog-content class="grid" [formGroup]="form">
<mat-form-field class="col-6">
<!-- Input pour l'upload des images -->
<div class="col-12">
<label for="fileInput">Images du produit</label>
<input type="file" multiple (change)="onFiles($event)">
</div>
<!-- Affichage des vignettes des images existantes en mode édition -->
@if (mode==='edit' && existingImageUrls.length) {
<div class="col-12">
<div class="thumbs">
@for (url of existingImageUrls; track url) {
<img [src]="url" alt="Produit">
}
</div>
</div>
}
<!-- Input pour le nom du produit -->
<mat-form-field class="col-12">
<mat-label>Nom du produit</mat-label>
<input matInput formControlName="name" autocomplete="off">
</mat-form-field>
<!-- Textarea pour la description -->
<mat-form-field class="col-12">
<mat-label>Description</mat-label>
<textarea matInput rows="4" formControlName="description"></textarea>
</mat-form-field>
<!-- Sélecteur pour la catégorie -->
<mat-form-field class="col-6">
<mat-label>Catégorie</mat-label>
<mat-select formControlName="categoryId">
@@ -16,6 +42,17 @@
</mat-select>
</mat-form-field>
<!-- Sélecteur pour l'état du produit -->
<mat-form-field class="col-6">
<mat-label>État</mat-label>
<mat-select formControlName="conditionLabel">
@for (opt of conditionOptions; track opt) {
<mat-option [value]="opt">{{ opt }}</mat-option>
}
</mat-select>
</mat-form-field>
<!-- Sélecteur pour la marque -->
<mat-form-field class="col-6">
<mat-label>Marque</mat-label>
<mat-select formControlName="manufacturerId">
@@ -26,8 +63,9 @@
</mat-select>
</mat-form-field>
<!-- Sélecteur pour la plateforme (Fournisseur) -->
<mat-form-field class="col-6">
<mat-label>Fournisseur</mat-label>
<mat-label>Plateforme</mat-label>
<mat-select formControlName="supplierId">
<mat-option [value]="null" disabled>Choisir…</mat-option>
@for (s of suppliers; track s.id) {
@@ -36,34 +74,19 @@
</mat-select>
</mat-form-field>
<mat-form-field class="col-12">
<mat-label>Description</mat-label>
<textarea matInput rows="4" formControlName="description"></textarea>
</mat-form-field>
<!-- Checkboxes pour Complet/Notice -->
<div class="col-12 flags">
<mat-checkbox formControlName="complete">Complet</mat-checkbox>
<mat-checkbox formControlName="hasManual">Notice</mat-checkbox>
</div>
<div class="col-12">
<label for="fileInput">Images du produit</label>
<input type="file" multiple (change)="onFiles($event)">
</div>
<div class="col-12" *ngIf="mode==='edit' && existingImageUrls.length">
<div class="thumbs">
@for (url of existingImageUrls; track url) {
<img [src]="url" alt="Produit">
}
</div>
</div>
<!-- Inputs pour le prix -->
<mat-form-field class="col-4">
<mat-label>Prix TTC (€)</mat-label>
<input matInput type="number" step="0.01" min="0" formControlName="priceTtc">
</mat-form-field>
<!-- Input pour la quantité -->
<mat-form-field class="col-4">
<mat-label>Quantité</mat-label>
<input matInput type="number" step="1" min="0" formControlName="quantity">