78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
import {AfterViewInit, Component, ViewChild} from '@angular/core';
|
|
import {Player} from "../../model/player";
|
|
import {PlayerService} from "../../service/player.service";
|
|
import {RouterLink} from "@angular/router";
|
|
import {MatAnchor} from "@angular/material/button";
|
|
import {MatIcon} from "@angular/material/icon";
|
|
import {MatCard, MatCardContent} from "@angular/material/card";
|
|
import {FullNamePipe} from "../../pipes/fullname-pipe";
|
|
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',
|
|
imports: [RouterLink, MatAnchor, MatIcon, MatCard, 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',
|
|
standalone: true,
|
|
styleUrl: './player-list.component.scss'
|
|
})
|
|
export class PlayerListComponent implements AfterViewInit {
|
|
|
|
players: Player[];
|
|
|
|
displayedColumns: string[] = ['id', 'name', 'sex', 'club', 'action'];
|
|
dataSource: MatTableDataSource<Player>
|
|
@ViewChild(MatPaginator) paginator: MatPaginator;
|
|
@ViewChild(MatSort) sort: MatSort;
|
|
|
|
constructor(
|
|
private playerService: PlayerService,
|
|
private fullNamePipe: FullNamePipe) {
|
|
}
|
|
|
|
ngAfterViewInit() {
|
|
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 'id': return item.id;
|
|
case 'club': return item.club;
|
|
default: return item.lastName + item.firstName;
|
|
}
|
|
}
|
|
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;
|
|
}
|