77 lines
3.1 KiB
HTML
77 lines
3.1 KiB
HTML
<!-- /src/app/shared/components/table/generic-table/generic-table.component.html -->
|
|
|
|
<div class="table-container">
|
|
<table class="modern-table">
|
|
<thead>
|
|
<tr>
|
|
<th *ngFor="let col of columns" [ngClass]="col.cssClass">{{ col.title }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr *ngFor="let item of displayedData">
|
|
<td *ngFor="let col of columns" [ngClass]="col.cssClass">
|
|
|
|
<ng-container [ngSwitch]="col.type">
|
|
|
|
<ng-container *ngSwitchCase="'text'">
|
|
<div>
|
|
<span [class.mono]="col.key === 'id' || col.key === 'orderNumber' || col.key === 'sku'">
|
|
{{ getProperty(item, col.key) }}
|
|
</span>
|
|
<div *ngIf="col.subKey" class="user-email">
|
|
{{ getProperty(item, col.subKey) }}
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngSwitchCase="'currency'">
|
|
<span class="amount">{{ getProperty(item, col.key) | currency:'EUR' }}</span>
|
|
</ng-container>
|
|
|
|
<!-- VEREINFACHT: Wir übergeben den Wert direkt, die Pille kümmert sich um den Rest. -->
|
|
<ng-container *ngSwitchCase="'status'">
|
|
<app-status-pill [status]="getProperty(item, col.key)"></app-status-pill>
|
|
</ng-container>
|
|
|
|
<ng-container *ngSwitchCase="'image-text'">
|
|
<div class="user-cell">
|
|
<img [src]="getProperty(item, col.imageKey!) || fallbackImage"
|
|
alt="{{ item.name }}" />
|
|
<div>
|
|
<div class="user-name">{{ getProperty(item, col.key) }}</div>
|
|
<div class="user-email">{{ getProperty(item, col.subKey!) }}</div>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<ng-container *ngSwitchCase="'image'">
|
|
<img [src]="getProperty(item, col.key) || fallbackImage"
|
|
alt="{{ item.name }}"
|
|
style="width: 50px; height: 50px; object-fit: cover; border-radius: 4px;">
|
|
</ng-container>
|
|
|
|
<ng-container *ngSwitchCase="'actions'">
|
|
<div class="actions-cell">
|
|
<app-button buttonType="icon" tooltip="Details anzeigen" iconName="eye" (click)="view.emit(item)"></app-button>
|
|
<app-button buttonType="icon" tooltip="Bearbeiten" iconName="edit" (click)="edit.emit(item)"></app-button>
|
|
<app-button buttonType="icon-danger" tooltip="Löschen" iconName="delete" (click)="delete.emit(item)"></app-button>
|
|
</div>
|
|
</ng-container>
|
|
|
|
</ng-container>
|
|
</td>
|
|
</tr>
|
|
<tr *ngIf="!displayedData || displayedData.length === 0">
|
|
<td [attr.colspan]="columns.length" class="no-data-cell">Keine Daten gefunden.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div *ngIf="data.length > itemsPerPage">
|
|
<app-paginator
|
|
[currentPage]="currentPage"
|
|
[totalItems]="data.length"
|
|
[itemsPerPage]="itemsPerPage"
|
|
(pageChange)="onPageChange($event)"
|
|
></app-paginator>
|
|
</div> |