feat: Implementieren und integrieren von wiederverwendbaren Angular Material-Tabellenkomponenten

- Erstellen der `DDTable`-Komponente für dynamische Angular Material-Tabellen mit Unterstützung für erweiterbare Zeilen, Filterung, Sortierung und Pagination.
- Ersetzen der bestehenden Tabellenimplementierung in `EnvelopeTableComponent` durch die `DDTable`-Komponente für verbesserte Funktionalität und Wartbarkeit.
- Aktualisieren der `EnvelopeTableComponent`, um `DDTable` für die Anzeige von Umschlagdaten zu verwenden, einschließlich Filter- und Paginierungsoptionen.
- Implementieren von `ClearableInputComponent` für eine verbesserte Filtererfahrung.
- Anpassen des Datenabrufs und -handlings, um die Integration von `DDTable` zu berücksichtigen.
- Verbessern der `EnvelopeTableComponent` mit ordnungsgemäßen Animationstriggern für erweiterbare Zeilen.

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

@@ -0,0 +1,59 @@
+@if(isFilterable) {
+<mat-form-field>
+  <mat-label>{{filter.label}}</mat-label>
+  <input matInput (keyup)="applyFilter($event)" [placeholder]="filter.placeholder" #input>
+</mat-form-field>
+}
+
+<table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8" matSort>
+  @for (column of __columnsToDisplay; track column) {
+  <ng-container matColumnDef="{{column}}">
+    @if(isSortable) {
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{schema[column].header}} </th>
+    }
+    @else {
+    <th mat-header-cell *matHeaderCellDef> {{schema[column].header}} </th>
+    }
+    <td mat-cell *matCellDef="let element"> {{schema[column].field(element)}} </td>
+  </ng-container>
+  }
+
+  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
+  @if(isExpandable) {
+  <ng-container matColumnDef="expand">
+    <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)="toggleExpandedRow(element, $event)">
+        @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]="__columnsToDisplayWithExpand.length">
+      <div class="example-element-detail" [@detailExpand]="element == __expandedElement ? 'expanded' : 'collapsed'">
+        @if(__expandedElement === element){
+        <ng-content select="[expanded]" detailed></ng-content>
+        }
+      </div>
+    </td>
+  </ng-container>
+  }
+  @if(isExpandable) {
+  <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)="toggleExpandedRow(element, $event)">
+  </tr>
+  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
+  }
+  @else {
+  <tr mat-header-row *matHeaderRowDef="__columnsToDisplay"></tr>
+  <tr mat-row *matRowDef="let row; columns: __columnsToDisplay;"></tr>
+  }
+</table>
+@if(paginatorSizeOptions && paginatorSizeOptions.length > 0) {
+<mat-paginator [pageSizeOptions]="paginatorSizeOptions" aria-label="Select page of users"></mat-paginator>
+}

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

@@ -0,0 +1,52 @@
+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;
+}
+
+.mat-mdc-form-field {
+  font-size: 14px;
+  width: 100%;
+}

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

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

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

@@ -0,0 +1,103 @@
+import { AfterViewInit, Component, Input, ViewChild, inject } from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTable, MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { ConfigurationService } from '../../services/configuration.service';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+
+/**
+ * @title Table with expandable rows
+ */
+@Component({
+  selector: 'dd-table',
+  styleUrl: 'dd-table.component.scss',
+  templateUrl: 'dd-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)')),
+    ]),
+  ],
+  standalone: true,
+  imports: [
+    MatTableModule,
+    MatButtonModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatTableModule,
+    MatSort,
+    MatSortModule,
+    MatPaginator,
+    MatPaginatorModule
+  ],
+})
+export class DDTable implements AfterViewInit {
+  public readonly dataSource: any = new MatTableDataSource();
+  @Input() public set columnsToDisplay(value: string[]) {
+    this.__columnsToDisplay = value;
+    this.__columnsToDisplayWithExpand = [...value, 'expand'];
+  }
+  @Input() public set data(value: any[]) {
+    this.dataSource.data = value;
+  }
+  @Input() schema: Record<string, { header: string; field: (element: any) => any; }> = {}
+
+  @Input() paginatorSizeOptions?: number[];
+
+  @Input() filter: { label: string, placeholder: string } = { label: '', placeholder: '' }
+
+  @Input() isFilterable: boolean = false;
+
+  @Input() isExpandable: boolean = false;
+
+  @Input() isSortable: boolean = false;
+
+  @Input() onToggleExpandedRow: (element: any, event: Event) => void = (element: any, event: Event) => { }
+
+  public get data(): any[] {
+    return this.dataSource.data;
+  }
+  __columnsToDisplay: string[] = [];
+  __columnsToDisplayWithExpand: string[] = [];
+  __expandedElement!: any;
+
+  config: ConfigurationService = inject(ConfigurationService);
+
+  @ViewChild(MatSort) sort!: MatSort;
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatTable) table!: MatTable<any>;
+
+  ngAfterViewInit(): void {
+    if (this.isSortable)
+      this.dataSource.sort = this.sort;
+    if (this.paginatorSizeOptions && this.paginatorSizeOptions.length > 0)
+      this.dataSource.paginator = this.paginator;
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  update() {
+    this.table.renderRows();
+  }
+
+  toggleExpandedRow(element: any, event: Event): void {
+    // first determine the new expanded element, thus it would be possible to use up-to-date 
+    const newExpandedElement = this.__expandedElement === element ? null : element;
+
+    // before update the expanded element call the call-back method to show up-to-date component
+    this.onToggleExpandedRow(newExpandedElement, event);
+
+    // assign expanded element
+    this.__expandedElement = newExpandedElement;
+    event.stopPropagation();
+  }
+}

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

@@ -1,39 +1,4 @@
-<mat-form-field>
+<dd-table [data]="data" [columnsToDisplay]="displayedColumns" [schema]="schema"
-    <mat-label>Filter</mat-label>
+    [paginatorSizeOptions]="[5, 10, 25, 100]" [filter]="{label: 'Filter', placeholder: ''}"
-    <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input>
+    [onToggleExpandedRow]="onToggleExpandedRow" [isSortable]="true" [isExpandable]="false" [isFilterable]="true">
-</mat-form-field>
+</dd-table>
-
-<table #table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>
-
-    @for (colId of displayedColumns; track colId) {
-    <ng-container matColumnDef="{{colId}}">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{schema[colId].header}} </th>
-        <td mat-cell *matCellDef="let element"> {{schema[colId].field(element)}} </td>
-    </ng-container>
-    }
-
-    <ng-container matColumnDef="expand">
-        <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 -->
-
-
-    <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>
-<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>

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

@@ -7,4 +7,53 @@ table {
   font-size: 14px;
   width: 100%;
   margin-top: 10px;
+}
+
+/* For expanding table */
+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;
 }

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

@@ -1,20 +1,14 @@
-import { AfterViewInit, Component, Input, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, Input, ViewChild, inject, viewChild } from '@angular/core';
 import { EnvelopeReceiverService } from '../../services/envelope-receiver.service';
-import { MatTable, MatTableModule, MatTableDataSource } 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';
-import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator';
-import {MatSort, MatSortModule} from '@angular/material/sort';
 import { ConfigurationService } from '../../services/configuration.service';
+import { DDTable } from "../dd-table/dd-table.component";
+import { ClearableInputComponent } from '../clearable-input/clearable-input.component'
 
 @Component({
   selector: 'app-envelope-table',
   standalone: true,
-  imports: [MatTableModule, CommonModule, MatTableModule, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, MatTableModule, MatPaginator, MatPaginatorModule, MatSort, MatSortModule],
+  imports: [DDTable, ClearableInputComponent],
   templateUrl: './envelope-table.component.html',
   animations: [
     trigger('detailExpand', [
@@ -25,13 +19,13 @@ import { ConfigurationService } from '../../services/configuration.service';
   ],
   styleUrl: './envelope-table.component.scss'
 })
-export class EnvelopeTableComponent implements AfterViewInit  {
+export class EnvelopeTableComponent implements AfterViewInit {
 
   @Input() options?: { min_status?: number; max_status?: number; ignore_status?: number[] }
 
-  @Input() displayedColumns: string[] = ['title', 'status', 'type', 'privateMessage', 'addedWhen'];
+  displayedColumns: string[] = ['title', 'status', 'type', 'privateMessage', 'addedWhen'];
 
-  @Input() schema: Record<string, { header: string; field: (element: any) => any; }> = {
+  schema: Record<string, { header: string; field: (element: any) => any; }> = {
     'title': {
       header: 'Title',
       field: (element: any) => element.envelope.title
@@ -51,50 +45,20 @@ export class EnvelopeTableComponent implements AfterViewInit  {
     'addedWhen': {
       header: 'Added When',
       field: (element: any) => element.addedWhen
-    },
-  }
-
-  columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
-
-  expandedElement: any | null;
-
-  @ViewChild(MatTable) table!: MatTable<any>;
-
-  @ViewChild(MatPaginator) paginator!: MatPaginator;
-
-  @ViewChild(MatSort) sort!: MatSort;
-
-  dataSource = new MatTableDataSource();
-
-  constructor(private erService: EnvelopeReceiverService, private config: ConfigurationService) {
-    this.dataSource.filterPredicate = (data: any, filter: string): boolean => {
-      const dataStr = Object.values(data as { [key: string]: any }).reduce((currentTerm, key) => {
-        return currentTerm + (key ? key.toString().toLowerCase() : '');
-      }, '').trim().toLowerCase();
-      return dataStr.indexOf(filter) !== -1;
-    };
-  }
-
-  async ngAfterViewInit() {
-    this.dataSource.paginator = this.paginator;
-    this.dataSource.data = await this.erService.getEnvelopeReceiverAsync(this.options);
-    this.dataSource.sort = this.sort;
-  }
- 
-  public updateTable() {
-    this.table.renderRows();
-  }
-
-  isExpandedRow(index: number, row: any): boolean {
-    return (row?.envelopeId === this.expandedElement?.envelopeId) && (row?.receiverId === this.expandedElement?.receiverId);
-  }
-
-  applyFilter(event: Event) {
-    const filterValue = (event.target as HTMLInputElement).value;
-    this.dataSource.filter = filterValue.trim().toLowerCase();
-
-    if (this.dataSource.paginator) {
-      this.dataSource.paginator.firstPage();
     }
   }
+
+  data: any[] = [];
+
+  @ViewChild(ClearableInputComponent) input!: ClearableInputComponent
+
+  onToggleExpandedRow(element: any, event: Event) { }
+
+  private erService: EnvelopeReceiverService = inject(EnvelopeReceiverService);
+
+  private config: ConfigurationService = inject(ConfigurationService);
+
+  async ngAfterViewInit() {
+    this.data = await this.erService.getEnvelopeReceiverAsync(this.options);
+  }
 }