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

issue-5-product-gamesystems #11

Merged
sebastian merged 6 commits from issue-5-product-gamesystems into main 2024-02-16 19:02:12 +00:00
Conversation 0 Commits 6 Files Changed 18 +39 -17
4 changed files with 39 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 02d9fcbbba - Show all commits

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

@ -43,7 +43,7 @@ import {
MatColumnDef, MatColumnDef,
MatHeaderCell, MatHeaderCell,
MatHeaderCellDef, MatHeaderCellDef,
MatHeaderRow, MatHeaderRowDef, MatNoDataRow, MatRow, MatRowDef, MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
MatTable MatTable
} from "@angular/material/table"; } from "@angular/material/table";
import {MatCheckbox} from "@angular/material/checkbox"; import {MatCheckbox} from "@angular/material/checkbox";
@ -137,9 +137,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new Transl
MatOption, MatOption,
MatHint, MatHint,
MatTooltip, MatTooltip,
MatCardContent,
MatCard, MatCard,
MatNoDataRow MatCardContent
], ],
providers: [], providers: [],
bootstrap: [AppComponent] 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"> <mat-card>
<ng-container *ngFor="let col of displayedColumns; let i = index" [matColumnDef]="col"> <mat-card-content>
<th mat-header-cell *matHeaderCellDef>{{col}}</th> <mat-form-field appearance="fill" class="long-form">
<td mat-cell *matCellDef="let state"> <mat-label>Filter</mat-label>
<a *ngIf="i < displayedColumns.length-1" role="button" (click)="clickOnInnerState(i)" [matTooltip]="getLeafState(state, i).stateDescription">{{getLeafState(state, i).stateLabel}}</a> <input matInput (keyup)="applyFilter($event)" placeholder="Filter" #input>
<mat-icon *ngIf="i == displayedColumns.length-1"> </mat-form-field>
{{state.initial? 'done':'close'}} <table mat-table [dataSource]="datasource" class="mat-elevation-z8">
</mat-icon> <ng-container *ngFor="let col of displayedColumns; let i = index" [matColumnDef]="col">
</td> <th mat-header-cell *matHeaderCellDef>{{col}}</th>
</ng-container> <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-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table> </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 { .mat-column-Initial {
width: 32px; 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 {SimpleState} from "../../../../game-model/gamesystems/SimpleState";
import {State} from "../../../../game-model/gamesystems/State"; import {State} from "../../../../game-model/gamesystems/State";
import {LeafGamesystemCalculator} from "../../product-gamesystem-editor/LeafGamesystemCalculator"; import {LeafGamesystemCalculator} from "../../product-gamesystem-editor/LeafGamesystemCalculator";
import {ProductTransition} from "../../../../game-model/gamesystems/ProductTransition";
import {ProductState} from "../../../../game-model/gamesystems/ProductState";
@Component({ @Component({
selector: 'app-product-state-editor', selector: 'app-product-state-editor',
@ -18,7 +20,7 @@ export class ProductStateEditorComponent implements OnInit{
@Input() gamesystem: ProductGamesystem | undefined @Input() gamesystem: ProductGamesystem | undefined
@Output('onOpenGamesystemEditor') openGamesystemEditorEmitter = new EventEmitter<SimpleGamesystem>(); @Output('onOpenGamesystemEditor') openGamesystemEditorEmitter = new EventEmitter<SimpleGamesystem>();
displayedColumns: string[] = []; displayedColumns: string[] = [];
datasource = new MatTableDataSource(); datasource = new MatTableDataSource<ProductState>();
ngOnInit() { ngOnInit() {
@ -26,6 +28,10 @@ export class ProductStateEditorComponent implements OnInit{
this.generateColumnNamesRecursively(this.gamesystem!, ""); this.generateColumnNamesRecursively(this.gamesystem!, "");
this.displayedColumns.push('Initial'); this.displayedColumns.push('Initial');
this.datasource.data = this.gamesystem!.states; 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) { generateColumnNamesRecursively(gamesystem: ProductGamesystem, nestedColumnName: string) {
@ -50,4 +56,9 @@ export class ProductStateEditorComponent implements OnInit{
this.openGamesystemEditorEmitter.emit(clicked_gamesystem); this.openGamesystemEditorEmitter.emit(clicked_gamesystem);
} }
applyFilter(event: KeyboardEvent) {
const filterValue = (event.target as HTMLInputElement).value;
this.datasource.filter = filterValue.trim().toLowerCase();
}
} }