feat: Zeilen-Erweiterungsfunktion zur EnvelopeTableComponent hinzugefügt

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.html

@@ -1,10 +1,48 @@
 <table #table mat-table [dataSource]="data" class="mat-elevation-z8">
 
-    <ng-container *ngFor="let colId of displayedColumns" [matColumnDef]="colId">
+    @for (colId of displayedColumns; track colId) {
+    <ng-container matColumnDef="{{colId}}">
         <th mat-header-cell *matHeaderCellDef> {{schema[colId].header}} </th>
         <td mat-cell *matCellDef="let element"> {{schema[colId].field(element)}} </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>
+
+    <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
+    <ng-container matColumnDef="expandedDetail">
+        <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
+            <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
+                <div class="example-element-diagram">
+                    <div class="example-element-position"> {{"element.position"}} </div>
+                    <div class="example-element-symbol"> {{"element.symbol"}} </div>
+                    <div class="example-element-name"> {{"element.name"}} </div>
+                    <div class="example-element-weight"> {{"element.weight"}} </div>
+                </div>
+                <div class="example-element-description">
+                    {{"element.description"}}
+                    <span class="example-element-description-attribution"> -- Wikipedia </span>
+                </div>
+            </div>
+        </td>
+    </ng-container>
+
+    <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>
+    <!--<tr mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpandedRow" class="example-detail-row"></tr>-->
 </table>

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.scss

@@ -0,0 +1,31 @@
+.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;
+  }

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/envelope-table/envelope-table.component.ts

@@ -2,12 +2,22 @@ import { Component, ViewChild } from '@angular/core';
 import { EnvelopeReceiverService } from '../../services/envelope-receiver.service';
 import { MatTable, MatTableModule } from '@angular/material/table';
 import { CommonModule } from '@angular/common'
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+import {animate, state, style, transition, trigger} from '@angular/animations';
 
 @Component({
   selector: 'app-envelope-table',
   standalone: true,
-  imports: [MatTableModule, CommonModule],
+  imports: [MatTableModule, CommonModule, MatTableModule, MatButtonModule, MatIconModule],
   templateUrl: './envelope-table.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: './envelope-table.component.scss'
 })
 export class EnvelopeTableComponent {
@@ -15,7 +25,8 @@ export class EnvelopeTableComponent {
   data: Array<any> = []
 
   public displayedColumns: string[] = ['title', 'status', 'type', 'privateMessage', 'addedWhen'];
-
+  columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
+  
   schema: any = {
     'title': {
       header: 'Title',
@@ -39,6 +50,8 @@ export class EnvelopeTableComponent {
     },
   }
 
+  expandedElement: any | null;
+
   @ViewChild(MatTable) table!: MatTable<any>;
 
   constructor(private erService: EnvelopeReceiverService) { }
@@ -50,4 +63,8 @@ export class EnvelopeTableComponent {
   public updateTable() {
     this.table.renderRows();
   }
+
+  isExpandedRow(index: number, row: any): boolean {
+    return (row?.envelopeId === this.expandedElement?.envelopeId) && (row?.receiverId === this.expandedElement?.receiverId);
+  }  
 }