src/app/app.component.html

@@ -32,7 +32,7 @@
       <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"></app-item-overview>
+      <app-item-overview *ngIf="openContent == ModelComponentType.ITEMGROUP || openContent == ModelComponentType.ITEM" #itemOverview [gameModel]="gameModel" (openItemgroupEmitter)="openModelComponent($event)"></app-item-overview>
     </mat-drawer>
 
     <div class="example-sidenav-content">

src/app/app.module.ts

@@ -83,6 +83,7 @@ import {
     StateInitialCellComponent
 } 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";
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -111,69 +112,70 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     StateInitialCellComponent,
     ItemOverviewComponent
   ],
-    imports: [
-        BrowserModule,
-        FormsModule,
-        HttpClientModule,
-        CoreModule,
-        SharedModule,
-        TranslateModule.forRoot({
-            loader: {
-                provide: TranslateLoader,
-                useFactory: httpLoaderFactory,
-                deps: [HttpClient]
-            }
-        }),
-        BrowserAnimationsModule,
-        MatIcon,
-        MatToolbar,
-        MatButton,
-        MatFormField,
-        MatInput,
-        MatDrawerContainer,
-        MatDrawer,
-        MatIconButton,
-        MatMenuTrigger,
-        MatMenu,
-        MatMenuItem,
-        MatListItem,
-        MatActionList,
-        MatTabGroup,
-        MatTab,
-        MatTabLabel,
-        MatLabel,
-        MatFormField,
-        ReactiveFormsModule,
-        MatError,
-        MatDialogTitle,
-        MatDialogContent,
-        MatDialogActions,
-        MatMiniFabButton,
-        MatTreeModule,
-        MatTable,
-        MatColumnDef,
-        MatHeaderCell,
-        MatHeaderCellDef,
-        MatCellDef,
-        MatCell,
-        MatHeaderRow,
-        MatRow,
-        MatHeaderRowDef,
-        MatRowDef,
-        MatCheckbox,
-        MatSelect,
-        MatOption,
-        MatHint,
-        MatTooltip,
-        MatCard,
-        MatCardContent,
-        MatCardHeader,
-        MatAccordion,
-        MatExpansionPanel,
-        MatExpansionPanelTitle,
-        MatCardTitle,
-        MatExpansionPanelHeader
-    ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpClientModule,
+    CoreModule,
+    SharedModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: httpLoaderFactory,
+        deps: [HttpClient]
+      }
+    }),
+    BrowserAnimationsModule,
+    MatIcon,
+    MatToolbar,
+    MatButton,
+    MatFormField,
+    MatInput,
+    MatDrawerContainer,
+    MatDrawer,
+    MatIconButton,
+    MatMenuTrigger,
+    MatMenu,
+    MatMenuItem,
+    MatListItem,
+    MatActionList,
+    MatTabGroup,
+    MatTab,
+    MatTabLabel,
+    MatLabel,
+    MatFormField,
+    ReactiveFormsModule,
+    MatError,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatMiniFabButton,
+    MatTreeModule,
+    MatTable,
+    MatColumnDef,
+    MatHeaderCell,
+    MatHeaderCellDef,
+    MatCellDef,
+    MatCell,
+    MatHeaderRow,
+    MatRow,
+    MatHeaderRowDef,
+    MatRowDef,
+    MatCheckbox,
+    MatSelect,
+    MatOption,
+    MatHint,
+    MatTooltip,
+    MatCard,
+    MatCardContent,
+    MatCardHeader,
+    MatAccordion,
+    MatExpansionPanel,
+    MatExpansionPanelTitle,
+    MatCardTitle,
+    MatExpansionPanelHeader,
+    ItemGroupEditorComponent
+  ],
   providers: [],
   bootstrap: [AppComponent]
 })

src/app/editor/editor.component.html

@@ -20,5 +20,6 @@
     >
 
     </app-character-editor>
+    <app-item-group-editor *ngIf="modelComponent.type === ModelComponentType.ITEMGROUP"></app-item-group-editor>
   </mat-tab>
 </mat-tab-group>

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-item-group-editor',
+  standalone: true,
+  imports: [],
+  templateUrl: './item-group-editor.component.html',
+  styleUrl: './item-group-editor.component.scss'
+})
+export class ItemGroupEditorComponent {
+
+}

src/app/project/game-model/GameModel.ts

@@ -69,7 +69,7 @@ export class GameModel {
     }
   }
 
-  private static findItemgroupByName(name: string, itemgroups: ItemGroup[]) {
+  public static findItemgroupByName(name: string, itemgroups: ItemGroup[]) {
     const itemgroupQueue: ItemGroup[] = itemgroups.concat();
     while(itemgroupQueue.length > 0 ) {
       const currentItemgroup = itemgroupQueue.shift()!;

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

@@ -1,6 +1,6 @@
 <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
   <!-- This is the tree node template for leaf nodes -->
-  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding matTreeNodePaddingIndent="10">
+  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding matTreeNodePaddingIndent="10" (click)="onSelectItem(node)" (contextmenu)="onSelectItem(node)" (dblclick)="openItemEditor(node)">
     <!-- use a disabled button to provide padding for tree leaf -->
     <button class="small-icon-button" mat-icon-button disabled></button>
     <mat-icon class="small-icon-button" *ngIf="node.type == ModelComponentType.ITEMGROUP">folder</mat-icon>
@@ -8,7 +8,7 @@
     {{node.name}}
   </mat-tree-node>
   <!-- This is the tree node template for expandable nodes -->
-  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding matTreeNodePaddingIndent="10">
+  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding matTreeNodePaddingIndent="10" (click)="onSelectItem(node)" (contextmenu)="onSelectItem(node)" (dblclick)="openItemEditor(node)">
     <button class="small-icon-button" mat-icon-button matTreeNodeToggle
             [attr.aria-label]="'Toggle ' + node.name">
       <mat-icon class="mat-icon-rtl-mirror">

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

@@ -1,13 +1,12 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {GameModel} from "../../project/game-model/GameModel";
 import {FlatTreeControl} from "@angular/cdk/tree";
 import {MatTreeFlatDataSource, MatTreeFlattener} from "@angular/material/tree";
-import {ItemGroup} from "../../project/game-model/inventory/ItemGroup";
 import {AbstractItemGroup} from "../../project/game-model/inventory/AbstractItemGroup";
 import {ConcreteItemGroup} from "../../project/game-model/inventory/ConcreteItemGroup";
 import {ModelComponent} from "../../project/game-model/ModelComponent";
-import {Item} from "../../project/game-model/inventory/Item";
 import {ModelComponentType} from "../../project/game-model/ModelComponentType";
+import {ItemGroup} from "../../project/game-model/inventory/ItemGroup";
 
 interface FlatNode {
   expandable: boolean,
@@ -24,6 +23,7 @@ interface FlatNode {
 export class ItemOverviewComponent implements OnInit{
 
   @Input() gameModel: GameModel | undefined
+  @Output() openItemgroupEmitter: EventEmitter<ItemGroup> = new EventEmitter();
 
   private _transformer = (node: ModelComponent, level: number) => {
     if(node instanceof AbstractItemGroup) {
@@ -64,6 +64,7 @@ export class ItemOverviewComponent implements OnInit{
   );
 
   dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
+  selectedItem: FlatNode | undefined
 
   hasChild = (_: number, node: FlatNode) => node.expandable;
 
@@ -82,4 +83,17 @@ export class ItemOverviewComponent implements OnInit{
   }
 
   protected readonly ModelComponentType = ModelComponentType;
+
+  onSelectItem(node: FlatNode) {
+    this.selectedItem = node;
+  }
+
+  openItemEditor(node: FlatNode) {
+    if(node.type == ModelComponentType.ITEMGROUP) {
+      const itemGroup = GameModel.findItemgroupByName(node.name, this.gameModel!.itemgroups);
+      if(itemGroup) {
+        this.openItemgroupEmitter.emit(itemGroup);
+      }
+    }
+  }
 }