Filter SimpleTransition by StateLabel

src/app/editor/gamesystem-editor/simple-gamesystem-editor/simple-gamesystem-editor.component.html

@@ -1,2 +1,4 @@
 <app-simple-state-editor [states]="simpleGamesystem!.states" [gamesystem]="simpleGamesystem"></app-simple-state-editor>
-<app-simple-transition-editor class="transition-editor" [gamesystem]="simpleGamesystem"></app-simple-transition-editor>
+<div id="transition-editor">
+  <app-simple-transition-editor [gamesystem]="simpleGamesystem"></app-simple-transition-editor>
+</div>

src/app/editor/gamesystem-editor/simple-gamesystem-editor/simple-gamesystem-editor.component.scss

@@ -1,3 +1,4 @@
-.transition-editor {
+#transition-editor {
-  margin-top: 15px;
+  margin-top: 20px !important;
+
 }

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

@@ -1,4 +1,6 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" multiTemplateDataRows>
+<mat-card>
+  <mat-card-content>
+    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" multiTemplateDataRows>
       <ng-container matColumnDef="name">
         <th mat-header-cell *matHeaderCellDef>Label</th>
         <td mat-cell *matCellDef="let state">
@@ -74,4 +76,7 @@
           (click)="expandedElement = expandedElement === element ? null : element">
       </tr>
       <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
-</table>
+    </table>
+
+  </mat-card-content>
+</mat-card>

src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.html

@@ -1,4 +1,11 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" multiTemplateDataRows>
+<mat-card>
+  <mat-card-content>
+    <mat-form-field 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" multiTemplateDataRows>
       <ng-container matColumnDef="starting-state">
         <th mat-header-cell *matHeaderCellDef>Starting State</th>
         <td mat-cell *matCellDef="let transition">
@@ -78,4 +85,7 @@
           (click)="expandedElement = expandedElement === element ? null : element">
       </tr>
       <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
-</table>
+    </table>
+
+  </mat-card-content>
+</mat-card>

src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.ts

@@ -13,6 +13,8 @@ import {
 import {SimpleTransition} from "../../../../game-model/gamesystems/SimpleTransition";
 import {animate, state, style, transition, trigger} from "@angular/animations";
 import {SimpleState} from "../../../../game-model/gamesystems/SimpleState";
+import {ProductTransition} from "../../../../game-model/gamesystems/ProductTransition";
+import {LeafGamesystemCalculator} from "../../product-gamesystem-editor/LeafGamesystemCalculator";
 
 @Component({
   selector: 'app-simple-transition-editor',
@@ -44,6 +46,9 @@ export class SimpleTransitionEditorComponent implements OnInit {
   transitionEndingStateError = true;
   ngOnInit() {
     this.dataSource.data = this.gamesystem!.transitions;
+    this.dataSource.filterPredicate = (data: SimpleTransition, filter: string) => {
+      return [data.startingState, data.endingState].some((state) => state.stateLabel.toLowerCase().includes(filter))
+    }
   }
 
   addTransition() {
@@ -83,4 +88,9 @@ export class SimpleTransitionEditorComponent implements OnInit {
       this.dataSource.data = this.gamesystem!.transitions;
     }
   }
+
+  applyFilter(event: KeyboardEvent) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
 }