src/app/app.module.ts

@@ -61,7 +61,7 @@ import {
   ProductStateEditorComponent
 } from "./editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component";
 import {MatTooltip} from "@angular/material/tooltip";
-import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from "@angular/material/card";
+import {MatCard, MatCardActions, MatCardContent, MatCardHeader, MatCardTitle} from "@angular/material/card";
 import {
     ScriptaccountActionEditorComponent
 } from "./editor/gamesystem-editor/transition-editor/scriptaccount-action-editor/scriptaccount-action-editor.component";
@@ -181,6 +181,7 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     MatExpansionPanelTitle,
     MatCardTitle,
     MatExpansionPanelHeader,
+    MatCardActions,
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -1,3 +1,19 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>Item Qualtities</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <mat-accordion>
+      <mat-expansion-panel *ngFor="let quality of item!.possible_qualities">
+        <mat-expansion-panel-header>
+          <mat-panel-title>{{quality.quality_step}}</mat-panel-title>
+        </mat-expansion-panel-header>
+        <app-item-property-editor #perQualityPropertyEditors [item]="item" [quality]="quality"></app-item-property-editor>
+      </mat-expansion-panel>
+    </mat-accordion>
+  </mat-card-content>
+</mat-card>
+
 <mat-card>
   <mat-card-header>
     <mat-card-title>Item Characteristics</mat-card-title>
@@ -6,3 +22,53 @@
     <app-item-property-editor [item]="item"></app-item-property-editor>
   </mat-card-content>
 </mat-card>
+
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>Item Quality Characteristics</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <table mat-table [dataSource]="datasource" class="mat-elevation-z8">
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef>Name</th>
+        <td mat-cell *matCellDef="let itemProperty">
+          <span *ngIf="itemProperty !== editedProperty">{{itemProperty.propertyName}}</span>
+          <mat-form-field appearance="fill" *ngIf="itemProperty === editedProperty">
+            <mat-label>Name</mat-label>
+            <input matInput [(ngModel)]="itemProperty.propertyName">
+          </mat-form-field>
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="description">
+        <th mat-header-cell *matHeaderCellDef>Description</th>
+        <td mat-cell *matCellDef="let itemProperty">
+          <span *ngIf="itemProperty !== editedProperty">{{itemProperty.propertyDescription}}</span>
+          <mat-form-field appearance="fill" *ngIf="itemProperty === editedProperty">
+            <mat-label>Name</mat-label>
+            <input matInput [(ngModel)]="itemProperty.propertyDescription">
+          </mat-form-field>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="edit">
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let itemProperty">
+          <button *ngIf="editedProperty == undefined" mat-icon-button (click)="editPerQualityProperty(itemProperty)"><mat-icon>edit</mat-icon></button>
+          <button *ngIf="editedProperty !== undefined" mat-icon-button (click)="finishEditing()"><mat-icon>done</mat-icon></button>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="delete">
+        <th mat-header-cell *matHeaderCellDef>
+          <button mat-icon-button (click)="addQualityProperty()"><mat-icon>add</mat-icon></button>
+        </th>
+        <td mat-cell *matCellDef="let itemProperty">
+          <button mat-icon-button color="warn" (click)="deletePerQualityProperty(itemProperty)"><mat-icon>delete</mat-icon></button>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  </mat-card-content>
+</mat-card>

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

@@ -0,0 +1,7 @@
+table {
+  width: 100%;
+}
+
+.mat-column-edit, .mat-column-delete {
+  width: 32px;
+}

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

@@ -1,17 +1,58 @@
-import {Component, Input} from '@angular/core';
+import {Component, ElementRef, Input, OnInit, ViewChildren} 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";
+import {ItemPropertyDescription} from "../../project/game-model/inventory/ItemPropertyDescription";
+import {ItemPropertyEditorComponent} from "./item-property-editor/item-property-editor.component";
+import {MatTableDataSource} from "@angular/material/table";
 
 @Component({
   selector: 'app-inventory-item-editor',
   templateUrl: './inventory-item-editor.component.html',
   styleUrl: './inventory-item-editor.component.scss'
 })
-export class InventoryItemEditorComponent {
+export class InventoryItemEditorComponent implements OnInit{
 
   @Input() item: Item | undefined;
   @Input() gameModel: GameModel | undefined;
+  @ViewChildren('perQualityPropertyEditors') perQualityPropertyEditors: ItemPropertyEditorComponent[] = [];
 
+  displayedColumns: string[] = ['name', 'description', 'edit', 'delete']
+  editedProperty: ItemPropertyDescription | undefined
+
+  datasource: MatTableDataSource<ItemPropertyDescription> = new MatTableDataSource<ItemPropertyDescription>()
+
+  ngOnInit() {
+    this.datasource.data = this.item!.perQualityProperties
+  }
+
+  deletePerQualityProperty(itemProperty: ItemPropertyDescription) {
+    this.item!.removePerQualityProperty(itemProperty);
+    this.datasource.data = this.item!.perQualityProperties
+    this.perQualityPropertyEditors.forEach(component => component.updatedDisplayedData())
+  }
+
+  editPerQualityProperty(itemProperty: ItemPropertyDescription) {
+    this.editedProperty = itemProperty
+  }
+
+  finishEditing() {
+    if(this.editedProperty!.propertyName.length > 0) {
+      this.item!.editPerQualityProperty(this.editedProperty!);
+
+      this.editedProperty = undefined;
+      this.perQualityPropertyEditors.forEach(component => component.updatedDisplayedData())
+    }
+  }
+
+  addQualityProperty() {
+    const qualityDescription = new ItemPropertyDescription("New Property", "")
+    this.item!.addPerQualityProperty(qualityDescription);
+    this.datasource.data = this.item!.perQualityProperties
+    this.editedProperty = qualityDescription;
+
+    this.perQualityPropertyEditors.forEach(component => component.updatedDisplayedData())
+
+  }
 }

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

@@ -2,8 +2,8 @@
   <ng-container matColumnDef="name">
     <th mat-header-cell *matHeaderCellDef>Name</th>
     <td mat-cell *matCellDef="let itemProperty">
-      <span *ngIf="editedItemProperty !== itemProperty"> {{itemProperty.propertyName}}</span>
+      <span *ngIf="editedItemProperty !== itemProperty || quality != undefined"> {{itemProperty.propertyName}}</span>
-      <mat-form-field appearance="fill" *ngIf="editedItemProperty === itemProperty">
+      <mat-form-field appearance="fill" *ngIf="editedItemProperty === itemProperty && quality == undefined">
         <mat-label>Name</mat-label>
         <input matInput [(ngModel)]="itemProperty.propertyName">
       </mat-form-field>
@@ -14,8 +14,8 @@
   <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 *ngIf="editedItemProperty !== element">{{element.propertyDescription}}</p>
+        <p *ngIf="editedItemProperty !== element || quality != undefined">{{element.propertyDescription}}</p>
-        <mat-form-field appearance="fill" class="long-form" *ngIf="editedItemProperty === element">
+        <mat-form-field appearance="fill" class="long-form" *ngIf="editedItemProperty === element && quality == undefined">
           <mat-label>Description</mat-label>
           <textarea matInput [(ngModel)]="element.propertyDescription" rows="3"></textarea>
         </mat-form-field>
@@ -46,13 +46,13 @@
   <ng-container matColumnDef="delete">
     <th mat-header-cell *matHeaderCellDef></th>
     <td mat-cell *matCellDef="let itemProperty">
-      <button mat-icon-button color="warn" (click)="deleteItemProperty(itemProperty)"><mat-icon>delete</mat-icon></button>
+      <button *ngIf="quality == undefined" mat-icon-button color="warn" (click)="deleteItemProperty(itemProperty)"><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 [disabled]="editedItemProperty !== undefined" (click)="addItemProperty()"><mat-icon>add</mat-icon></button>
+      <button *ngIf="quality == undefined" mat-icon-button [disabled]="editedItemProperty !== undefined" (click)="addItemProperty()"><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()">

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

@@ -4,6 +4,7 @@ import {MatTableDataSource} from "@angular/material/table";
 import {ItemProperty} from "../../../project/game-model/inventory/ItemProperty";
 import {animate, state, style, transition, trigger} from "@angular/animations";
 import {MatSnackBar} from "@angular/material/snack-bar";
+import {ItemQuality} from "../../../project/game-model/inventory/ItemQuality";
 
 @Component({
   selector: 'app-item-property-editor',
@@ -20,6 +21,7 @@ import {MatSnackBar} from "@angular/material/snack-bar";
 export class ItemPropertyEditorComponent implements OnInit{
 
   @Input() item: Item | undefined
+  @Input() quality: ItemQuality | undefined
   editedItemProperty: ItemProperty | undefined
   expandedElement: ItemProperty | undefined
 
@@ -32,12 +34,19 @@ export class ItemPropertyEditorComponent implements OnInit{
   }
 
   ngOnInit() {
-    this.datasource.data = this.item!.itemProperties
+    this.updatedDisplayedData()
   }
 
   deleteItemProperty(itemProperty: ItemProperty) {
-    this.item!.itemProperties = this.item!.itemProperties.filter(property => property.propertyName !== itemProperty.propertyName)
+    if(this.quality == undefined) {
-    this.datasource.data = this.item!.itemProperties
+      this.item!.itemProperties = this.item!.itemProperties.filter(property => property.propertyName !== itemProperty.propertyName)
+      this.datasource.data = this.item!.itemProperties
+    } else {
+      this.quality.quality_propertes = this.quality.quality_propertes.filter(property => property.propertyName !== itemProperty.propertyName)
+      this.datasource.data = this.quality.quality_propertes;
+    }
+
+
   }
 
   editItemProperty(itemProperty: ItemProperty) {
@@ -53,9 +62,21 @@ export class ItemPropertyEditorComponent implements OnInit{
   }
 
   addItemProperty() {
-    const itemProperty = new ItemProperty("New Property", "", 0);
+    if(this.quality == undefined) {
-    this.item!.itemProperties.push(itemProperty);
+      const itemProperty = new ItemProperty("New Property", "", 0);
-    this.datasource.data = this.item!.itemProperties;
+      this.item!.itemProperties.push(itemProperty);
-    this.editedItemProperty = itemProperty;
+      this.datasource.data = this.item!.itemProperties;
+      this.editedItemProperty = itemProperty;
+    }
+  }
+
+  updatedDisplayedData() {
+    if(this.quality != undefined) {
+      this.datasource.data = this.quality!.quality_propertes
+      this.displayedColumns = ['name', 'property', 'edit']
+      this.columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
+    } else {
+      this.datasource.data = this.item!.itemProperties
+    }
   }
 }

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

@@ -2,15 +2,43 @@ import {ItemProperty} from "./ItemProperty";
 import {ItemQuality} from "./ItemQuality";
 import {ModelComponent} from "../ModelComponent";
 import {ModelComponentType} from "../ModelComponentType";
+import {ItemPropertyDescription} from "./ItemPropertyDescription";
 
 export class Item extends ModelComponent {
 
   possible_qualities: ItemQuality[] = []
   itemProperties: ItemProperty[] = []
 
+  perQualityProperties: ItemPropertyDescription[] = []
 
   constructor(componentName: string, componentDescription: string, type: ModelComponentType) {
     super(componentName, componentDescription, type);
     this.itemProperties.push(new ItemProperty("Weight", "Some Weights", 10))
+    this.possible_qualities.push(new ItemQuality(0.25))
+    this.possible_qualities.push(new ItemQuality(0.50))
+    this.possible_qualities.push(new ItemQuality(0.75))
+    this.possible_qualities.push(new ItemQuality(1.00))
+
+    this.addPerQualityProperty(new ItemPropertyDescription("Price", "Price to buy item"))
+  }
+
+  removePerQualityProperty(qualityProperty: ItemPropertyDescription) {
+    this.perQualityProperties = this.perQualityProperties.filter(perQualityProperty => perQualityProperty !== qualityProperty);
+    this.possible_qualities.forEach(quality => {
+      quality.removeQualityProperty(qualityProperty.propertyName);
+    })
+  }
+
+  addPerQualityProperty(qualityProperty: ItemPropertyDescription) {
+    if(this.perQualityProperties.find(property => property.propertyName === qualityProperty.propertyName) == undefined) {
+      this.perQualityProperties.push(qualityProperty);
+      this.possible_qualities.forEach(quality => quality.addQualityProperty(qualityProperty))
+    }
+  }
+
+  editPerQualityProperty(qualityProperty: ItemPropertyDescription) {
+    this.possible_qualities.forEach(quality => {
+      quality.editQualityProperty(qualityProperty, this.perQualityProperties.map(property => property.propertyName))
+    })
   }
 }

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

@@ -0,0 +1,10 @@
+export class ItemPropertyDescription {
+  propertyName: string;
+  propertyDescription: string;
+
+
+  constructor(propertyName: string, propertyDescription: string) {
+    this.propertyName = propertyName;
+    this.propertyDescription = propertyDescription;
+  }
+}

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

@@ -1,9 +1,30 @@
+import {ItemProperty} from "./ItemProperty";
+import {ItemPropertyDescription} from "./ItemPropertyDescription";
+
 export class ItemQuality {
   quality_step: number
-  quality_propertes: ItemQuality[] = []
+  quality_propertes: ItemProperty[] = []
 
 
   constructor(quality_step: number) {
     this.quality_step = quality_step;
   }
+
+  removeQualityProperty(propertyName: string) {
+    this.quality_propertes = this.quality_propertes.filter(qualityProperty => qualityProperty.propertyName !== propertyName);
+  }
+
+  addQualityProperty(qualityProperty: ItemPropertyDescription) {
+    this.quality_propertes.push(new ItemProperty(qualityProperty.propertyName, qualityProperty.propertyDescription, 0));
+  }
+
+  editQualityProperty(qualityProperty: ItemPropertyDescription, knownProperties: string[]) {
+    const affectedProperty = this.quality_propertes.find(property => !knownProperties.includes(property.propertyName) )
+    if(affectedProperty != undefined) {
+      affectedProperty!.propertyName = qualityProperty.propertyName;
+      affectedProperty!.propertyDescription = qualityProperty.propertyDescription;
+    } else {
+      console.log("Property was not found")
+    }
+  }
 }