AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: Sortierung der Tabelle hinzugefügt

Browse Source
This commit is contained in:
Developer 02 2024-08-30 23:38:02 +02:00
parent d5de868eb9
commit 939ba1bb47
2 changed files with 12 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,11 +3,11 @@
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input> <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input>
</mat-form-field> </mat-form-field>
<table #table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <table #table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>
@for (colId of displayedColumns; track colId) { @for (colId of displayedColumns; track colId) {
<ng-container matColumnDef="{{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> <td mat-cell *matCellDef="let element"> {{schema[colId].field(element)}} </td>
</ng-container> </ng-container>
} }
@ -27,22 +27,7 @@
</ng-container> </ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns --> <!-- 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-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;" class="example-element-row" <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;" class="example-element-row"

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

@ -5,15 +5,15 @@ import { CommonModule } from '@angular/common'
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import { animate, state, style, transition, trigger } from '@angular/animations'; import { animate, state, style, transition, trigger } from '@angular/animations';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator'; import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator';
import {MatSort, MatSortModule} from '@angular/material/sort';
@Component({ @Component({
selector: 'app-envelope-table', selector: 'app-envelope-table',
standalone: true, standalone: true,
imports: [MatTableModule, CommonModule, MatTableModule, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, MatTableModule, MatPaginator, MatPaginatorModule], imports: [MatTableModule, CommonModule, MatTableModule, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, MatTableModule, MatPaginator, MatPaginatorModule, MatSort, MatSortModule],
templateUrl: './envelope-table.component.html', templateUrl: './envelope-table.component.html',
animations: [ animations: [
trigger('detailExpand', [ trigger('detailExpand', [
@ -61,6 +61,8 @@ export class EnvelopeTableComponent implements AfterViewInit {
@ViewChild(MatPaginator) paginator!: MatPaginator; @ViewChild(MatPaginator) paginator!: MatPaginator;
@ViewChild(MatSort) sort!: MatSort;
dataSource = new MatTableDataSource(); dataSource = new MatTableDataSource();
constructor(private erService: EnvelopeReceiverService) { constructor(private erService: EnvelopeReceiverService) {
@ -75,6 +77,7 @@ export class EnvelopeTableComponent implements AfterViewInit {
async ngAfterViewInit() { async ngAfterViewInit() {
this.dataSource.paginator = this.paginator; this.dataSource.paginator = this.paginator;
this.dataSource.data = await this.erService.getEnvelopeReceiverAsync(this.options); this.dataSource.data = await this.erService.getEnvelopeReceiverAsync(this.options);
this.dataSource.sort = this.sort;
} }
public updateTable() { public updateTable() {
@ -87,9 +90,10 @@ export class EnvelopeTableComponent implements AfterViewInit {
applyFilter(event: Event) { applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value; const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
this.dataSource.filter = "test82"; if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
console.log(this.dataSource.filteredData) }
} }
} }