From 41452f0b9dba42932a59eabbb2a542241a108581 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:51:16 +0100
Subject: [PATCH] Filter SimpleTransition by StateLabel

---
 .../simple-gamesystem-editor.component.html   |   4 +-
 .../simple-gamesystem-editor.component.scss   |   5 +-
 .../simple-state-editor.component.html        | 141 ++++++++--------
 .../simple-transition-editor.component.html   | 156 ++++++++++--------
 .../simple-transition-editor.component.ts     |  10 ++
 5 files changed, 172 insertions(+), 144 deletions(-)

diff --git a/src/app/editor/gamesystem-editor/simple-gamesystem-editor/simple-gamesystem-editor.component.html b/src/app/editor/gamesystem-editor/simple-gamesystem-editor/simple-gamesystem-editor.component.html
index 5ad3526..4b24edd 100644
--- a/src/app/editor/gamesystem-editor/simple-gamesystem-editor/simple-gamesystem-editor.component.html
+++ b/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>
diff --git a/src/app/editor/gamesystem-editor/simple-gamesystem-editor/simple-gamesystem-editor.component.scss b/src/app/editor/gamesystem-editor/simple-gamesystem-editor/simple-gamesystem-editor.component.scss
index 7112fce..bfc528d 100644
--- a/src/app/editor/gamesystem-editor/simple-gamesystem-editor/simple-gamesystem-editor.component.scss
+++ b/src/app/editor/gamesystem-editor/simple-gamesystem-editor/simple-gamesystem-editor.component.scss
@@ -1,3 +1,4 @@
-.transition-editor {
-  margin-top: 15px;
+#transition-editor {
+  margin-top: 20px !important;
+
 }
diff --git a/src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.html b/src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.html
index f723e19..f198dc9 100644
--- a/src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.html
+++ b/src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.html
@@ -1,77 +1,82 @@
-<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">
-      <span *ngIf="editedElement !== state"> {{state.stateLabel}}</span>
-      <mat-form-field appearance="fill" class="long-form" *ngIf="editedElement === state">
-        <input matInput [(ngModel)]="state.stateLabel" (ngModelChange)="onStateChange()">
-        <mat-hint class="mat-error" *ngIf="editedStateLabelError"><mat-icon class="warning-icon">warning</mat-icon>Missing State-Label Information</mat-hint>
-      </mat-form-field>
-    </td>
-  </ng-container>
+<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">
+          <span *ngIf="editedElement !== state"> {{state.stateLabel}}</span>
+          <mat-form-field appearance="fill" class="long-form" *ngIf="editedElement === state">
+            <input matInput [(ngModel)]="state.stateLabel" (ngModelChange)="onStateChange()">
+            <mat-hint class="mat-error" *ngIf="editedStateLabelError"><mat-icon class="warning-icon">warning</mat-icon>Missing State-Label Information</mat-hint>
+          </mat-form-field>
+        </td>
+      </ng-container>
 
-  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
-  <ng-container matColumnDef="expandedDetail">
-    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
-      <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
-        <p *ngIf="editedElement !== element">{{element.stateDescription}}</p>
-        <mat-form-field appearance="fill" class="long-form" *ngIf="element === editedElement">
-          <mat-label>Description</mat-label>
-          <textarea matInput [(ngModel)]="element.stateDescription" rows="3" (ngModelChange)="onStateChange()"></textarea>
-        </mat-form-field>
-      </div>
-    </td>
-  </ng-container>
+      <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
+      <ng-container matColumnDef="expandedDetail">
+        <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
+          <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
+            <p *ngIf="editedElement !== element">{{element.stateDescription}}</p>
+            <mat-form-field appearance="fill" class="long-form" *ngIf="element === editedElement">
+              <mat-label>Description</mat-label>
+              <textarea matInput [(ngModel)]="element.stateDescription" rows="3" (ngModelChange)="onStateChange()"></textarea>
+            </mat-form-field>
+          </div>
+        </td>
+      </ng-container>
 
 
 
-  <ng-container matColumnDef="initial">
-    <th mat-header-cell *matHeaderCellDef>Initial</th>
-    <td mat-cell *matCellDef="let state">
-      <div *ngIf="editedElement !== state">
-        <mat-icon *ngIf="state.initial">done</mat-icon>
-        <mat-icon *ngIf="!state.initial">close</mat-icon>
-      </div>
-      <mat-checkbox *ngIf="editedElement === state" [(ngModel)]="state.initial" (ngModelChange)="onStateChange()"></mat-checkbox>
+      <ng-container matColumnDef="initial">
+        <th mat-header-cell *matHeaderCellDef>Initial</th>
+        <td mat-cell *matCellDef="let state">
+          <div *ngIf="editedElement !== state">
+            <mat-icon *ngIf="state.initial">done</mat-icon>
+            <mat-icon *ngIf="!state.initial">close</mat-icon>
+          </div>
+          <mat-checkbox *ngIf="editedElement === state" [(ngModel)]="state.initial" (ngModelChange)="onStateChange()"></mat-checkbox>
 
-    </td>
-  </ng-container>
+        </td>
+      </ng-container>
 
-  <ng-container matColumnDef="edit">
-    <th mat-header-cell *matHeaderCellDef></th>
-    <td mat-cell *matCellDef="let state">
-      <button mat-icon-button color="primary" *ngIf="editedElement !== state" (click)="editState(state)" [disabled]="editedElement !== null"><mat-icon>edit</mat-icon></button>
-      <button mat-icon-button color="primary" (click)="finishEditing()" *ngIf="editedElement === state"><mat-icon>done</mat-icon></button>
-    </td>
-  </ng-container>
+      <ng-container matColumnDef="edit">
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let state">
+          <button mat-icon-button color="primary" *ngIf="editedElement !== state" (click)="editState(state)" [disabled]="editedElement !== null"><mat-icon>edit</mat-icon></button>
+          <button mat-icon-button color="primary" (click)="finishEditing()" *ngIf="editedElement === state"><mat-icon>done</mat-icon></button>
+        </td>
+      </ng-container>
 
-  <ng-container matColumnDef="delete">
-    <th mat-header-cell *matHeaderCellDef></th>
-    <td mat-cell *matCellDef="let state">
-      <button mat-icon-button color="warn" (click)="deleteState(state)"><mat-icon>delete</mat-icon></button>
-    </td>
-  </ng-container>
+      <ng-container matColumnDef="delete">
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let state">
+          <button mat-icon-button color="warn" (click)="deleteState(state)"><mat-icon>delete</mat-icon></button>
+        </td>
+      </ng-container>
 
-  <ng-container matColumnDef="expand">
-    <th mat-header-cell *matHeaderCellDef aria-label="row actions">
-      <button mat-icon-button (click)="addState()"><mat-icon>add</mat-icon></button>
-    </th>
-    <td mat-cell *matCellDef="let element">
-      <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
-        @if (expandedElement === element) {
-          <mat-icon>keyboard_arrow_up</mat-icon>
-        } @else {
-          <mat-icon>keyboard_arrow_down</mat-icon>
-        }
-      </button>
-    </td>
-  </ng-container>
+      <ng-container matColumnDef="expand">
+        <th mat-header-cell *matHeaderCellDef aria-label="row actions">
+          <button mat-icon-button (click)="addState()"><mat-icon>add</mat-icon></button>
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
+            @if (expandedElement === element) {
+              <mat-icon>keyboard_arrow_up</mat-icon>
+            } @else {
+              <mat-icon>keyboard_arrow_down</mat-icon>
+            }
+          </button>
+        </td>
+      </ng-container>
 
-  <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
-  <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
-      class="example-element-row"
-      [class.example-expanded-row]="expandedElement === element"
-      (click)="expandedElement = expandedElement === element ? null : element">
-  </tr>
-  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
-</table>
+      <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
+      <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
+          class="example-element-row"
+          [class.example-expanded-row]="expandedElement === element"
+          (click)="expandedElement = expandedElement === element ? null : element">
+      </tr>
+      <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
+    </table>
+
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.html b/src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.html
index 1ad5505..0834eb0 100644
--- a/src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.html
+++ b/src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.html
@@ -1,81 +1,91 @@
-<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">
-      <span *ngIf="editedTransition !== transition">{{transition.startingState.stateLabel}}</span>
-      <mat-form-field appearance="fill" class="long-form" *ngIf="editedTransition == transition">
-        <mat-select [(ngModel)]="editedTransition!.startingState" (ngModelChange)="validateEditedTransition()">
-          <mat-option *ngFor="let state of gamesystem!.states" [value]="state"
+<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">
+          <span *ngIf="editedTransition !== transition">{{transition.startingState.stateLabel}}</span>
+          <mat-form-field appearance="fill" class="long-form" *ngIf="editedTransition == transition">
+            <mat-select [(ngModel)]="editedTransition!.startingState" (ngModelChange)="validateEditedTransition()">
+              <mat-option *ngFor="let state of gamesystem!.states" [value]="state"
                           (onSelectionChange)="validateEditedTransition()">{{state.stateLabel}}</mat-option>
-        </mat-select>
-        <mat-hint class="mat-error" *ngIf="transitionError"><mat-icon class="warning-icon">warning</mat-icon> Starting and Ending State cannot be the same!</mat-hint>
-        <mat-hint class="mat-error" *ngIf="!transitionError && transitionStartingStateError"><mat-icon class="warning-icon">warning</mat-icon>  Select a valid Starting State!</mat-hint>
-      </mat-form-field>
-    </td>
-  </ng-container>
+            </mat-select>
+            <mat-hint class="mat-error" *ngIf="transitionError"><mat-icon class="warning-icon">warning</mat-icon> Starting and Ending State cannot be the same!</mat-hint>
+            <mat-hint class="mat-error" *ngIf="!transitionError && transitionStartingStateError"><mat-icon class="warning-icon">warning</mat-icon>  Select a valid Starting State!</mat-hint>
+          </mat-form-field>
+        </td>
+      </ng-container>
 
-  <ng-container matColumnDef="ending-state">
-    <th mat-header-cell *matHeaderCellDef>Ending State</th>
-    <td mat-cell *matCellDef="let transition">
-      <span *ngIf="editedTransition !== transition">{{transition.endingState.stateLabel}}</span>
-      <mat-form-field appearance="fill" class="long-form" *ngIf="editedTransition == transition">
-        <mat-select [(ngModel)]="editedTransition!.endingState" (ngModelChange)="validateEditedTransition()">
-          <mat-option *ngFor="let state of gamesystem!.states" [value]="state"
-                        (onSelectionChange)="validateEditedTransition()">{{state.stateLabel}}</mat-option>
-        </mat-select>
-        <mat-hint class="mat-error" *ngIf="transitionError"><mat-icon class="warning-icon">warning</mat-icon> Starting and Ending State cannot be the same!</mat-hint>
-        <mat-hint class="mat-error" *ngIf="!transitionError && transitionEndingStateError"> <mat-icon class="warning-icon">warning</mat-icon> Select a valid Ending State!</mat-hint>
-      </mat-form-field>
-    </td>
-  </ng-container>
+      <ng-container matColumnDef="ending-state">
+        <th mat-header-cell *matHeaderCellDef>Ending State</th>
+        <td mat-cell *matCellDef="let transition">
+          <span *ngIf="editedTransition !== transition">{{transition.endingState.stateLabel}}</span>
+          <mat-form-field appearance="fill" class="long-form" *ngIf="editedTransition == transition">
+            <mat-select [(ngModel)]="editedTransition!.endingState" (ngModelChange)="validateEditedTransition()">
+              <mat-option *ngFor="let state of gamesystem!.states" [value]="state"
+                          (onSelectionChange)="validateEditedTransition()">{{state.stateLabel}}</mat-option>
+            </mat-select>
+            <mat-hint class="mat-error" *ngIf="transitionError"><mat-icon class="warning-icon">warning</mat-icon> Starting and Ending State cannot be the same!</mat-hint>
+            <mat-hint class="mat-error" *ngIf="!transitionError && transitionEndingStateError"> <mat-icon class="warning-icon">warning</mat-icon> Select a valid Ending State!</mat-hint>
+          </mat-form-field>
+        </td>
+      </ng-container>
 
-  <ng-container matColumnDef="expandedDetail">
-    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
-      <div class="example-element-detail"
-           [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
-        <p>Expanded Detail</p>
-      </div>
-    </td>
-  </ng-container>
+      <ng-container matColumnDef="expandedDetail">
+        <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
+          <div class="example-element-detail"
+               [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
+            <p>Expanded Detail</p>
+          </div>
+        </td>
+      </ng-container>
 
-  <ng-container matColumnDef="edit">
-    <th mat-header-cell *matHeaderCellDef></th>
-    <td mat-cell *matCellDef="let transition">
-      <button mat-icon-button color="primary" *ngIf="editedTransition !== transition" [disabled]="editedTransition != undefined"><mat-icon>edit</mat-icon></button>
-      <button mat-icon-button color="primary" *ngIf="editedTransition === transition"
-        [disabled]="transitionError || transitionStartingStateError || transitionEndingStateError" (click)="finishEditing()"
-      ><mat-icon>done</mat-icon></button>
-    </td>
-  </ng-container>
+      <ng-container matColumnDef="edit">
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let transition">
+          <button mat-icon-button color="primary" *ngIf="editedTransition !== transition" [disabled]="editedTransition != undefined"><mat-icon>edit</mat-icon></button>
+          <button mat-icon-button color="primary" *ngIf="editedTransition === transition"
+                  [disabled]="transitionError || transitionStartingStateError || transitionEndingStateError" (click)="finishEditing()"
+          ><mat-icon>done</mat-icon></button>
+        </td>
+      </ng-container>
 
-  <ng-container matColumnDef="delete">
-    <th mat-header-cell *matHeaderCellDef></th>
-    <td mat-cell *matCellDef="let transition">
-      <button mat-icon-button color="warn" (click)="deleteTransition(transition)"><mat-icon>delete</mat-icon></button>
-    </td>
-  </ng-container>
+      <ng-container matColumnDef="delete">
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let transition">
+          <button mat-icon-button color="warn" (click)="deleteTransition(transition)"><mat-icon>delete</mat-icon></button>
+        </td>
+      </ng-container>
 
-  <ng-container matColumnDef="expand">
-    <th mat-header-cell *matHeaderCellDef aria-label="row actions">
-      <button mat-icon-button (click)="addTransition()" [disabled]="editedTransition != undefined"><mat-icon>add</mat-icon></button>
-    </th>
-    <td mat-cell *matCellDef="let element">
-      <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
-        @if (expandedElement === element) {
-          <mat-icon>keyboard_arrow_up</mat-icon>
-        } @else {
-          <mat-icon>keyboard_arrow_down</mat-icon>
-        }
-      </button>
-    </td>
-  </ng-container>
+      <ng-container matColumnDef="expand">
+        <th mat-header-cell *matHeaderCellDef aria-label="row actions">
+          <button mat-icon-button (click)="addTransition()" [disabled]="editedTransition != undefined"><mat-icon>add</mat-icon></button>
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
+            @if (expandedElement === element) {
+              <mat-icon>keyboard_arrow_up</mat-icon>
+            } @else {
+              <mat-icon>keyboard_arrow_down</mat-icon>
+            }
+          </button>
+        </td>
+      </ng-container>
 
 
-  <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
-  <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
-      class="example-element-row"
-      [class.example-expanded-row]="expandedElement === element"
-      (click)="expandedElement = expandedElement === element ? null : element">
-  </tr>
-  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
-</table>
+      <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
+      <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
+          class="example-element-row"
+          [class.example-expanded-row]="expandedElement === element"
+          (click)="expandedElement = expandedElement === element ? null : element">
+      </tr>
+      <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
+    </table>
+
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.ts b/src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.ts
index c1f64ee..b159e13 100644
--- a/src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.ts
+++ b/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();
+  }
 }