Validate Editing of SimpleState

src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.html

@@ -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)">
+      <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>
   </ng-container>
 

src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.scss

@@ -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;
+}

src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.ts

@@ -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;
+  }
 }