refactor: Aktualisierung von EnvelopeTableComponent zur Verwendung der Angular Material Tabelle

- Ersetzte `@generic-ui/ngx-grid` durch Angular Material Tabellenkomponenten.
- Aktualisierte `EnvelopeTableComponent`, um `mat-table` für die Tabellenanzeige zu verwenden.
- Umorganisierte Daten- und Schema-Definitionen zur Kompatibilität mit Angular Material Tabelle.
- Füge `MatTableModule` und `CommonModule` zu den Komponenten-Imports hinzu.
- Implementierte dynamische Spaltenanzeige basierend auf dem Schema.
- Hinzugefügt `updateTable` Methode zur erneuten Darstellung der Tabelle.

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

@@ -1,13 +1,10 @@
-<gui-grid 
-[columns]="columns"
-[source]="source"
-[columnMenu]="columnMenu"
-[paging]="paging"
-[sorting]="sorting"
-[searching]="searching"
-[infoPanel]="infoPanel"
-[localization]="localization"
-[theme]="theme"
-[autoResizeWidth] = "true"
->
-</gui-grid>
+<table #table mat-table [dataSource]="data" class="mat-elevation-z8">
+
+    <ng-container *ngFor="let colId of displayedColumns" [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>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>    
+</table>

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

@@ -1,132 +1,53 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { EnvelopeReceiverService } from '../../services/envelope-receiver.service';
-import { GuiColumn, GuiColumnMenu, GuiGridModule, GuiInfoPanel, GuiLocalization, GuiPaging, GuiPagingDisplay, GuiSearching, GuiSorting, GuiSummaries, GuiTheme } from '@generic-ui/ngx-grid';
+import { MatTable, MatTableModule } from '@angular/material/table';
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'app-envelope-table',
   standalone: true,
-  imports: [GuiGridModule],
+  imports: [MatTableModule, CommonModule],
   templateUrl: './envelope-table.component.html',
   styleUrl: './envelope-table.component.scss'
 })
 export class EnvelopeTableComponent {
 
-  columnMenu: GuiColumnMenu = {
-    enabled: true,
-    sort: true,
-    columnsManager: true
-  };
+  data: Array<any> = []
 
-  sorting: GuiSorting = {
-    enabled: true,
-    multiSorting: true
-  };
+  public displayedColumns: string[] = ['title', 'status', 'type', 'privateMessage', 'addedWhen'];
 
-  paging: GuiPaging = {
-    enabled: true,
-    page: 1,
-    pageSize: 10,
-    pageSizes: [10, 25, 50],
-    pagerTop: true,
-    pagerBottom: true,
-    display: GuiPagingDisplay.ADVANCED
-  };
+  schema: any = {
+    'title': {
+      header: 'Title',
+      field: (element: any) => element.envelope.title
+    },
+    'status': {
+      header: 'Status',
+      field: (element: any) => element.envelope.statusName
+    },
+    'type': {
+      header: 'Type',
+      field: (element: any) => element.envelope.contractType
+    },
+    'privateMessage': {
+      header: 'Private Message',
+      field: (element: any) => element.privateMessage
+    },
+    'addedWhen': {
+      header: 'Added When',
+      field: (element: any) => element.addedWhen
+    },
+  }
 
-  searching: GuiSearching = {
-    enabled: true
-  };
-
-  summaries: GuiSummaries = {
-    enabled: true
-  };
-
-  infoPanel: GuiInfoPanel = {
-    enabled: true,
-    infoDialog: false,
-    columnsManager: true,
-    schemaManager: true
-  };
-
-  localization: GuiLocalization = {
-    translationResolver: (key: string, value: string) => EnvelopeTableComponent.Translation[key] ?? value
-  };
-
-  theme: GuiTheme = GuiTheme.FABRIC;
-
-  source: Array<any> = []
+  @ViewChild(MatTable) table!: MatTable<any>;
 
   constructor(private erService: EnvelopeReceiverService) { }
 
   async ngOnInit() {
-    this.source = await this.erService.getEnvelopeReceiver();
+    this.data = await this.erService.getEnvelopeReceiver();
   }
 
-  columns: Array<GuiColumn> = [
-    {
-      header: 'Title',
-      field: er => er.envelope.title
-    },
-    {
-      header: "Status",
-      field: er => er.envelope.statusName
-    },
-    {
-      header: 'Type',
-      field: er => er.envelope.contractType
-    },
-    {
-      header: 'PrivateMessage',
-      field: 'privateMessage'
-    },
-    {
-      header: 'AddedWhen',
-      field: 'addedWhen'
-    }];
-
-  static readonly Translation: { [key: string]: string } = {
-    "sourceEmpty": "There are no items to show.",
-    "pagingItemsPerPage": "Items per page:",
-    "pagingOf": "of",
-    "pagingNextPage": "Next",
-    "pagingPrevPage": "Prev",
-    "pagingNoItems": "There is no items.",
-    "infoPanelShowing": "Showing",
-    "infoPanelItems": "items",
-    "infoPanelOutOf": "out of",
-    "infoPanelThemeMangerTooltipText": "Theme manager",
-    "infoPanelColumnManagerTooltipText": "Column manager",
-    "infoPanelInfoTooltipText": "info",
-    "themeManagerModalTitle": "Theme manager",
-    "themeManagerModalTheme": "Theme:",
-    "themeManagerModalRowColoring": "Row coloring:",
-    "themeManagerModalVerticalGrid": "Vertical grid",
-    "themeManagerModalHorizontalGrid": "HorizontalGrid",
-    "columnManagerModalTitle": "Manage columns",
-    "headerMenuMainTab": "Menu",
-    "headerMenuMainTabColumnSort": "Column sort",
-    "headerMenuMainTabHideColumn": "Hide column",
-    "headerMenuMainTabHighlightColumn": "Highlight",
-    "headerMenuMainTabMoveLeft": "Move left",
-    "headerMenuMainTabMoveRight": "Move right",
-    "headerMenuMainTabColumnSortAscending": "Ascending",
-    "headerMenuMainTabColumnSortDescending": "Descending",
-    "headerMenuMainTabColumnSortNone": "None",
-    "headerMenuFilterTab": "Filter",
-    "headerMenuColumnsTab": "Columns",
-    "summariesCount": "Count",
-    "summariesDist": "Dist",
-    "summariesSum": "Sum",
-    "summariesAvg": "Avg",
-    "summariesMin": "Min",
-    "summariesMax": "Max",
-    "summariesMed": "Med",
-    "summariesTruthy": "Truthy",
-    "summariesFalsy": "Falsy",
-    "summariesDistinctValuesTooltip": "Distinct values",
-    "summariesAverageTooltip": "Average",
-    "summariesMinTooltip": "Min",
-    "summariesMaxTooltip": "Max",
-    "summariesMedTooltip": "Median",
-    "summariesCountTooltip": "Number of items in the grid"
+  public updateTable() {
+    this.table.renderRows();
   }
 }