src/app/app.module.ts

@@ -94,9 +94,6 @@ import {
 import {
   InventorySlotEditorComponent
 } from "./editor/character-editor/inventory-slot-editor/inventory-slot-editor.component";
-import {
-  InventorySlotCreatorComponent
-} from "./editor/character-editor/inventory-slot-editor/inventory-slot-creator/inventory-slot-creator.component";
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
 
@@ -127,8 +124,7 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     ItemEditorComponent,
     ItemgroupInheritorComponent,
     InheritedItemCharacteristicEditorComponent,
-    InventorySlotEditorComponent,
+    InventorySlotEditorComponent
-    InventorySlotCreatorComponent
   ],
   imports: [
     BrowserModule,

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

@@ -1,11 +0,0 @@
-<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>
-    <input matInput [formControl]="slotNameCtrl">
-  </mat-form-field>
-</mat-dialog-content>
-<mat-dialog-actions align="end">
-  <button mat-raised-button (click)="cancel()">Cancel</button>
-  <button mat-raised-button [disabled]="slotNameCtrl.invalid" (click)="submit()">Submit</button>
-</mat-dialog-actions>

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

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

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

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { InventorySlotCreatorComponent } from './inventory-slot-creator.component';
-
-describe('InventorySlotCreatorComponent', () => {
-  let component: InventorySlotCreatorComponent;
-  let fixture: ComponentFixture<InventorySlotCreatorComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [InventorySlotCreatorComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(InventorySlotCreatorComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,39 +0,0 @@
-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";
-
-@Component({
-  selector: 'app-inventory-slot-creator',
-  templateUrl: './inventory-slot-creator.component.html',
-  styleUrl: './inventory-slot-creator.component.scss'
-})
-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

@@ -1,12 +1,65 @@
-<mat-accordion>
+<table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8">
-  <mat-expansion-panel *ngFor="let slot of character!.inventorySlots">
+  <ng-container matColumnDef="name">
-    <mat-expansion-panel-header>
+    <th mat-header-cell *matHeaderCellDef>Slot Name</th>
-      <mat-panel-title>{{slot.slotName}}</mat-panel-title>
+    <td mat-cell *matCellDef="let slot">
-    </mat-expansion-panel-header>
+      <span *ngIf="slot !== editedSlot">
-    <div class="panel-actions">
+        {{slot.slotName}}
-      <button mat-raised-button color="primary" (click)="renameInventorySlot(slot)">Rename</button>
+      </span>
-      <button mat-raised-button color="warn" (click)="deleteInventorySlot(slot)">Delete</button>
+      <mat-form-field appearance="fill" class="long-form" *ngIf="slot === editedSlot">
+        <mat-label>Slot Name</mat-label>
+        <input matInput [(ngModel)]="slot.slotName">
+      </mat-form-field>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="edit">
+    <th mat-header-cell *matHeaderCellDef></th>
+    <td mat-cell *matCellDef="let slot">
+      <button mat-icon-button (click)="editInventorySlot(slot)" *ngIf="editedSlot !== slot" [disabled]="editedSlot != null"><mat-icon>edit</mat-icon></button>
+      <button mat-icon-button (click)="finishEditing()" *ngIf="editedSlot === slot"><mat-icon>done</mat-icon></button>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="delete">
+    <th mat-header-cell *matHeaderCellDef></th>
+    <td mat-cell *matCellDef="let slot">
+      <button mat-icon-button (click)="deleteInventorySlot(slot)" color="warn"><mat-icon>delete</mat-icon></button>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="expand">
+    <th mat-header-cell *matHeaderCellDef aria-label="row actions">
+      <button mat-icon-button (click)="addInventorySlot()"><mat-icon>add</mat-icon></button>
+    </th>
+    <td mat-cell *matCellDef="let element">
+      <button mat-icon-button aria-label="expand row" (click)="(expandedSlot = expandedSlot === element ? null : element); $event.stopPropagation()">
+        @if (expandedSlot === element) {
+          <mat-icon>keyboard_arrow_up</mat-icon>
+        } @else {
+          <mat-icon>keyboard_arrow_down</mat-icon>
+        }
+      </button>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="expandedDetail">
+    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
+      <div class="example-element-detail"
+           [@detailExpand]="element == expandedSlot ? 'expanded' : 'collapsed'">
+
+        <div class="example-element-description">
+          Something
+
         </div>
-  </mat-expansion-panel>
+      </div>
-  <button mat-stroked-button class="add-btn" (click)="addInventorySlot()">Add Inventory-Slot</button>
+    </td>
-</mat-accordion>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
+  <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
+      class="example-element-row"
+      [class.example-expanded-row]="expandedSlot === element"
+      (click)="expandedSlot = expandedSlot === element ? null : element">
+  </tr>
+  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
+</table>

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

@@ -4,3 +4,56 @@
 .add-btn {
   width: 100%;
 }
+
+table {
+  width: 100%;
+}
+
+tr.example-detail-row {
+  height: 0;
+}
+
+tr.example-element-row:not(.example-expanded-row):hover {
+  background: #545456;
+}
+
+tr.example-element-row:not(.example-expanded-row):active {
+  background: #4e5157;
+}
+
+.example-element-row td {
+  border-bottom-width: 0;
+}
+
+.example-element-detail {
+  overflow: hidden;
+  display: flex;
+}
+
+.example-element-diagram {
+  min-width: 80px;
+  border: 2px solid black;
+  padding: 8px;
+  font-weight: lighter;
+  margin: 8px 0;
+  height: 104px;
+}
+
+.example-element-symbol {
+  font-weight: bold;
+  font-size: 40px;
+  line-height: normal;
+}
+
+.example-element-description {
+  padding: 16px;
+}
+
+.example-element-description-attribution {
+  opacity: 0.5;
+}
+
+.mat-column-edit, .mat-column-delete, .mat-column-expand {
+  width: 32px;
+  align-content: center;
+}

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

@@ -1,43 +1,57 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {Character} from "../../../project/game-model/characters/Character";
 import {ItemGroup} from "../../../project/game-model/inventory/ItemGroup";
 import {InventorySlot} from "../../../project/game-model/inventory/intentory-slots/InventorySlot";
 import {MatDialog} from "@angular/material/dialog";
-import {InventorySlotCreatorComponent} from "./inventory-slot-creator/inventory-slot-creator.component";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+import {MatTableDataSource} from "@angular/material/table";
 
 @Component({
   selector: 'app-inventory-slot-editor',
   templateUrl: './inventory-slot-editor.component.html',
-  styleUrl: './inventory-slot-editor.component.scss'
+  styleUrl: './inventory-slot-editor.component.scss',
+  animations: [
+    trigger('detailExpand', [
+      state('collapsed,void', style({height: '0px', minHeight: '0'})),
+      state('expanded', style({height: '*'})),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+    ]),
+  ],
 })
-export class InventorySlotEditorComponent {
+export class InventorySlotEditorComponent implements OnInit{
 
   @Input() character: Character | undefined
   @Input() itemgroups: ItemGroup[] = []
+  displayedColumns: string[] = ['name', 'edit', 'delete']
+  columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
+  dataSource: MatTableDataSource<InventorySlot> = new MatTableDataSource<InventorySlot>();
+
+  expandedSlot: InventorySlot | null = null
+  editedSlot: InventorySlot | null = null
 
   constructor(private dialog: MatDialog)  {
   }
 
+  ngOnInit() {
+    this.dataSource.data = this.character!.inventorySlots;
+  }
+
   addInventorySlot() {
-    const dialogRef = this.dialog.open(InventorySlotCreatorComponent, {
+    this.editedSlot = new InventorySlot("New Inventory Slot");
-      minWidth: "400px"
+    this.character!.addInventorySlot(this.editedSlot);
-    })
+    this.dataSource.data = this.character!.inventorySlots;
-
-    dialogRef.afterClosed().subscribe(res => {
-      if(res != undefined) {
-        this.character!.inventorySlots.push(res)
-      }
-    })
   }
 
-  renameInventorySlot(inventorySlot: InventorySlot) {
+  editInventorySlot(inventorySlot: InventorySlot) {
-   this.dialog.open(InventorySlotCreatorComponent, {
+    this.editedSlot = inventorySlot
-      minWidth: "400px",
-      data: inventorySlot
-    })
   }
 
   deleteInventorySlot(inventorySlot: InventorySlot) {
-    this.character!.removeInventorySlot(inventorySlot)
+    this.character!.removeInventorySlot(inventorySlot);
+    this.dataSource.data = this.character!.inventorySlots;
+  }
+
+  finishEditing() {
+    this.editedSlot = null;
   }
 }