sebastian/ConceptCreator
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

Filter ProductState after StateLabel
All checks were successful
E2E Testing / test (push) Successful in 1m30s
Details

Browse Source
This commit is contained in:
Sebastian Böckelmann 2024-02-16 19:34:11 +01:00
parent 153140a1bf
commit 02d9fcbbba
4 changed files with 39 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/app.module.ts
View File

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

34
src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.html
View File

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

4
src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.scss
View File

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

13
src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.ts
View File

@ -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();
}
}