Basic Visualization of Itemgroups and their Items

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></app-item-overview>
+      <app-item-overview *ngIf="openContent == ModelComponentType.ITEMGROUP || openContent == ModelComponentType.ITEM" #itemOverview [gameModel]="gameModel"></app-item-overview>
     </mat-drawer>
 
     <div class="example-sidenav-content">

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

@@ -31,6 +31,9 @@ export class GameModel {
     this.addAbstractItemgroup("Inventory", undefined);
     this.addConcreteItemgroup("Oberteil", GameModel.findItemgroupByName("Clothing", this.itemgroups)! as AbstractItemGroup);
     this.addConcreteItemgroup("Hose", GameModel.findItemgroupByName("Clothing", this.itemgroups)! as AbstractItemGroup);
+
+    this.addItem("Hose 1", "Hose");
+    this.addItem("Hose 2", "Hose");
   }
 
   addAbstractItemgroup(groupName: string, parentgroup: AbstractItemGroup | undefined) {

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

@@ -1 +1,19 @@
 <p>item-overview works!</p>
+<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
+  <!-- This is the tree node template for leaf nodes -->
+  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
+    <!-- use a disabled button to provide padding for tree leaf -->
+    <button mat-icon-button disabled></button>
+    {{node.name}}
+  </mat-tree-node>
+  <!-- This is the tree node template for expandable nodes -->
+  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
+    <button mat-icon-button matTreeNodeToggle
+            [attr.aria-label]="'Toggle ' + node.name">
+      <mat-icon class="mat-icon-rtl-mirror">
+        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+      </mat-icon>
+    </button>
+    {{node.name}}
+  </mat-tree-node>
+</mat-tree>

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

@@ -1,10 +1,13 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {GameModel} from "../../project/game-model/GameModel";
-
+import {FlatTreeControl} from "@angular/cdk/tree";
-interface TreeNode {
+import {MatTreeFlatDataSource, MatTreeFlattener} from "@angular/material/tree";
-  name: string,
+import {ItemGroup} from "../../project/game-model/inventory/ItemGroup";
-  children: TreeNode[];
+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";
 
 interface FlatNode {
   expandable: boolean,
@@ -17,7 +20,60 @@ interface FlatNode {
   templateUrl: './item-overview.component.html',
   styleUrl: './item-overview.component.scss'
 })
-export class ItemOverviewComponent {
+export class ItemOverviewComponent implements OnInit{
 
   @Input() gameModel: GameModel | undefined
+
+  private _transformer = (node: ModelComponent, level: number) => {
+    if(node instanceof AbstractItemGroup) {
+      return {
+        expandable: !!node.children && node.children.length > 0,
+        name: node.componentName,
+        level: level,
+      };
+    } else if(node instanceof ConcreteItemGroup) {
+      return {
+        expandable: !!node.items && node.items.length > 0,
+        name: node.componentName,
+        level: level
+      }
+    } else  {
+      return {
+        expandable: false,
+        name: node.componentName,
+        level: level
+      }
+    }
+  };
+
+
+  treeControl = new FlatTreeControl<FlatNode>(
+    node => node.level,
+    node => node.expandable,
+  );
+
+  treeFlattener = new MatTreeFlattener(
+    this._transformer,
+    node => node.level,
+    node => node.expandable,
+    node => this.getNodeChildren(node)
+  );
+
+  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
+
+  hasChild = (_: number, node: FlatNode) => node.expandable;
+
+  getNodeChildren(node: ModelComponent): ModelComponent[] {
+    if(node instanceof ConcreteItemGroup) {
+      return node.items;
+    } else if(node instanceof AbstractItemGroup) {
+      return node.children;
+    } else {
+      return [];
+    }
+  }
+
+  ngOnInit() {
+    this.dataSource.data = this.gameModel!.itemgroups;
+  }
 }