src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.html

@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>Create Inventory Slot</h1>
+<h1 mat-dialog-title>{{data == undefined ? 'Create New Inventory Slot':'Rename Inventory Slot'}}</h1>
 <mat-dialog-content>
   <mat-form-field appearance="outline" class="long-form">
     <mat-label>Slot-Name</mat-label>

src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.scss

@@ -0,0 +1,3 @@
+.long-form {
+  width: 100%;
+}

src/app/editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component.ts

@@ -1,4 +1,4 @@
-import {Component, Inject} from '@angular/core';
+import {Component, Inject, OnInit} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
 import {InventorySlot} from "../../../../project/game-model/inventory/intentory-slots/InventorySlot";
 import {FormControl, Validators} from "@angular/forms";
@@ -8,19 +8,31 @@ import {FormControl, Validators} from "@angular/forms";
   templateUrl: './inventory-slot-creator.component.html',
   styleUrl: './inventory-slot-creator.component.scss'
 })
-export class InventorySlotCreatorComponent {
+export class InventorySlotCreatorComponent implements OnInit{
 
   slotNameCtrl = new FormControl('', [Validators.required]);
 
   constructor(private dialogRef: MatDialogRef<InventorySlotCreatorComponent>,
               @Inject(MAT_DIALOG_DATA) public data: InventorySlot | undefined) {
+
   }
 
+  ngOnInit() {
+    if(this.data != undefined) {
+      this.slotNameCtrl.setValue(this.data.slotName);
+    }
+  }
 
   submit() {
+    if(this.data != undefined) {
+      this.data.slotName = this.slotNameCtrl.value!;
+      this.dialogRef.close(this.data);
+    } else {
       this.dialogRef.close(new InventorySlot(this.slotNameCtrl.value!))
     }
 
+  }
+
   cancel() {
     this.dialogRef.close()
   }

src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html

@@ -4,7 +4,7 @@
       <mat-panel-title>{{slot.slotName}}</mat-panel-title>
     </mat-expansion-panel-header>
     <div class="panel-actions">
-      <button mat-raised-button color="primary">Edit</button>
+      <button mat-raised-button color="primary" (click)="renameInventorySlot(slot)">Rename</button>
       <button mat-raised-button color="warn">Delete</button>
     </div>
   </mat-expansion-panel>

src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.ts

@@ -29,4 +29,13 @@ export class InventorySlotEditorComponent {
       }
     })
   }
+
+  renameInventorySlot(inventorySlot: InventorySlot) {
+   this.dialog.open(InventorySlotCreatorComponent, {
+      minWidth: "400px",
+      data: inventorySlot
+    })
+  }
+
+  protected readonly indexedDB = indexedDB;
 }