99 lines
3.3 KiB
HTML
99 lines
3.3 KiB
HTML
<section class="crud">
|
|
<div class="toolbar">
|
|
<button mat-raised-button
|
|
color="primary"
|
|
(click)="create()"
|
|
[disabled]="isLoading">
|
|
<mat-icon>add</mat-icon> Nouveau produit
|
|
</button>
|
|
|
|
<mat-form-field appearance="outline" class="filter">
|
|
<mat-label>Filtrer</mat-label>
|
|
<input matInput
|
|
[formControl]="filterCtrl"
|
|
placeholder="Nom, ID, catégorie, marque, fournisseur…"
|
|
[disabled]="isLoading">
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="mat-elevation-z2 product-list-root">
|
|
<!-- Overlay de chargement -->
|
|
<div class="product-list-loading-overlay" *ngIf="isLoading">
|
|
<mat-spinner diameter="48"></mat-spinner>
|
|
</div>
|
|
|
|
<table mat-table [dataSource]="dataSource" matSort>
|
|
|
|
<ng-container matColumnDef="id">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
|
|
<td mat-cell *matCellDef="let el">{{ el.id }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="name">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Nom</th>
|
|
<td mat-cell *matCellDef="let el">{{ el.name }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="category">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Catégorie</th>
|
|
<td mat-cell *matCellDef="let el">{{ el.categoryName }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="manufacturer">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Marque</th>
|
|
<td mat-cell *matCellDef="let el">{{ el.manufacturerName }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="supplier">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Fournisseur</th>
|
|
<td mat-cell *matCellDef="let el">{{ el.supplierName }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="priceTtc">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Prix TTC (€)</th>
|
|
<td mat-cell *matCellDef="let el">{{ el.priceTtc | number:'1.2-2' }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="quantity">
|
|
<th mat-header-cell *matHeaderCellDef mat-sort-header>Quantité</th>
|
|
<td mat-cell *matCellDef="let el">{{ el.quantity }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="actions">
|
|
<th mat-header-cell *matHeaderCellDef>Actions</th>
|
|
<td mat-cell *matCellDef="let el">
|
|
<button mat-icon-button
|
|
aria-label="edit"
|
|
(click)="edit(el)"
|
|
[disabled]="isLoading">
|
|
<mat-icon>edit</mat-icon>
|
|
</button>
|
|
<button mat-icon-button
|
|
color="warn"
|
|
aria-label="delete"
|
|
(click)="remove(el)"
|
|
[disabled]="isLoading">
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="displayed"></tr>
|
|
<tr mat-row *matRowDef="let row; columns: displayed;"></tr>
|
|
|
|
<tr class="mat-row" *matNoDataRow>
|
|
<td class="mat-cell" [attr.colspan]="displayed.length">
|
|
Aucune donnée.
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<mat-paginator
|
|
[pageSizeOptions]="[5,10,25,100]"
|
|
[pageSize]="10"
|
|
aria-label="Pagination"
|
|
[disabled]="isLoading">
|
|
</mat-paginator>
|
|
</div>
|
|
</section>
|