add sort with angular material

src/app/app-module.ts

@@ -28,6 +28,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatTableModule } from '@angular/material/table';
 import {MatSelectModule} from '@angular/material/select';
+import { MatSortModule } from '@angular/material/sort';
 
 import { HeaderComponent } from './header/header.component';
 import { HomeComponent } from './home/home.component';
@@ -78,6 +79,7 @@ import { PricelistComponent } from './pricelist/pricelist.component';
 
 
 
+
 @NgModule({
   declarations: [
     App,
@@ -128,39 +130,40 @@ import { PricelistComponent } from './pricelist/pricelist.component';
     CancelOrderDialog,
     PricelistComponent,
   ],
-    imports: [
-        AppRoutingModule,
-        BrowserModule,
-        ReactiveFormsModule,
-        CommonModule,
-        FormsModule,
-        MatIconModule,
-        MatTabsModule,
-        MatToolbarModule,
-        MatProgressBarModule,
-        MatProgressSpinnerModule,
-        MatSnackBarModule,
-        MatAutocompleteModule,
-        MatInputModule,
-        MatFormFieldModule,
-        MatIconButton,
-        MatDividerModule,
-        MatButtonModule,
-        MatDialogClose,
-        MatDialogTitle,
-        MatDialogContent,
-        MatDialogActions,
-        MatCheckboxModule,
-        MatStepperModule,
-        NgxMaskDirective,
-        NgxMaskPipe,
-        QRCodeComponent,
-        MatBadgeModule,
-        MatTooltipModule,
-        MatPaginatorModule,
-        MatTableModule,
-        MatSelectModule,
-    ],
+  imports: [
+    AppRoutingModule,
+    BrowserModule,
+    ReactiveFormsModule,
+    CommonModule,
+    FormsModule,
+    MatIconModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatSnackBarModule,
+    MatAutocompleteModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatIconButton,
+    MatDividerModule,
+    MatButtonModule,
+    MatDialogClose,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatCheckboxModule,
+    MatStepperModule,
+    NgxMaskDirective,
+    NgxMaskPipe,
+    QRCodeComponent,
+    MatBadgeModule,
+    MatTooltipModule,
+    MatPaginatorModule,
+    MatTableModule,
+    MatSelectModule,
+    MatSortModule,
+  ],
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideHttpClient(

src/app/statistics/statistics.component.html

@@ -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>

src/app/statistics/statistics.component.ts

@@ -1,11 +1,15 @@
-import {Component, inject} from '@angular/core';
+import {Component, effect, inject, signal, ViewChild} from '@angular/core';
+import {MatSort, Sort, MatSortModule} from '@angular/material/sort';
 import {HttpService} from '../http.service';
 import {
   StatisticsFilm,
   StatisticsVorstellung,
 } from '@infinimotion/model-frontend';
 import {LoadingService} from '../loading.service';
-import {filter, firstValueFrom, forkJoin} from 'rxjs';
+import {firstValueFrom} from 'rxjs';
+import {MatTableDataSource} from '@angular/material/table';
+import {MatPaginatorModule} from '@angular/material/paginator';
+
 
 @Component({
   selector: 'app-statistics',
@@ -15,19 +19,30 @@ import {filter, firstValueFrom, forkJoin} from 'rxjs';
 })
 export class StatisticsComponent {
   private http = inject(HttpService);
-  protected movies: StatisticsFilm[] = [];
-  protected shows: StatisticsVorstellung[] = [];
-  protected moviesDisplayedColumns: string[] = ['id', 'title', 'earnings', 'tickets'];
-  protected showsDisplayedColumns: string[] = ['id', 'hall', 'movie_title', 'date', 'earnings', 'tickets'];
-  protected valuesToFilter: string[] = ['title', 'date', 'earnings', 'tickets'];
+  protected movies = signal<StatisticsFilm[]>([]);
+  protected shows = signal<StatisticsVorstellung[]>([]);
+  protected moviesDisplayedColumns: string[] = ['movieId', 'movieTitle', 'movieEarnings', 'movieTickets'];
+  protected showsDisplayedColumns: string[] = ['showId', 'showHall', 'showMovieTitle', 'showDate', 'showEarnings', 'showTickets'];
   protected movieResultsLength: number = 0;
   protected showsResultLength: number = 0;
+  protected moviesDS = new MatTableDataSource<StatisticsFilm>();
+  protected showsDS = new MatTableDataSource<StatisticsVorstellung>();
+
+  // Sorting + Pagination
+  @ViewChild('movieSort') movieSort!: MatSort;
+  @ViewChild('showSort') showSort!: MatSort;
 
   private loading = inject(LoadingService);
 
   ngOnInit(): void {
     this.loading.show()
     this.loadData().then();
+    this.setupSortingAccessors()
+  }
+
+  ngAfterViewInit() {
+    this.moviesDS.sort = this.movieSort;
+    this.showsDS.sort = this.showSort;
   }
 
   async loadData() {
@@ -35,8 +50,10 @@ export class StatisticsComponent {
     let showRequest = this.http.getShowStatistics();
     let movieResponse = await firstValueFrom(movieRequest);
     let showResponse = await firstValueFrom(showRequest);
-    this.movies = movieResponse
-    this.shows = showResponse
+    this.movies.set(movieResponse);
+    this.shows.set(showResponse);
+    this.moviesDS.data = movieResponse;
+    this.showsDS.data = showResponse;
     if (this.movies.length / 30 < 1) {
       this.movieResultsLength = 1;
     } else {
@@ -54,26 +71,24 @@ export class StatisticsComponent {
     return new Date(date).toLocaleString("de");
   }
 
-  filterByCategory(filter: string) {
-    switch (filter) {
-      case this.valuesToFilter[0]: //title
-        this.movies = this.movies.sort((a, b) => a.movieTitle.localeCompare(b.movieTitle));
-        this.shows = this.shows.sort((a, b) => a.movieTitle.localeCompare(b.movieTitle));
-        //console.log(this.movies, this.shows);
-        break;
-      case this.valuesToFilter[1]: //date
-        this.shows = this.shows.sort((a,b) => new Date(a.showStart).getTime() - new Date(b.showStart).getTime());
-        break;
-      case this.valuesToFilter[2]: //earnings
-        this.movies = this.movies.sort((a, b) => a.earnings - b.earnings);
-        this.shows = this.shows.sort((a, b) => a.earnings - b.earnings);
-        break;
-      case this.valuesToFilter[3]:  //tickets
-        this.movies = this.movies.sort((a, b) => a.tickets - b.tickets);
-        this.shows = this.shows.sort((a, b) => a.tickets - b.tickets);
-        break;
-      default:
-    }
+  private setupSortingAccessors() {
+    // Movies
+    this.moviesDS.sortingDataAccessor = (item, property) => {
+      switch (property) {
+        case 'earnings': return item.earnings;
+        case 'tickets':  return item.tickets;
+        default: return (item as any)[property];
+      }
+    };
 
+    // Shows
+    this.showsDS.sortingDataAccessor = (item, property) => {
+      switch (property) {
+        case 'showStart': return new Date(item.showStart).getTime();
+        case 'earnings':  return item.earnings;
+        case 'tickets':   return item.tickets;
+        default: return (item as any)[property];
+      }
+    };
   }
 }