Visualize Save/Unsaved Status in Tabs (Editor)

src/app/editor/editor.component.html

@@ -1,9 +1,9 @@
 <mat-tab-group>
   <mat-tab *ngFor="let modelComponent of gameModelComponents">
     <ng-template mat-tab-label>
-      <mat-icon class="example-tab-icon">inventory_2</mat-icon>
+      <mat-icon class="example-tab-icon unsaved" [ngClass]="modelComponent.unsaved? 'unsaved':'saved'">inventory_2</mat-icon>
-      <span>{{modelComponent.componentName}}</span>
+      <span [ngClass]="modelComponent.unsaved? 'unsaved':'saved'">{{modelComponent.componentName}}</span>
-      <button class="content-label" mat-icon-button (click)="closeGameModelComponent(modelComponent)"><mat-icon>close</mat-icon></button>
+      <button class="content-label close-btn" mat-icon-button (click)="closeGameModelComponent(modelComponent)"><mat-icon>close</mat-icon></button>
     </ng-template>
     <app-model-component-editor [modelComponent]="modelComponent"></app-model-component-editor>
     <app-script-account-editor *ngIf="modelComponent.type === ModelComponentType.SCRIPTACCOUNT"

src/app/editor/editor.component.scss

@@ -0,0 +1,11 @@
+.unsaved {
+  color: red;
+}
+
+.saved {
+  color: #3c95f8;
+}
+
+.close-btn {
+  color: white
+}

src/app/editor/model-component-editor/model-component-editor.component.ts

@@ -20,10 +20,12 @@ export class ModelComponentEditorComponent implements OnInit{
 
   onUpdateName() {
     this.modelComponent!.componentName = this.nameCtrl.value;
+    this.modelComponent!.onModifyContent();
   }
 
   onUpdateDescription() {
     this.modelComponent!.componentDescription = this.descriptionCtrl.value;
+    this.modelComponent!.onModifyContent();
   }
 
   protected readonly name = name;

src/app/editor/script-account-editor/script-account-editor.component.ts

@@ -39,9 +39,11 @@ export class ScriptAccountEditorComponent implements OnInit{
 
   onUpdateMinValue() {
     this.scriptAccount!.minValue = Number(this.minCtrl.value);
+    this.scriptAccount!.onModifyContent();
   }
 
   onUpdateMaxValue() {
     this.scriptAccount!.maxValue = Number(this.maxCtrl.value);
+    this.scriptAccount!.onModifyContent();
   }
 }

src/app/game-model/ModelComponent.ts

@@ -1,10 +1,12 @@
 import {ModelComponentType} from "./ModelComponentType";
+import {SaveComponent} from "./SaveComponent";
 
-export abstract class ModelComponent {
+export abstract class ModelComponent extends SaveComponent{
   componentName: string
   componentDescription: string
   type: ModelComponentType
   constructor(componentName: string, componentDescription: string, type: ModelComponentType) {
+    super();
     this.componentName = componentName;
     this.componentDescription = componentDescription;
     this.type = type;

src/app/game-model/SaveComponent.ts

@@ -0,0 +1,13 @@
+export abstract class SaveComponent {
+  unsaved: boolean = false;
+
+  onModifyContent() {
+    this.unsaved = true;
+  }
+
+  onSaveContent() {
+    this.unsaved = false;
+  }
+
+  abstract save(): void;
+}

src/app/game-model/scriptAccounts/ScriptAccount.ts

@@ -7,4 +7,8 @@ export class ScriptAccount extends ModelComponent{
   constructor(componentName: string, componentDescription: string) {
     super(componentName, componentDescription, ModelComponentType.SCRIPTACCOUNT);
   }
+
+  save(): void {
+  }
+
 }