Filter SimpleTransition by StateLabel
All checks were successful
E2E Testing / test (push) Successful in 1m36s
All checks were successful
E2E Testing / test (push) Successful in 1m36s
This commit is contained in:
Sebastian Böckelmann
parent
02d9fcbbba
commit
41452f0b9d
@ -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>
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
.transition-editor {
|
||||
margin-top: 15px;
|
||||
#transition-editor {
|
||||
margin-top: 20px !important;
|
||||
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user