src/app/app.module.ts

@@ -43,7 +43,7 @@ import {
   MatColumnDef,
   MatHeaderCell,
   MatHeaderCellDef,
-  MatHeaderRow, MatHeaderRowDef, MatRow, MatRowDef,
+  MatHeaderRow, MatHeaderRowDef, MatNoDataRow, MatRow, MatRowDef,
   MatTable
 } from "@angular/material/table";
 import {MatCheckbox} from "@angular/material/checkbox";
@@ -101,6 +101,12 @@ import {MatAutocomplete, MatAutocompleteTrigger} from "@angular/material/autocom
 import {
   CharacteristicSelectorComponent
 } from "./editor/character-editor/inventory-slot-editor/inventory-slot-characteristic-editor/characteristic-selector/characteristic-selector.component";
+import {
+  RequieredInheritancesEditorComponent
+} from "./editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component";
+import {
+  RequieredInheritancesCreatorComponent
+} from "./editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-creator/requiered-inheritances-creator.component";
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
 
@@ -133,7 +139,9 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     InheritedItemCharacteristicEditorComponent,
     InventorySlotEditorComponent,
     InventorySlotCharacteristicEditorComponent,
-    CharacteristicSelectorComponent
+    CharacteristicSelectorComponent,
+    RequieredInheritancesEditorComponent,
+    RequieredInheritancesCreatorComponent
   ],
   imports: [
     BrowserModule,
@@ -199,7 +207,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     MatExpansionPanelHeader,
     MatExpansionPanelDescription,
     MatAutocomplete,
-    MatAutocompleteTrigger
+    MatAutocompleteTrigger,
+    MatNoDataRow
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/editor/character-editor/inventory-slot-editor/inventory-slot-editor.component.html

@@ -48,6 +48,7 @@
            [@detailExpand]="element == expandedSlot ? 'expanded' : 'collapsed'">
 
         <app-inventory-slot-characteristic-editor [inventorySlot]="element" [itemgroups]="itemgroups"></app-inventory-slot-characteristic-editor>
+        <app-requiered-inheritances-editor [inventorySlot]="element" [itemgroups]="itemgroups"></app-requiered-inheritances-editor>
       </div>
     </td>
   </ng-container>

src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-creator/requiered-inheritances-creator.component.html

@@ -0,0 +1,13 @@
+<h1 matDialogTitle>Add Itemgroup Requierement</h1>
+<mat-dialog-content>
+  <mat-form-field appearance="outline" class="long-form">
+    <mat-label>Select Itemgroup as Requierement</mat-label>
+    <mat-select [formControl]="selectorCtrl">
+      <mat-option *ngFor="let option of itemgroups" [value]="option">{{option.componentName}}</mat-option>
+    </mat-select>
+  </mat-form-field>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-raised-button (click)="cancel()">Cancel</button>
+  <button mat-raised-button color="primary" (click)="submit()" [disabled]="selectorCtrl.invalid">Submit</button>
+</mat-dialog-actions>

src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-creator/requiered-inheritances-creator.component.spec.ts

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

src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-creator/requiered-inheritances-creator.component.ts

@@ -0,0 +1,28 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {ItemGroup} from "../../../../../project/game-model/inventory/ItemGroup";
+import {FormControl, Validators} from "@angular/forms";
+
+@Component({
+  selector: 'app-requiered-inheritances-creator',
+  templateUrl: './requiered-inheritances-creator.component.html',
+  styleUrl: './requiered-inheritances-creator.component.scss'
+})
+export class RequieredInheritancesCreatorComponent {
+
+  selectorCtrl = new FormControl('', Validators.required)
+
+  constructor(@Inject(MAT_DIALOG_DATA) public itemgroups: ItemGroup[],
+              private dialogRef: MatDialogRef<RequieredInheritancesCreatorComponent>) {
+  }
+
+  cancel() {
+    this.dialogRef.close();
+  }
+
+  submit() {
+    if(this.selectorCtrl.value != undefined) {
+      this.dialogRef.close(this.selectorCtrl.value);
+    }
+  }
+}

src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component.html

@@ -0,0 +1,25 @@
+<table mat-table [dataSource]="datasource" class="mat-elevation-z8">
+  <ng-container matColumnDef="itemgroupName">
+    <th mat-header-cell *matHeaderCellDef>Itemgroup Name</th>
+    <td mat-cell *matCellDef="let requieredInheritence">{{requieredInheritence.componentName}}</td>
+  </ng-container>
+  <ng-container matColumnDef="itemgroupDescription">
+    <th mat-header-cell *matHeaderCellDef>Itemgroup Description</th>
+    <td mat-cell *matCellDef="let requieredInheritence">{{requieredInheritence.componentDescription}}</td>
+  </ng-container>
+  <ng-container matColumnDef="delete">
+    <th mat-header-cell *matHeaderCellDef>
+      <button mat-icon-button (click)="addInheritance()"><mat-icon>add</mat-icon></button>
+    </th>
+    <td mat-cell *matCellDef="let requieredInheritence">
+      <button mat-icon-button color="warn" (click)="deleteRequieredInheritence(requieredInheritence)"><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>
+
+  <tr class="mat-row" *matNoDataRow>
+    <td class="mat-cell" colspan="4">No reqiered Inheritence: Items of all Itemgroups can be added</td>
+  </tr>
+</table>

src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component.scss

@@ -0,0 +1,3 @@
+.mat-column-delete {
+  width: 32px;
+}

src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component.spec.ts

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

src/app/editor/character-editor/inventory-slot-editor/requiered-inheritances-editor/requiered-inheritances-editor.component.ts

@@ -0,0 +1,49 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {InventorySlot} from "../../../../project/game-model/inventory/intentory-slots/InventorySlot";
+import {ItemGroup} from "../../../../project/game-model/inventory/ItemGroup";
+import {MatTableDataSource} from "@angular/material/table";
+import {MatDialog} from "@angular/material/dialog";
+import {
+  RequieredInheritancesCreatorComponent
+} from "./requiered-inheritances-creator/requiered-inheritances-creator.component";
+
+@Component({
+  selector: 'app-requiered-inheritances-editor',
+  templateUrl: './requiered-inheritances-editor.component.html',
+  styleUrl: './requiered-inheritances-editor.component.scss'
+})
+export class RequieredInheritancesEditorComponent implements OnInit{
+
+  @Input() inventorySlot: InventorySlot | undefined
+  @Input() itemgroups: ItemGroup[] = []
+
+  datasource: MatTableDataSource<ItemGroup> = new MatTableDataSource<ItemGroup>();
+  displayedColumns: string[] = ['itemgroupName', 'itemgroupDescription', 'delete']
+
+  constructor(private dialog: MatDialog) {
+  }
+
+  ngOnInit() {
+    this.datasource.data = this.inventorySlot!.requiredInheritances;
+  }
+
+  addInheritance() {
+    const dialogRef = this.dialog.open(RequieredInheritancesCreatorComponent, {
+      data: this.itemgroups,
+      width: "400px"
+    })
+
+    dialogRef.afterClosed().subscribe(res => {
+      if(res != undefined) {
+        console.log("Added")
+        this.inventorySlot!.addRequieredInheritence(res);
+        this.datasource.data = this.inventorySlot!.requiredInheritances;
+      }
+    })
+  }
+
+  deleteRequieredInheritence(requieredInheritence: ItemGroup) {
+    this.inventorySlot!.removeRequieredInheritence(requieredInheritence)
+    this.datasource.data = this.inventorySlot!.requiredInheritances;
+  }
+}

src/app/project/game-model/inventory/intentory-slots/InventorySlot.ts

@@ -20,4 +20,14 @@ export class InventorySlot {
       this.slotCharacteristics.push(slotCharacteristic);
     }
   }
+
+  addRequieredInheritence(itemgroup: ItemGroup) {
+    if(this.requiredInheritances.find(group => group.componentName === itemgroup.componentName) == undefined) {
+      this.requiredInheritances.push(itemgroup);
+    }
+  }
+
+  removeRequieredInheritence(itemgroup: ItemGroup) {
+    this.requiredInheritances = this.requiredInheritances.filter(group => group.componentName !== itemgroup.componentName)
+  }
 }