Enable Disable Editing Mode in Action Editor and implement expandable rows in product-state-editor

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

@@ -4,7 +4,7 @@
       <mat-label>Filter</mat-label>
       <input matInput (keyup)="applyFilter($event)" placeholder="Filter" #input>
     </mat-form-field>
-    <table mat-table [dataSource]="datasource" class="mat-elevation-z8">
+    <table mat-table [dataSource]="datasource" class="mat-elevation-z8" multiTemplateDataRows>
       <ng-container *ngFor="let col of displayedColumns; let i = index" [matColumnDef]="col">
         <th mat-header-cell *matHeaderCellDef>{{col}}</th>
         <td mat-cell *matCellDef="let state">
@@ -15,8 +15,36 @@
         </td>
       </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <ng-container matColumnDef="expand">
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        <th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</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>
+
+      <ng-container matColumnDef="expandedDetail">
+        <td mat-cell *matCellDef="let element" [attr.colspan]="expandedColumns.length">
+          <div class="example-element-detail"
+               [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
+            <p>Expanded Row</p>
+          </div>
+        </td>
+      </ng-container>
+
+
+      <tr mat-header-row *matHeaderRowDef="expandedColumns"></tr>
+      <tr mat-row *matRowDef="let element; columns: expandedColumns;"
+          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>
   </mat-card-content>
 </mat-card>

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

@@ -2,10 +2,59 @@ table {
   width: 100%;
 }
 
-.mat-column-Initial {
+.mat-column-Initial, .mat-column-expand {
   width: 32px;
 }
 
 .long-form {
   width: 100%;
 }
+
+
+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-detail {
+  overflow: hidden;
+  display: flex;
+}
+
+.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;
+}

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

@@ -9,10 +9,18 @@ import {State} from "../../../../game-model/gamesystems/states/State";
 import {LeafGamesystemCalculator} from "../../product-gamesystem-editor/LeafGamesystemCalculator";
 import {ProductTransition} from "../../../../game-model/gamesystems/transitions/ProductTransition";
 import {ProductState} from "../../../../game-model/gamesystems/states/ProductState";
+import {animate, state, style, transition, trigger} from "@angular/animations";
 
 @Component({
   selector: 'app-product-state-editor',
   templateUrl: './product-state-editor.component.html',
+  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)')),
+    ]),
+  ],
   styleUrl: './product-state-editor.component.scss'
 })
 export class ProductStateEditorComponent implements OnInit{
@@ -20,13 +28,16 @@ export class ProductStateEditorComponent implements OnInit{
   @Input() gamesystem: ProductGamesystem | undefined
   @Output('onOpenGamesystemEditor') openGamesystemEditorEmitter = new EventEmitter<SimpleGamesystem>();
   displayedColumns: string[] = [];
+  expandedColumns: string[] = []
   datasource = new MatTableDataSource<ProductState>();
 
+  expandedElement: ProductState | null = null;
 
   ngOnInit() {
     this.gamesystem!.generateFromChildsystems();
     this.generateColumnNamesRecursively(this.gamesystem!, "");
     this.displayedColumns.push('Initial');
+    this.expandedColumns = [...this.displayedColumns, 'expand'];
     this.datasource.data = this.gamesystem!.states;
     this.datasource.filterPredicate = (data: ProductState, filter: string) => {
       const leaf_states = LeafGamesystemCalculator.calcLeafStates(data);

src/app/editor/gamesystem-editor/transition-editor/scriptaccount-action-editor/scriptaccount-action-editor.component.ts

@@ -12,6 +12,7 @@ import {ScriptAccount} from "../../../../game-model/scriptAccounts/ScriptAccount
 export class ScriptaccountActionEditorComponent  implements OnInit{
   @Input() transition: Transition<any> | undefined
   @Input() scriptAccounts: ScriptAccount[] = []
+  @Input() enableEditing: boolean = false;
 
   dataSource: MatTableDataSource<ScriptAccountAction> = new MatTableDataSource();
   displayedColumns: string[] = ['scriptAccount', "valueChange", 'edit', 'delete'];
@@ -21,7 +22,10 @@ export class ScriptaccountActionEditorComponent  implements OnInit{
 
   ngOnInit() {
     this.dataSource.data = this.transition!.scriptAccountActions.map(action => action);
-    console.log("# ScriptAccounts", this.scriptAccounts.length)
+
+    if(!this.enableEditing) {
+      this.displayedColumns = this.displayedColumns.slice(0, -2);
+    }
   }
 
   editAction(scriptAccountAction: ScriptAccountAction) {