Filter ProductState after StateLabel

src/app/app.module.ts

@@ -43,7 +43,7 @@ import {
   MatColumnDef,
   MatHeaderCell,
   MatHeaderCellDef,
-  MatHeaderRow, MatHeaderRowDef, MatNoDataRow, MatRow, MatRowDef,
+  MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
   MatTable
 } from "@angular/material/table";
 import {MatCheckbox} from "@angular/material/checkbox";
@@ -137,9 +137,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     MatOption,
     MatHint,
     MatTooltip,
-    MatCardContent,
     MatCard,
-    MatNoDataRow
+    MatCardContent
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.html

@@ -1,4 +1,10 @@
-<table mat-table [dataSource]="datasource" class="mat-elevation-z8">
+<mat-card>
+  <mat-card-content>
+    <mat-form-field appearance="fill" class="long-form">
+      <mat-label>Filter</mat-label>
+      <input matInput (keyup)="applyFilter($event)" placeholder="Filter" #input>
+    </mat-form-field>
+    <table mat-table [dataSource]="datasource" class="mat-elevation-z8">
       <ng-container *ngFor="let col of displayedColumns; let i = index" [matColumnDef]="col">
         <th mat-header-cell *matHeaderCellDef>{{col}}</th>
         <td mat-cell *matCellDef="let state">
@@ -11,4 +17,6 @@
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-</table>
+    </table>
+  </mat-card-content>
+</mat-card>

src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.scss

@@ -5,3 +5,7 @@ table {
 .mat-column-Initial {
   width: 32px;
 }
+
+.long-form {
+  width: 100%;
+}

src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.ts

@@ -7,6 +7,8 @@ import {
 import {SimpleState} from "../../../../game-model/gamesystems/SimpleState";
 import {State} from "../../../../game-model/gamesystems/State";
 import {LeafGamesystemCalculator} from "../../product-gamesystem-editor/LeafGamesystemCalculator";
+import {ProductTransition} from "../../../../game-model/gamesystems/ProductTransition";
+import {ProductState} from "../../../../game-model/gamesystems/ProductState";
 
 @Component({
   selector: 'app-product-state-editor',
@@ -18,7 +20,7 @@ export class ProductStateEditorComponent implements OnInit{
   @Input() gamesystem: ProductGamesystem | undefined
   @Output('onOpenGamesystemEditor') openGamesystemEditorEmitter = new EventEmitter<SimpleGamesystem>();
   displayedColumns: string[] = [];
-  datasource = new MatTableDataSource();
+  datasource = new MatTableDataSource<ProductState>();
 
 
   ngOnInit() {
@@ -26,6 +28,10 @@ export class ProductStateEditorComponent implements OnInit{
     this.generateColumnNamesRecursively(this.gamesystem!, "");
     this.displayedColumns.push('Initial');
     this.datasource.data = this.gamesystem!.states;
+    this.datasource.filterPredicate = (data: ProductState, filter: string) => {
+      const leaf_states = LeafGamesystemCalculator.calcLeafStates(data);
+      return leaf_states.some((state) => state.stateLabel.toLowerCase().includes(filter))
+    }
   }
 
   generateColumnNamesRecursively(gamesystem: ProductGamesystem, nestedColumnName: string) {
@@ -50,4 +56,9 @@ export class ProductStateEditorComponent implements OnInit{
     this.openGamesystemEditorEmitter.emit(clicked_gamesystem);
   }
 
+  applyFilter(event: KeyboardEvent) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.datasource.filter = filterValue.trim().toLowerCase();
+  }
+
 }