From da8ecac0f1bdb1c4ff1d5bbc2c18622f8e01d1af Mon Sep 17 00:00:00 2001 From: Michel ten Voorde Date: Thu, 24 Oct 2024 16:14:42 +0200 Subject: [PATCH] Pagination and sorting --- .../player-list/player-list.component.html | 64 ++++++++++--------- .../player-list/player-list.component.ts | 51 +++++++++++++-- .../tournament-edit.component.ts | 9 ++- 3 files changed, 87 insertions(+), 37 deletions(-) diff --git a/src/app/components/player-list/player-list.component.html b/src/app/components/player-list/player-list.component.html index e07d8e5..a616903 100644 --- a/src/app/components/player-list/player-list.component.html +++ b/src/app/components/player-list/player-list.component.html @@ -1,31 +1,30 @@ - - - person_add - Nieuwe speler - - - - - - - - - - - - - - - - - - + +
#NaamM/VClub
{{ player.id }}{{ player | fullName }}{{ player.sex }}{{ player.club }} + + Filter spelers + + +
+ + + + + + + + + + + + + + + + + + + + - - -
#{{ player.id }}Naam{{ player | fullName }}M/V{{ player.sex }}Club{{ player.club }} edit Bewerk @@ -35,9 +34,16 @@ Inschrijvingen
+ + +
+ + + person_add Nieuwe speler diff --git a/src/app/components/player-list/player-list.component.ts b/src/app/components/player-list/player-list.component.ts index b4951a5..4debf0a 100644 --- a/src/app/components/player-list/player-list.component.ts +++ b/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 + @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; diff --git a/src/app/components/tournament-edit/tournament-edit.component.ts b/src/app/components/tournament-edit/tournament-edit.component.ts index b07f317..d67147e 100644 --- a/src/app/components/tournament-edit/tournament-edit.component.ts +++ b/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.') }); } }