From 02d9fcbbbaaee6442bc418d988d199cf40a2a1cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Fri, 16 Feb 2024 19:34:11 +0100
Subject: [PATCH] Filter ProductState after StateLabel

---
 src/app/app.module.ts                         |  5 ++-
 .../product-state-editor.component.html       | 34 ++++++++++++-------
 .../product-state-editor.component.scss       |  4 +++
 .../product-state-editor.component.ts         | 13 ++++++-
 4 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 0de963f..5009811 100644
--- a/src/app/app.module.ts
+++ b/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]
diff --git a/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.html b/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.html
index 2d7eda7..7ca4627 100644
--- a/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.html
+++ b/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.html
@@ -1,14 +1,22 @@
-<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">
-      <a *ngIf="i < displayedColumns.length-1" role="button" (click)="clickOnInnerState(i)" [matTooltip]="getLeafState(state, i).stateDescription">{{getLeafState(state, i).stateLabel}}</a>
-      <mat-icon *ngIf="i == displayedColumns.length-1">
-        {{state.initial? 'done':'close'}}
-      </mat-icon>
-    </td>
-  </ng-container>
+<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">
+          <a *ngIf="i < displayedColumns.length-1" role="button" (click)="clickOnInnerState(i)" [matTooltip]="getLeafState(state, i).stateDescription">{{getLeafState(state, i).stateLabel}}</a>
+          <mat-icon *ngIf="i == displayedColumns.length-1">
+            {{state.initial? 'done':'close'}}
+          </mat-icon>
+        </td>
+      </ng-container>
 
-  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-</table>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.scss b/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.scss
index d53103d..f2c3344 100644
--- a/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.scss
+++ b/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%;
+}
diff --git a/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.ts b/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.ts
index 8f8ad77..79a5880 100644
--- a/src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.ts
+++ b/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();
+  }
+
 }