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

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.html
View File

@ -4,7 +4,8 @@
<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">
<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>
</td>
</ng-container>
@ -39,10 +40,8 @@
<ng-container matColumnDef="edit">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let state">
<button mat-icon-button color="primary" (click)="editState(state)">
<mat-icon *ngIf="editedElement !== state">edit</mat-icon>
<mat-icon *ngIf="editedElement === state">done</mat-icon>
</button>
<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>

8
src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.scss
View File

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

22
src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.ts
View File

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