src/app/app.component.html

@@ -27,7 +27,7 @@
     </mat-drawer>
 
     <div class="example-sidenav-content">
-      <app-editor #editor></app-editor>
+      <app-editor #editor (onModelNameUpdate)="onModelNameUpdate()"></app-editor>
     </div>
 
   </mat-drawer-container>

src/app/app.component.ts

@@ -116,6 +116,11 @@ export class AppComponent implements OnInit{
     } else {
       console.log("[WARN] [App.Component] Editor is undefined")
     }
+  }
 
+  onModelNameUpdate() {
+    if(this.openContent == ModelComponentType.GAMESYTEM) {
+      this.gamesystemOverview!.onUpdateModelName();
+    }
   }
 }

src/app/editor/editor.component.html

@@ -5,7 +5,7 @@
       <span [ngClass]="modelComponent.unsaved? 'unsaved':'saved'">{{modelComponent.componentName}}</span>
       <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-model-component-editor [modelComponent]="modelComponent" (onModelNameUpdated)="onModelNameUpdate()"></app-model-component-editor>
     <app-script-account-editor *ngIf="modelComponent.type === ModelComponentType.SCRIPTACCOUNT"
                                [scriptAccount]="convertModelComponentToScriptAccount(modelComponent)"></app-script-account-editor>
 

src/app/editor/editor.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {GameModel} from "../game-model/GameModel";
 import {ModelComponent} from "../game-model/ModelComponent";
 import {ModelComponentType} from "../game-model/ModelComponentType";
@@ -11,6 +11,7 @@ import {ScriptAccount} from "../game-model/scriptAccounts/ScriptAccount";
 })
 export class EditorComponent {
   gameModelComponents: ModelComponent[] = [];
+  @Output("onModelNameUpdate") onModelNameUpdateEmitter = new EventEmitter<boolean>();
 
   openGameModelComponent(gameModelComponent: ModelComponent) {
     if(!this.gameModelComponents.includes(gameModelComponent)) {
@@ -29,4 +30,8 @@ export class EditorComponent {
   }
 
   protected readonly ModelComponentType = ModelComponentType;
+
+  onModelNameUpdate() {
+    this.onModelNameUpdateEmitter.emit(true);
+  }
 }

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

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {ModelComponent} from "../../game-model/ModelComponent";
 import {FormControl, Validators} from "@angular/forms";
 
@@ -9,6 +9,7 @@ import {FormControl, Validators} from "@angular/forms";
 })
 export class ModelComponentEditorComponent implements OnInit{
   @Input('modelComponent') modelComponent: ModelComponent | undefined
+  @Output("onModelNameUpdated") onModelNameUpdateEmitter = new EventEmitter<boolean>();
 
   nameCtrl: FormControl = new FormControl('', [Validators.required]);
   descriptionCtrl: FormControl = new FormControl('' );
@@ -21,6 +22,7 @@ export class ModelComponentEditorComponent implements OnInit{
   onUpdateName() {
     this.modelComponent!.componentName = this.nameCtrl.value;
     this.modelComponent!.onModifyContent();
+    this.onModelNameUpdateEmitter.emit(true);
   }
 
   onUpdateDescription() {

src/app/side-overviews/gamescript-overview/gamescript-overview.component.ts

@@ -91,4 +91,8 @@ export class GamescriptOverviewComponent implements OnInit {
       this.openGamesystemEmitter.emit(gamesystem);
     }
   }
+
+  onUpdateModelName() {
+    this.dataSource.data = this.gameModel!.gamesystems;
+  }
 }