add sort with angular material

This commit is contained in:
Marcel-Anker
2025-11-22 16:25:04 +01:00
parent 6c13b5ab3f
commit c10da6f213
3 changed files with 102 additions and 95 deletions

View File

@@ -2,40 +2,29 @@
<h2 class="text-2xl font-bold flex flex justify-center gradient-text"> Movie-Statistiken </h2>
<mat-form-field appearance="fill">
<mat-label>Filter</mat-label>
<mat-select (selectionChange)="filterByCategory($event.value)">
<mat-option value="na" class="flex justify-center"></mat-option>
@for(filterValue of valuesToFilter; track $index){
<mat-option [value]="filterValue" class="flex justify-center"> {{filterValue}} </mat-option>
}
</mat-select>
</mat-form-field>
<div class="table-table-container">
<table mat-table [dataSource]="movies" class="example-table">
<table mat-table [dataSource]="moviesDS" matSort #movieSort="matSort" class="example-table">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th>
<ng-container matColumnDef="movieId">
<th mat-header-cell *matHeaderCellDef mat-sort-header="movieId" sortActionDescription="Sort by movieId">ID</th>
<td mat-cell *matCellDef="let row">{{row.movieId}}</td>
</ng-container>
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef>Titel</th>
<ng-container matColumnDef="movieTitle">
<th mat-header-cell *matHeaderCellDef mat-sort-header="movieTitle" sortActionDescription="Sort by movieTitle">Titel</th>
<td mat-cell *matCellDef="let row">{{row.movieTitle}}</td>
</ng-container>
<ng-container matColumnDef="earnings">
<th mat-header-cell *matHeaderCellDef>
<ng-container matColumnDef="movieEarnings">
<th mat-header-cell *matHeaderCellDef mat-sort-header="earnings" sortActionDescription="Sort by movieEarnings">
Umsatz
</th>
<td mat-cell *matCellDef="let row">{{(row.earnings/100).toFixed(2)}} €</td>
</ng-container>
<ng-container matColumnDef="tickets">
<th mat-header-cell *matHeaderCellDef>
<ng-container matColumnDef="movieTickets">
<th mat-header-cell *matHeaderCellDef mat-sort-header="tickets" sortActionDescription="Sort by movieTickets">
Gebuchte Tickets
</th>
<td mat-cell *matCellDef="let row">{{row.tickets}}</td>
@@ -52,38 +41,38 @@
<h2 class="text-2xl font-bold flex flex justify-center gradient-text"> Show-Statistiken </h2>
<div class="show-table-container">
<table mat-table [dataSource]="shows" class="example-table">
<table mat-table [dataSource]="showsDS" matSort #showSort="matSort" class="example-table">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef>ID</th>
<ng-container matColumnDef="showId">
<th mat-header-cell *matHeaderCellDef mat-sort-header="showId">ID</th>
<td mat-cell *matCellDef="let row">{{row.showId}}</td>
</ng-container>
<ng-container matColumnDef="hall">
<th mat-header-cell *matHeaderCellDef>Kinosaal</th>
<ng-container matColumnDef="showHall">
<th mat-header-cell *matHeaderCellDef mat-sort-header="showHallName">Kinosaal</th>
<td mat-cell *matCellDef="let row">{{row.showHallName}}</td>
</ng-container>
<ng-container matColumnDef="movie_title">
<th mat-header-cell *matHeaderCellDef>Film Name</th>
<ng-container matColumnDef="showMovieTitle">
<th mat-header-cell *matHeaderCellDef mat-sort-header="movieTitle">Film Name</th>
<td mat-cell *matCellDef="let row">{{row.movieTitle}}</td>
</ng-container>
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef>Datum</th>
<ng-container matColumnDef="showDate">
<th mat-header-cell *matHeaderCellDef mat-sort-header="showStart">Datum</th>
<td mat-cell *matCellDef="let row">{{formatDate(row.showStart)}}</td>
</ng-container>
<ng-container matColumnDef="earnings">
<th mat-header-cell *matHeaderCellDef>
<ng-container matColumnDef="showEarnings">
<th mat-header-cell *matHeaderCellDef mat-sort-header="earnings">
Umsatz
</th>
<td mat-cell *matCellDef="let row">{{(row.earnings/100).toFixed(2)}} €</td>
</ng-container>
<ng-container matColumnDef="tickets">
<th mat-header-cell *matHeaderCellDef>
<ng-container matColumnDef="showTickets">
<th mat-header-cell *matHeaderCellDef mat-sort-header="tickets">
Gebuchte Tickets
</th>
<td mat-cell *matCellDef="let row">{{row.tickets}}</td>