Expand Product Transitions

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

@@ -4,14 +4,31 @@
       <mat-label>Filter</mat-label>
       <input matInput (keyup)="applyFilter($event)" placeholder="Filter" #input>
     </mat-form-field>
-    <table mat-table [dataSource]="dataSource">
+    <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
       <ng-container *ngFor="let col of displayedColumns; let i = index" [matColumnDef]="col.internalName">
         <th mat-header-cell *matHeaderCellDef (dblclick)="openGamesystemEditor(i)">{{col.displayedName}}</th>
         <td mat-cell *matCellDef="let transition" [matTooltip]="getLeafStateByIndex(transition, i).stateDescription" (dblclick)="openGamesystemEditor(i)">
           {{getLeafStateByIndex(transition, i).stateLabel}}
         </td>
+
       </ng-container>
 
+      <ng-container  [matColumnDef]="'expand'">
+        <th mat-header-cell *matHeaderCellDef ></th>
+        <td mat-cell *matCellDef="let transition">
+          <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === transition ? null : transition); $event.stopPropagation()">
+            @if (expandedElement === transition) {
+              <mat-icon>keyboard_arrow_up</mat-icon>
+            } @else {
+              <mat-icon>keyboard_arrow_down</mat-icon>
+            }
+          </button>
+        </td>
+
+      </ng-container>
+
+
+
       <ng-container matColumnDef="header-row-sec-group">
         <th
           mat-header-cell
@@ -28,7 +45,7 @@
           mat-header-cell
           *matHeaderCellDef
           [style.text-align]="'center'"
-          [attr.colspan]="numberLeafSystems"
+          [attr.colspan]="numberLeafSystems+1"
         >
           Ending State
         </th>
@@ -41,9 +58,22 @@
         ></tr>
       </ng-container>
 
+      <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>Expanded Row</p>
+          </div>
+        </td>
+      </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="columns;sticky:true"></tr>
+
-      <tr mat-row *matRowDef="let row; columns: columns;"></tr>
+      <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 mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
 
       <tr class="mat-row" *matNoDataRow>
         <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>

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

@@ -2,3 +2,56 @@
   width: 100%;
 }
 
+
+.mat-column-expand {
+  width: 32px;
+  text-align: center;
+}
+
+table {
+  width: 100%;
+}
+
+tr.example-detail-row {
+  height: 0;
+}
+
+tr.example-element-row:not(.example-expanded-row):hover {
+  background: whitesmoke;
+}
+
+tr.example-element-row:not(.example-expanded-row):active {
+  background: #efefef;
+}
+
+.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/transition-editor/product-transition-editor/product-transition-editor.component.ts

@@ -7,6 +7,7 @@ import {
 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";
 class DisplayedColumnName {
   displayedName: string
   internalName: string
@@ -20,7 +21,14 @@ class DisplayedColumnName {
 @Component({
   selector: 'app-product-transition-editor',
   templateUrl: './product-transition-editor.component.html',
-  styleUrl: './product-transition-editor.component.scss'
+  styleUrl: './product-transition-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 ProductTransitionEditorComponent implements OnInit{
 
@@ -30,6 +38,8 @@ export class ProductTransitionEditorComponent implements OnInit{
   dataSource = new MatTableDataSource<ProductTransition>();
   displayedColumns: DisplayedColumnName[] = [];
   columns: string[] = [];
+  columnsToDisplayWithExpand = [...this.columns, 'expand'];
+  expandedElement: ProductTransition | null = null
   numberLeafSystems: number = -1;
 
   ngOnInit() {
@@ -40,6 +50,7 @@ export class ProductTransitionEditorComponent implements OnInit{
 
       this.numberLeafSystems = leafGamesystems.length;
       this.columns = this.displayedColumns.map(column => column.internalName)
+      this.columnsToDisplayWithExpand = [...this.columns, 'expand']
 
       this.dataSource.data = this.gamesystem.transitions;
       this.dataSource.filterPredicate = (data: ProductTransition, filter: string) => {