Adapt Product Gamesystem Editor for Productsystems with identical innersystems

src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.html

@@ -5,8 +5,8 @@
       <input matInput (keyup)="applyFilter($event)" placeholder="Filter" #input>
     </mat-form-field>
     <table mat-table [dataSource]="datasource" class="mat-elevation-z8" multiTemplateDataRows>
-      <ng-container *ngFor="let col of displayedColumns; let i = index" [matColumnDef]="col">
+      <ng-container *ngFor="let col of internalColumnNames; let i = index" [matColumnDef]="col">
-        <th mat-header-cell *matHeaderCellDef>{{col}}</th>
+        <th mat-header-cell *matHeaderCellDef>{{displayedColumns[i]}}</th>
         <td mat-cell *matCellDef="let state">
           <a *ngIf="i < displayedColumns.length-1" role="button" (click)="clickOnInnerState(i)" [matTooltip]="getLeafState(state, i).stateDescription">{{getLeafState(state, i).stateLabel}}</a>
           <mat-icon *ngIf="i == displayedColumns.length-1">

src/app/editor/gamesystem-editor/state-editor/product-state-editor/product-state-editor.component.ts

@@ -29,6 +29,8 @@ export class ProductStateEditorComponent implements OnInit{
   @Input() templateElement: TemplateElement | undefined
   @Output('onOpenGamesystemEditor') openGamesystemEditorEmitter = new EventEmitter<SimpleGamesystem>();
   displayedColumns: string[] = [];
+  internalColumnNames: string[] = []
+
   expandedColumns: string[] = []
   datasource = new MatTableDataSource<ProductState>();
 
@@ -38,7 +40,12 @@ export class ProductStateEditorComponent implements OnInit{
     this.gamesystem!.generateFromChildsystems();
     this.generateColumnNamesRecursively(this.gamesystem!, "");
     this.displayedColumns.push('Initial');
-    this.expandedColumns = [...this.displayedColumns, 'expand'];
+
+    this.internalColumnNames = this.displayedColumns.concat();
+
+    this.renameDuplicateColumnNames(this.internalColumnNames)
+
+    this.expandedColumns = [...this.internalColumnNames, 'expand'];
 
     if(this.templateElement == undefined) {
       this.datasource.data = this.gamesystem!.states;
@@ -52,6 +59,20 @@ export class ProductStateEditorComponent implements OnInit{
     }
   }
 
+  private renameDuplicateColumnNames(columnNames: string[]) {
+    for(let i=0; i<columnNames.length; i++) {
+      for(let j=i; j<columnNames.length; j++) {
+        if(i === j) {
+          continue;
+        }
+
+        if(columnNames[i] === columnNames[j]) {
+          columnNames[j] = columnNames[j] + "-" + i
+        }
+      }
+    }
+  }
+
   generateColumnNamesRecursively(gamesystem: ProductGamesystem, nestedColumnName: string) {
     gamesystem.innerGamesystems.forEach(innerGamesystem => {
       if(innerGamesystem instanceof SimpleGamesystem) {

src/app/editor/gamesystem-editor/transition-editor/product-transition-editor/product-transition-editor.component.ts

@@ -50,6 +50,8 @@ export class ProductTransitionEditorComponent implements OnInit{
       const leafGamesystems: SimpleGamesystem[] = LeafGamesystemCalculator.calcLeafGeamesystems(this.gamesystem);
       this.displayedColumns = leafGamesystems.map(leafGamesystem => new DisplayedColumnName(leafGamesystem.componentName, leafGamesystem.componentName + "-start"));
       this.displayedColumns = this.displayedColumns.concat( leafGamesystems.map(leafGamesystem => new DisplayedColumnName(leafGamesystem.componentName, leafGamesystem.componentName + "-end")));
+      this.renameDuplicateColumnNames(this.displayedColumns)
+
 
       this.numberLeafSystems = leafGamesystems.length;
       this.columns = this.displayedColumns.map(column => column.internalName)
@@ -72,6 +74,20 @@ export class ProductTransitionEditorComponent implements OnInit{
     }
   }
 
+  private renameDuplicateColumnNames(columnNames: DisplayedColumnName[]) {
+    for(let i=0; i<columnNames.length; i++) {
+      for(let j=i; j<columnNames.length; j++) {
+        if(i === j) {
+          continue;
+        }
+
+        if(columnNames[i].internalName === columnNames[j].internalName) {
+          columnNames[j].internalName = columnNames[j].internalName + "-" + i
+        }
+      }
+    }
+  }
+
   getLeafStateByIndex(transition: ProductTransition, leafIndex: number) {
     let state: ProductState;
     let index = leafIndex;