Visualize ItemProperties in Editor

src/app/app.module.ts

@@ -86,6 +86,9 @@ import {
     InventoryItemOverviewComponent
 } from "./side-overviews/inventory-item-overview/inventory-item-overview.component";
 import {InventoryItemEditorComponent} from "./editor/inventory-item-editor/inventory-item-editor.component";
+import {
+  ItemPropertyEditorComponent
+} from "./editor/inventory-item-editor/item-property-editor/item-property-editor.component";
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -112,7 +115,9 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     CharacterEditorComponent,
     TemplateSpecificatorComponent,
     StateInitialCellComponent,
-    InventoryItemOverviewComponent
+    InventoryItemOverviewComponent,
+    InventoryItemEditorComponent,
+    ItemPropertyEditorComponent
   ],
   imports: [
     BrowserModule,
@@ -176,7 +181,6 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     MatExpansionPanelTitle,
     MatCardTitle,
     MatExpansionPanelHeader,
-    InventoryItemEditorComponent,
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -1 +1,8 @@
-<p>inventory-item-editor works!</p>
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>Item Characteristics</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <app-item-property-editor [item]="item"></app-item-property-editor>
+  </mat-card-content>
+</mat-card>

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

@@ -2,11 +2,10 @@ import {Component, Input} from '@angular/core';
 import {Character} from "../../project/game-model/characters/Character";
 import {GameModel} from "../../project/game-model/GameModel";
 import {Item} from "../../project/game-model/inventory/Item";
+import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card";
 
 @Component({
   selector: 'app-inventory-item-editor',
-  standalone: true,
-  imports: [],
   templateUrl: './inventory-item-editor.component.html',
   styleUrl: './inventory-item-editor.component.scss'
 })

src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.html

@@ -0,0 +1,64 @@
+<table mat-table [dataSource]="datasource" class="mat-elevation-z8" multiTemplateDataRows>
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef>Name</th>
+    <td mat-cell *matCellDef="let itemProperty">
+      <span *ngIf="editedItemProperty !== itemProperty"> {{itemProperty.propertyName}}</span>
+    </td>
+  </ng-container>
+
+  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
+  <ng-container matColumnDef="expandedDetail">
+    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
+      <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
+        <p>{{element.propertyDescription}}</p>
+      </div>
+    </td>
+  </ng-container>
+
+
+
+  <ng-container matColumnDef="property">
+    <th mat-header-cell *matHeaderCellDef>Characteristic</th>
+    <td mat-cell *matCellDef="let itemProperty">
+      <p>{{itemProperty.property}}</p>
+    </td>
+  </ng-container>
+
+  <!--<ng-container matColumnDef="edit">
+    <th mat-header-cell *matHeaderCellDef></th>
+    <td mat-cell *matCellDef="let state">
+      <button mat-icon-button class="icon-btn-primary" *ngIf="editedElement !== state" (click)="editState(state)" [disabled]="editedElement !== null"><mat-icon>edit</mat-icon></button>
+      <button mat-icon-button class="icon-btn-primary" (click)="finishEditing()" *ngIf="editedElement === state"><mat-icon>done</mat-icon></button>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="delete">
+    <th mat-header-cell *matHeaderCellDef></th>
+    <td mat-cell *matCellDef="let state">
+      <button mat-icon-button color="warn" (click)="deleteState(state)"><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><mat-icon>add</mat-icon></button>
+    </th>
+    <td mat-cell *matCellDef="let element">
+      <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
+        @if (expandedElement === element) {
+          <mat-icon>keyboard_arrow_up</mat-icon>
+        } @else {
+          <mat-icon>keyboard_arrow_down</mat-icon>
+        }
+      </button>
+    </td>
+  </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]="expandedElement === element"
+      (click)="expandedElement = expandedElement === element ? null : element">
+  </tr>
+  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
+</table>

src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.scss

@@ -0,0 +1,57 @@
+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: #545456;
+}
+
+.example-element-row td {
+  border-bottom-width: 0;
+}
+.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;
+}
+
+.long-form {
+  width: 100%;
+}
+
+.mat-error {
+  color: red;
+}
+
+.warning-icon {
+  margin-right: 5px;
+}

src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.spec.ts

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

src/app/editor/inventory-item-editor/item-property-editor/item-property-editor.component.ts

@@ -0,0 +1,33 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Item} from "../../../project/game-model/inventory/Item";
+import {MatTableDataSource} from "@angular/material/table";
+import {ItemProperty} from "../../../project/game-model/inventory/ItemProperty";
+import {animate, state, style, transition, trigger} from "@angular/animations";
+
+@Component({
+  selector: 'app-item-property-editor',
+  templateUrl: './item-property-editor.component.html',
+  styleUrl: './item-property-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 ItemPropertyEditorComponent implements OnInit{
+
+  @Input() item: Item | undefined
+  editedItemProperty: ItemProperty | undefined
+  expandedElement: ItemProperty | undefined
+
+  displayedColumns: string[] = ['name', 'property']
+  columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
+
+  datasource: MatTableDataSource<ItemProperty> = new MatTableDataSource<ItemProperty>();
+
+  ngOnInit() {
+    this.datasource.data = this.item!.itemProperties
+  }
+}

src/app/project/game-model/inventory/Item.ts

@@ -1,10 +1,16 @@
 import {ItemProperty} from "./ItemProperty";
 import {ItemQuality} from "./ItemQuality";
 import {ModelComponent} from "../ModelComponent";
+import {ModelComponentType} from "../ModelComponentType";
 
 export class Item extends ModelComponent {
 
   possible_qualities: ItemQuality[] = []
   itemProperties: ItemProperty[] = []
 
+
+  constructor(componentName: string, componentDescription: string, type: ModelComponentType) {
+    super(componentName, componentDescription, type);
+    this.itemProperties.push(new ItemProperty("Weight", "Some Weights", 10))
+  }
 }

src/app/project/game-model/inventory/ItemProperty.ts

@@ -1,10 +1,12 @@
 export class ItemProperty {
   propertyName: string
+  propertyDescription: string
   property: number
 
 
-  constructor(propertyName: string, property: number) {
+  constructor(propertyName: string, propertyDescription: string, property: number) {
     this.propertyName = propertyName;
+    this.propertyDescription = propertyDescription;
     this.property = property;
   }
 }