feat: Sortierung der Tabelle hinzugefügt

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

@@ -1,8 +1,13 @@
-<table #table mat-table [dataSource]="data" class="mat-elevation-z8">
+<mat-form-field>
+    <mat-label>Filter</mat-label>
+    <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input>
+</mat-form-field>
+
+<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> {{schema[colId].header}} </th>
+        <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>
     }
@@ -22,22 +27,7 @@
     </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"
@@ -45,4 +35,5 @@
         (click)="expandedElement = expandedElement === element ? null : element">
     </tr>
     <!--<tr mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpandedRow" class="example-detail-row"></tr>-->
-</table>
+</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

@@ -1,31 +1,10 @@
-.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;
-  }
+/* Structure */
+table {
+  width: 100%;
+}
+
+.mat-mdc-form-field {
+  font-size: 14px;
+  width: 100%;
+  margin-top: 10px;
+}

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

@@ -1,15 +1,19 @@
-import { Component, Input, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, Input, ViewChild } from '@angular/core';
 import { EnvelopeReceiverService } from '../../services/envelope-receiver.service';
-import { MatTable, MatTableModule } from '@angular/material/table';
+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';
 
 @Component({
   selector: 'app-envelope-table',
   standalone: true,
-  imports: [MatTableModule, CommonModule, MatTableModule, MatButtonModule, MatIconModule],
+  imports: [MatTableModule, CommonModule, MatTableModule, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, MatTableModule, MatPaginator, MatPaginatorModule, MatSort, MatSortModule],
   templateUrl: './envelope-table.component.html',
   animations: [
     trigger('detailExpand', [
@@ -20,9 +24,7 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
   ],
   styleUrl: './envelope-table.component.scss'
 })
-export class EnvelopeTableComponent {
-
-  @Input() data: Array<any> = []
+export class EnvelopeTableComponent implements AfterViewInit  {
 
   @Input() options?: { min_status?: number; max_status?: number; ignore_status?: number[] }
 
@@ -57,13 +59,27 @@ export class EnvelopeTableComponent {
 
   @ViewChild(MatTable) table!: MatTable<any>;
 
-  constructor(private erService: EnvelopeReceiverService) { }
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
 
-  async ngOnInit() {
-    if (this.data.length === 0)
-      this.data = await this.erService.getEnvelopeReceiverAsync(this.options);
+  @ViewChild(MatSort) sort!: MatSort;
+
+  dataSource = new MatTableDataSource();
+
+  constructor(private erService: EnvelopeReceiverService) {
+    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();
   }
@@ -71,4 +87,13 @@ export class EnvelopeTableComponent {
   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();
+    }
+  }
 }