Validate Editing of SimpleState
Some checks failed
E2E Testing / test (push) Failing after 1m25s

This commit is contained in:
Sebastian Böckelmann 2024-02-10 11:44:25 +01:00
parent 5d517c3e97
commit e7809df01f
3 changed files with 34 additions and 5 deletions

View File

@ -4,7 +4,8 @@
<td mat-cell *matCellDef="let state"> <td mat-cell *matCellDef="let state">
<span *ngIf="editedElement !== state"> {{state.stateLabel}}</span> <span *ngIf="editedElement !== state"> {{state.stateLabel}}</span>
<mat-form-field appearance="fill" class="long-form" *ngIf="editedElement === state"> <mat-form-field appearance="fill" class="long-form" *ngIf="editedElement === state">
<input matInput [(ngModel)]="state.stateLabel"> <input matInput [(ngModel)]="state.stateLabel" (ngModelChange)="isEditedStateValid()">
<mat-hint class="mat-error" *ngIf="editedStateLabelError"><mat-icon class="warning-icon">warning</mat-icon>Missing State-Label Information</mat-hint>
</mat-form-field> </mat-form-field>
</td> </td>
</ng-container> </ng-container>
@ -39,10 +40,8 @@
<ng-container matColumnDef="edit"> <ng-container matColumnDef="edit">
<th mat-header-cell *matHeaderCellDef></th> <th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let state"> <td mat-cell *matCellDef="let state">
<button mat-icon-button color="primary" (click)="editState(state)"> <button mat-icon-button color="primary" *ngIf="editedElement !== state" (click)="editState(state)" [disabled]="editedElement !== null"><mat-icon>edit</mat-icon></button>
<mat-icon *ngIf="editedElement !== state">edit</mat-icon> <button mat-icon-button color="primary" (click)="finishEditing()" *ngIf="editedElement === state"><mat-icon>done</mat-icon></button>
<mat-icon *ngIf="editedElement === state">done</mat-icon>
</button>
</td> </td>
</ng-container> </ng-container>

View File

@ -53,3 +53,11 @@ tr.example-element-row:not(.example-expanded-row):active {
.long-form { .long-form {
width: 100%; width: 100%;
} }
.mat-error {
color: red;
}
.warning-icon {
margin-right: 5px;
}

View File

@ -2,6 +2,7 @@ import {Component, Input, OnInit} from '@angular/core';
import {SimpleState} from "../../../../game-model/gamesystems/SimpleState"; import {SimpleState} from "../../../../game-model/gamesystems/SimpleState";
import {MatTableDataSource} from "@angular/material/table"; import {MatTableDataSource} from "@angular/material/table";
import {animate, state, style, transition, trigger} from "@angular/animations"; import {animate, state, style, transition, trigger} from "@angular/animations";
import {MatSnackBar} from "@angular/material/snack-bar";
@Component({ @Component({
selector: 'app-simple-state-editor', selector: 'app-simple-state-editor',
@ -24,6 +25,11 @@ export class SimpleStateEditorComponent implements OnInit{
expandedElement: SimpleState | null = null; expandedElement: SimpleState | null = null;
editedElement: SimpleState | null = null; editedElement: SimpleState | null = null;
editedStateLabelError: boolean = false;
constructor(private snackbar: MatSnackBar) {
}
ngOnInit() { ngOnInit() {
this.dataSource.data = this.states; this.dataSource.data = this.states;
} }
@ -35,4 +41,20 @@ export class SimpleStateEditorComponent implements OnInit{
this.editedElement = state; this.editedElement = state;
} }
} }
finishEditing() {
if(this.isEditedStateValid()) {
this.editedElement = null;
}
}
isEditedStateValid(): boolean {
if(this.editedElement!.stateLabel.length > 0) {
this.editedStateLabelError = false;
return true;
} else {
this.editedStateLabelError = true;
}
return false;
}
} }