70 lines
2.2 KiB
HTML
70 lines
2.2 KiB
HTML
<div
|
|
class="page-container mat-elevation-z8"
|
|
[class.pinned]="songsService.state !== State.list"
|
|
>
|
|
<div class="table-container">
|
|
<button mat-icon-button (click)="onClickNew()" class="button-new">
|
|
<fa-icon [icon]="faNew"></fa-icon>
|
|
</button>
|
|
<table
|
|
mat-table
|
|
[dataSource]="songsService.songs | async"
|
|
class="mat-elevation-z8"
|
|
>
|
|
<ng-container matColumnDef="Number">
|
|
<th mat-header-cell *matHeaderCellDef>#</th>
|
|
<td mat-cell *matCellDef="let element">
|
|
<mat-chip-list>
|
|
<mat-chip>{{ element.Number }}</mat-chip>
|
|
</mat-chip-list>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="Name">
|
|
<th mat-header-cell *matHeaderCellDef>Titel</th>
|
|
<td mat-cell *matCellDef="let element">{{ element.Name }}</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="Key">
|
|
<th mat-header-cell *matHeaderCellDef></th>
|
|
<td mat-cell *matCellDef="let element">
|
|
<mat-chip-list *ngIf="element.Key">
|
|
<mat-chip>{{ element.Key }}</mat-chip>
|
|
</mat-chip-list>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="SongType">
|
|
<th mat-header-cell *matHeaderCellDef></th>
|
|
<td mat-cell *matCellDef="let element">
|
|
<mat-chip-list
|
|
*ngIf="element.SongType && element.SongType !== 'None'"
|
|
>
|
|
<mat-chip
|
|
[style.background-color]="renderSongType(element.SongType).color"
|
|
>{{ renderSongType(element.SongType).name }}</mat-chip
|
|
>
|
|
</mat-chip-list>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<ng-container matColumnDef="Tempo">
|
|
<th mat-header-cell *matHeaderCellDef></th>
|
|
<td mat-cell *matCellDef="let element">
|
|
<mat-chip-list *ngIf="element.Tempo">
|
|
<mat-chip>{{ element.Tempo }}</mat-chip>
|
|
</mat-chip-list>
|
|
</td>
|
|
</ng-container>
|
|
|
|
<tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
|
|
<tr
|
|
[class.selected]="selectedSongId === row.ID"
|
|
mat-row
|
|
*matRowDef="let row; columns: columns"
|
|
(click)="onClick(row.ID)"
|
|
></tr>
|
|
</table>
|
|
</div>
|
|
</div>
|