Pagination and sorting

src/app/components/player-list/player-list.component.html

@@ -1,31 +1,30 @@
 <mat-card appearance="outlined">
-<!--
-  <mat-card-header>
-    <h5>Spelers</h5>
-  </mat-card-header>
--->
   <mat-card-content>
-    <a mat-button routerLink="/players/add">
-      <mat-icon>person_add</mat-icon>
-      Nieuwe speler
-    </a>
-    <table class="table table-hover">
-      <thead class="thead-dark">
-        <tr>
-          <th scope="col">#</th>
-          <th scope="col">Naam</th>
-          <th scope="col">M/V</th>
-          <th scope="col">Club</th>
-          <th scope="col"></th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let player of players">
-          <td class="align-middle">{{ player.id }}</td>
-          <td class="align-middle">{{ player | fullName }}</td>
-          <td class="align-middle">{{ player.sex }}</td>
-          <td class="align-middle">{{ player.club }}</td>
-          <td class="align-middle">
+    <mat-form-field appearance="outline">
+      <mat-label>Filter spelers</mat-label>
+      <input matInput (keyup)="filterPlayersList($event)" #input>
+    </mat-form-field>
+    <div>
+      <table mat-table [dataSource]="dataSource" matSort matSortActive="name" matSortDirection="asc">
+        <ng-container matColumnDef="position">
+          <th mat-header-cell *matHeaderCellDef>#</th>
+          <td mat-cell *matCellDef="let player">{{ player.id }}</td>
+        </ng-container>
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>Naam</th>
+          <td mat-cell *matCellDef="let player">{{ player | fullName }}</td>
+        </ng-container>
+        <ng-container matColumnDef="sex">
+          <th mat-header-cell *matHeaderCellDef>M/V</th>
+          <td mat-cell *matCellDef="let player">{{ player.sex }}</td>
+        </ng-container>
+        <ng-container matColumnDef="club">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>Club</th>
+          <td mat-cell *matCellDef="let player">{{ player.club }}</td>
+        </ng-container>
+        <ng-container matColumnDef="action">
+          <th mat-header-cell *matHeaderCellDef></th>
+          <td mat-cell *matCellDef="let player">
             <a mat-button [routerLink]="['/players/edit', player.id]">
               <mat-icon>edit</mat-icon>
               Bewerk
@@ -35,9 +34,16 @@
               Inschrijvingen
             </a>
           </td>
-        </tr>
-      </tbody>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
       </table>
+      <mat-paginator [pageSizeOptions]="[10, 20, 50]"
+                     showFirstLastButtons
+                     aria-label="Select page of periodic elements">
+      </mat-paginator>
+    </div>
     <a mat-button routerLink="/players/add">
       <mat-icon>person_add</mat-icon>
       Nieuwe speler

src/app/components/player-list/player-list.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
 import {Player} from "../../model/player";
 import {PlayerService} from "../../service/player.service";
 import {NgFor} from "@angular/common";
@@ -8,28 +8,69 @@ import {MatIcon} from "@angular/material/icon";
 import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card";
 import {FullNamePipe} from "../../pipes/fullname-pipe";
 import {TitleService} from "../../service/title.service";
+import {
+  MatCell,
+  MatCellDef,
+  MatColumnDef,
+  MatHeaderCell,
+  MatHeaderCellDef,
+  MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
+  MatTable, MatTableDataSource
+} from "@angular/material/table";
+import {MatFormField, MatFormFieldModule} from "@angular/material/form-field";
+import {MatInput} from "@angular/material/input";
+import {MatPaginator} from "@angular/material/paginator";
+import {MatSort, MatSortHeader} from "@angular/material/sort";
 
 @Component({
   selector: 'app-player-list',
   standalone: true,
-  imports: [NgFor, RouterLink, MatAnchor, MatIcon, MatCard, MatCardHeader, MatCardContent, FullNamePipe],
+  imports: [NgFor, RouterLink, MatAnchor, MatIcon, MatCard, MatCardHeader, MatCardContent, FullNamePipe, MatTable, MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef, MatFormField, MatInput, MatFormFieldModule, MatPaginator, MatSortHeader, MatSort],
+  providers: [FullNamePipe],
   templateUrl: './player-list.component.html',
   styleUrl: './player-list.component.scss'
 })
-export class PlayerListComponent implements OnInit {
+export class PlayerListComponent implements AfterViewInit {
 
   players: Player[];
 
+  displayedColumns: string[] = ['position', 'name', 'sex', 'club', 'action'];
+  dataSource: MatTableDataSource<Player>
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
+
   constructor(
     private titleService: TitleService,
-    private playerService: PlayerService) {
+    private playerService: PlayerService,
+    private fullNamePipe: FullNamePipe) {
   }
 
-  ngOnInit() {
+  ngAfterViewInit() {
     this.titleService.setTitle("Spelers");
     this.playerService.getAll().subscribe(data => {
       this.players = data;
+      this.dataSource = new MatTableDataSource(this.players);
+      this.dataSource.paginator = this.paginator;
+      this.dataSource.sortingDataAccessor = (item, header) => {
+        switch (header) {
+          case 'club': return item.club;
+          default: return item.lastName + item.firstName;
+          // case 'name': return this.fullNamePipe.transform(item);
+        }
+      }
+      this.dataSource.sort = this.sort;
     });
+
+    this.paginator._intl.itemsPerPageLabel = 'Spelers per pagina';
+    this.paginator._intl.firstPageLabel = '';
+    this.paginator._intl.previousPageLabel = '';
+    this.paginator._intl.nextPageLabel = '';
+    this.paginator._intl.lastPageLabel = '';
+  }
+
+  filterPlayersList(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
   }
 
   protected readonly Player = Player;

src/app/components/tournament-edit/tournament-edit.component.ts

@@ -13,6 +13,7 @@ import {CurrencyPipe, NgForOf, registerLocaleData} from "@angular/common";
 import nl from "@angular/common/locales/nl";
 import {TitleService} from "../../service/title.service";
 import {NgxMaskDirective, NgxMaskPipe} from "ngx-mask";
+import {MatSnackBar} from "@angular/material/snack-bar";
 
 registerLocaleData(nl);
 
@@ -56,7 +57,8 @@ export class TournamentEditComponent implements OnInit {
     private currencyPipe: CurrencyPipe,
     private route: ActivatedRoute,
     private router: Router,
-    private titleService: TitleService
+    private titleService: TitleService,
+    private _snackBar: MatSnackBar,
   ) {
     this.tournament = new Tournament();
   }
@@ -80,8 +82,9 @@ export class TournamentEditComponent implements OnInit {
         this.router.navigate(['/tournaments']);
       });
     } else {
-      this.tournamentService.save(this.tournament).subscribe(() => {
-        this.router.navigate(['/tournaments']);
+      this.tournamentService.save(this.tournament).subscribe({
+        next: () => this.router.navigate(['/tournaments']),
+        error: () => this._snackBar.open('Niet alle velden zijn correct gevuld.')
       });
     }
   }