add sort with angular material
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user