refactor: reorganize component files and update import paths; add PsItem and PsProduct interfaces

client/src/app/components/ps-product-crud/ps-product-crud.component.html

@@ -0,0 +1,64 @@
+<section class="crud">
+  <div class="toolbar">
+    <button mat-raised-button color="primary" (click)="create()">
+      <mat-icon>add</mat-icon>&nbsp;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…">
+    </mat-form-field>
+  </div>
+
+  <div class="mat-elevation-z2">
+    <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="actions">
+        <th mat-header-cell *matHeaderCellDef>Actions</th>
+        <td mat-cell *matCellDef="let el">
+          <button mat-icon-button (click)="edit(el)" aria-label="edit"><mat-icon>edit</mat-icon></button>
+          <button mat-icon-button color="warn" (click)="remove(el)" aria-label="delete"><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"></mat-paginator>
+  </div>
+</section>