src/app/app.component.html

@@ -32,7 +32,9 @@
       <app-script-account-overview *ngIf="openContent == ModelComponentType.SCRIPTACCOUNT" #scriptAccountOverview [gameModel]="gameModel" (onOpenScriptAccount)="openModelComponent($event)"></app-script-account-overview>
       <app-gamescript-overview *ngIf="openContent == ModelComponentType.GAMESYTEM" #gamesystemOverview [gameModel]="gameModel" (openGamesystemEditor)="openModelComponent($event)"></app-gamescript-overview>
       <app-character-overview *ngIf="openContent == ModelComponentType.CHARACTER" #characterOverview [gameModel]="gameModel" (onOpenCharacterEditor)="openModelComponent($event)"></app-character-overview>
-      <app-item-overview *ngIf="openContent == ModelComponentType.ITEMGROUP || openContent == ModelComponentType.ITEM" #itemOverview [gameModel]="gameModel" (openItemgroupEmitter)="openModelComponent($event)"></app-item-overview>
+      <app-item-overview *ngIf="openContent == ModelComponentType.ITEMGROUP || openContent == ModelComponentType.ITEM"
+                         #itemOverview [gameModel]="gameModel" (openItemgroupEmitter)="openModelComponent($event)"
+                         (onOpenItemEditor)="openModelComponent($event)"></app-item-overview>
     </mat-drawer>
 
     <div class="example-sidenav-content">

src/app/app.module.ts

@@ -84,6 +84,7 @@ import {
 } from "./editor/gamesystem-editor/state-editor/simple-state-editor/state-initial-cell/state-initial-cell.component";
 import {ItemOverviewComponent} from "./side-overviews/item-overview/item-overview.component";
 import {ItemGroupEditorComponent} from "./editor/items/item-group-editor/item-group-editor.component";
+import {ItemEditorComponent} from "./editor/items/item-editor/item-editor.component";
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -111,7 +112,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     TemplateSpecificatorComponent,
     StateInitialCellComponent,
     ItemOverviewComponent,
-    ItemGroupEditorComponent
+    ItemGroupEditorComponent,
+    ItemEditorComponent
   ],
   imports: [
     BrowserModule,

src/app/editor/editor.component.html

@@ -21,5 +21,6 @@
 
     </app-character-editor>
     <app-item-group-editor *ngIf="modelComponent.type === ModelComponentType.ITEMGROUP" [itemgroup]="convertModelComponentToItemGroup(modelComponent)"></app-item-group-editor>
+    <app-item-editor *ngIf="modelComponent.type === ModelComponentType.ITEM" [item]="convertModelComponentToItem(modelComponent)"></app-item-editor>
   </mat-tab>
 </mat-tab-group>

src/app/editor/editor.component.ts

@@ -8,6 +8,7 @@ import {Transition} from "../project/game-model/gamesystems/transitions/Transiti
 import {ModelComponentType} from "../project/game-model/ModelComponentType";
 import {Character} from "../project/game-model/characters/Character";
 import {ItemGroup} from "../project/game-model/inventory/ItemGroup";
+import {Item} from "../project/game-model/inventory/Item";
 
 
 @Component({
@@ -65,4 +66,11 @@ export class EditorComponent {
     }
     return undefined;
   }
+
+  convertModelComponentToItem(modelComponent: ModelComponent) {
+    if(modelComponent instanceof Item) {
+      return modelComponent as Item;
+    }
+    return undefined;
+  }
 }

src/app/editor/items/item-editor/item-editor.component.html

@@ -0,0 +1 @@
+<p>item-editor works!</p>

src/app/editor/items/item-editor/item-editor.component.spec.ts

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

src/app/editor/items/item-editor/item-editor.component.ts

@@ -0,0 +1,12 @@
+import {Component, Input} from '@angular/core';
+import {Item} from "../../../project/game-model/inventory/Item";
+
+@Component({
+  selector: 'app-item-editor',
+  templateUrl: './item-editor.component.html',
+  styleUrl: './item-editor.component.scss'
+})
+export class ItemEditorComponent {
+
+  @Input() item: Item | undefined
+}

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

@@ -7,6 +7,7 @@ import {ConcreteItemGroup} from "../../project/game-model/inventory/ConcreteItem
 import {ModelComponent} from "../../project/game-model/ModelComponent";
 import {ModelComponentType} from "../../project/game-model/ModelComponentType";
 import {ItemGroup} from "../../project/game-model/inventory/ItemGroup";
+import {Item} from "../../project/game-model/inventory/Item";
 
 interface FlatNode {
   expandable: boolean,
@@ -24,6 +25,7 @@ export class ItemOverviewComponent implements OnInit{
 
   @Input() gameModel: GameModel | undefined
   @Output() openItemgroupEmitter: EventEmitter<ItemGroup> = new EventEmitter();
+  @Output() onOpenItemEditor: EventEmitter<Item> = new EventEmitter();
 
   private _transformer = (node: ModelComponent, level: number) => {
     if(node instanceof AbstractItemGroup) {
@@ -31,14 +33,14 @@ export class ItemOverviewComponent implements OnInit{
         expandable: !!node.children && node.children.length > 0,
         name: node.componentName,
         level: level,
-        type: ModelComponentType.ITEMGROUP
+        type: ModelComponentType.ITEMGROUP,
       };
     } else if(node instanceof ConcreteItemGroup) {
       return {
         expandable: !!node.items && node.items.length > 0,
         name: node.componentName,
         level: level,
-        type: ModelComponentType.ITEMGROUP
+        type: ModelComponentType.ITEMGROUP,
       }
     } else  {
       return {
@@ -94,6 +96,28 @@ export class ItemOverviewComponent implements OnInit{
       if(itemGroup) {
         this.openItemgroupEmitter.emit(itemGroup);
       }
+    } else if(node.type == ModelComponentType.ITEM) {
+      const item = this.searchItemByName(node.name);
+      if(item !== undefined) {
+        this.onOpenItemEditor.emit(item);
+      }
     }
   }
+
+  private searchItemByName(itemName: string): Item | undefined {
+    let groupQueue: ItemGroup[] = this.gameModel!.itemgroups.concat();
+    while(groupQueue.length > 0) {
+      const currentGroup = groupQueue.shift()!;
+
+      if(currentGroup instanceof AbstractItemGroup) {
+        groupQueue = groupQueue.concat(currentGroup.children);
+      } else if(currentGroup instanceof ConcreteItemGroup) {
+        const searchResult = currentGroup.items.find(item => item.componentName === itemName);
+        if(searchResult != undefined) {
+          return searchResult;
+        }
+      }
+    }
+    return undefined;
+  }
 }