Add loading indicators to product CRUD and dialog components
This commit is contained in:
Vincent Guillet
@@ -1,162 +1,183 @@
|
||||
<h2 mat-dialog-title>{{ mode === 'create' ? 'Nouveau produit' : 'Modifier le produit' }}</h2>
|
||||
|
||||
<div mat-dialog-content class="grid" [formGroup]="form">
|
||||
<div class="dialog-root">
|
||||
<!-- Overlay de chargement -->
|
||||
@if (isSaving) {
|
||||
<div class="dialog-loading-overlay">
|
||||
<mat-spinner diameter="48"></mat-spinner>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- CARROUSEL IMAGES -->
|
||||
<div class="col-12 carousel">
|
||||
<div class="carousel-main">
|
||||
<div mat-dialog-content class="grid" [formGroup]="form">
|
||||
|
||||
<!-- Bouton précédent -->
|
||||
<button mat-icon-button
|
||||
class="carousel-nav-btn left"
|
||||
(click)="prev()"
|
||||
[disabled]="carouselItems.length <= 1">
|
||||
<mat-icon>chevron_left</mat-icon>
|
||||
</button>
|
||||
<!-- CARROUSEL IMAGES -->
|
||||
<div class="col-12 carousel">
|
||||
<div class="carousel-main">
|
||||
|
||||
<!-- Image principale ou placeholder -->
|
||||
@if (carouselItems.length && !carouselItems[currentIndex].isPlaceholder) {
|
||||
<img [src]="carouselItems[currentIndex].src" alt="Produit">
|
||||
} @else {
|
||||
<div class="carousel-placeholder" (click)="fileInput.click()">
|
||||
<mat-icon>add_photo_alternate</mat-icon>
|
||||
<span>Ajouter des images</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Bouton suivant -->
|
||||
<button mat-icon-button
|
||||
class="carousel-nav-btn right"
|
||||
(click)="next()"
|
||||
[disabled]="carouselItems.length <= 1">
|
||||
<mat-icon>chevron_right</mat-icon>
|
||||
</button>
|
||||
|
||||
<!-- Bouton de suppression (croix rouge) -->
|
||||
@if (carouselItems.length && !carouselItems[currentIndex].isPlaceholder) {
|
||||
<!-- Bouton précédent -->
|
||||
<button mat-icon-button
|
||||
class="carousel-delete-btn"
|
||||
(click)="onDeleteCurrentImage()">
|
||||
<mat-icon>delete</mat-icon>
|
||||
class="carousel-nav-btn left"
|
||||
(click)="prev()"
|
||||
[disabled]="carouselItems.length <= 1">
|
||||
<mat-icon>chevron_left</mat-icon>
|
||||
</button>
|
||||
}
|
||||
|
||||
<!-- Bouton suivant -->
|
||||
<button mat-icon-button
|
||||
class="carousel-nav-btn right"
|
||||
(click)="next()"
|
||||
[disabled]="carouselItems.length <= 1">
|
||||
<mat-icon>chevron_right</mat-icon>
|
||||
</button>
|
||||
<!-- Image principale ou placeholder -->
|
||||
@if (carouselItems.length && !carouselItems[currentIndex].isPlaceholder) {
|
||||
<img [src]="carouselItems[currentIndex].src" alt="Produit">
|
||||
} @else {
|
||||
<div class="carousel-placeholder" (click)="fileInput.click()">
|
||||
<mat-icon>add_photo_alternate</mat-icon>
|
||||
<span>Ajouter des images</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Bouton suivant -->
|
||||
<button mat-icon-button
|
||||
class="carousel-nav-btn right"
|
||||
(click)="next()"
|
||||
[disabled]="carouselItems.length <= 1">
|
||||
<mat-icon>chevron_right</mat-icon>
|
||||
</button>
|
||||
|
||||
<!-- Bouton de suppression (croix rouge) -->
|
||||
@if (carouselItems.length && !carouselItems[currentIndex].isPlaceholder) {
|
||||
<button mat-icon-button
|
||||
class="carousel-delete-btn"
|
||||
(click)="onDeleteCurrentImage()">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
}
|
||||
|
||||
<!-- Bouton suivant -->
|
||||
<button mat-icon-button
|
||||
class="carousel-nav-btn right"
|
||||
(click)="next()"
|
||||
[disabled]="carouselItems.length <= 1">
|
||||
<mat-icon>chevron_right</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Bandeau de vignettes -->
|
||||
<div class="carousel-thumbs">
|
||||
@for (item of carouselItems; let i = $index; track item) {
|
||||
<div class="thumb-item"
|
||||
[class.active]="i === currentIndex"
|
||||
(click)="onThumbClick(i)">
|
||||
@if (!item.isPlaceholder) {
|
||||
|
||||
<!-- Bouton suppression vignette -->
|
||||
<button mat-icon-button
|
||||
class="thumb-delete-btn"
|
||||
(click)="onDeleteThumb(i, $event)">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
|
||||
<img class="thumb-img" [src]="item.src" alt="Vignette produit">
|
||||
} @else {
|
||||
<div class="thumb-placeholder" (click)="fileInput.click()">
|
||||
<mat-icon>add</mat-icon>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Input réel, caché -->
|
||||
<input #fileInput type="file" multiple hidden (change)="onFiles($event)">
|
||||
</div>
|
||||
|
||||
<!-- Bandeau de vignettes -->
|
||||
<div class="carousel-thumbs">
|
||||
@for (item of carouselItems; let i = $index; track item) {
|
||||
<div class="thumb-item"
|
||||
[class.active]="i === currentIndex"
|
||||
(click)="onThumbClick(i)">
|
||||
@if (!item.isPlaceholder) {
|
||||
<!-- 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>
|
||||
|
||||
<!-- Bouton suppression vignette -->
|
||||
<button mat-icon-button
|
||||
class="thumb-delete-btn"
|
||||
(click)="onDeleteThumb(i, $event)">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
<!-- 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>
|
||||
|
||||
<img class="thumb-img" [src]="item.src" alt="Vignette produit">
|
||||
} @else {
|
||||
<div class="thumb-placeholder" (click)="fileInput.click()">
|
||||
<mat-icon>add</mat-icon>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<!-- Sélecteur pour la catégorie -->
|
||||
<mat-form-field class="col-6">
|
||||
<mat-label>Catégorie</mat-label>
|
||||
<mat-select formControlName="categoryId">
|
||||
<mat-option [value]="null" disabled>Choisir…</mat-option>
|
||||
@for (c of categories; track c.id) {
|
||||
<mat-option [value]="c.id">{{ c.name }}</mat-option>
|
||||
}
|
||||
</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">
|
||||
<mat-option [value]="null" disabled>Choisir…</mat-option>
|
||||
@for (m of manufacturers; track m.id) {
|
||||
<mat-option [value]="m.id">{{ m.name }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Sélecteur pour la plateforme (Fournisseur) -->
|
||||
<mat-form-field class="col-6">
|
||||
<mat-label>Plateforme</mat-label>
|
||||
<mat-select formControlName="supplierId">
|
||||
<mat-option [value]="null" disabled>Choisir…</mat-option>
|
||||
@for (s of suppliers; track s.id) {
|
||||
<mat-option [value]="s.id">{{ s.name }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</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>
|
||||
|
||||
<!-- Input réel, caché -->
|
||||
<input #fileInput type="file" multiple hidden (change)="onFiles($event)">
|
||||
<!-- 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">
|
||||
</mat-form-field>
|
||||
</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">
|
||||
<mat-option [value]="null" disabled>Choisir…</mat-option>
|
||||
@for (c of categories; track c.id) {
|
||||
<mat-option [value]="c.id">{{ c.name }}</mat-option>
|
||||
}
|
||||
</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">
|
||||
<mat-option [value]="null" disabled>Choisir…</mat-option>
|
||||
@for (m of manufacturers; track m.id) {
|
||||
<mat-option [value]="m.id">{{ m.name }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Sélecteur pour la plateforme (Fournisseur) -->
|
||||
<mat-form-field class="col-6">
|
||||
<mat-label>Plateforme</mat-label>
|
||||
<mat-select formControlName="supplierId">
|
||||
<mat-option [value]="null" disabled>Choisir…</mat-option>
|
||||
@for (s of suppliers; track s.id) {
|
||||
<mat-option [value]="s.id">{{ s.name }}</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</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>
|
||||
|
||||
<!-- 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">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div mat-dialog-actions>
|
||||
<button mat-button (click)="close()">Annuler</button>
|
||||
<button mat-raised-button color="primary" (click)="save()" [disabled]="form.invalid">
|
||||
{{ mode === 'create' ? 'Créer' : 'Enregistrer' }}
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button
|
||||
(click)="close()"
|
||||
[disabled]="isSaving">
|
||||
Annuler
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button mat-raised-button
|
||||
color="primary"
|
||||
(click)="save()"
|
||||
[disabled]="form.invalid || isSaving">
|
||||
@if (!isSaving) {
|
||||
Enregistrer
|
||||
} @else {
|
||||
Enregistrement...
|
||||
}
|
||||
</button>
|
||||
</mat-dialog-actions>
|
||||
|
||||
Reference in New Issue
Block a user