benjamin
57 lines
2.1 KiB
HTML
57 lines
2.1 KiB
HTML
@if (viewModel$ | async; as viewModel) {
|
|
<app-page-frame title="Lieder" [menuBadge]="viewModel.filterActive">
|
|
<div class="sidebar-content" sidebar>
|
|
<app-filter [songs]="viewModel.availableSongs"></app-filter>
|
|
</div>
|
|
<div content>
|
|
<app-card [padding]="false">
|
|
@if (viewModel.filterActive) {
|
|
<div class="filter-active">
|
|
<span>Filter aktiv: {{ viewModel.songs.length }} Lieder gefunden.</span>
|
|
<button (click)="resetFilter()" class="filter-reset-link" type="button">Filter zurücksetzen</button>
|
|
</div>
|
|
}
|
|
@for (song of viewModel.songs; track trackBy($index, song)) {
|
|
<div [routerLink]="song.id" class="list-item">
|
|
<div class="number">{{ song.number }}</div>
|
|
<div class="title">
|
|
<span>{{ song.title }}</span>
|
|
@if (song.hasChordValidationIssues) {
|
|
<span class="validation-star" title="Akkord-Validierungsfehler vorhanden">*</span>
|
|
}
|
|
</div>
|
|
<div>
|
|
<ng-container *appRole="['contributor']">
|
|
@if (song.status === 'draft') {
|
|
<div class="warning">
|
|
<fa-icon [icon]="faDraft"></fa-icon>
|
|
</div>
|
|
}
|
|
@if (song.status === 'set') {
|
|
<div class="neutral">
|
|
<fa-icon [icon]="faDraft"></fa-icon>
|
|
</div>
|
|
}
|
|
@if (song.status === 'final') {
|
|
<div class="success">
|
|
<fa-icon [icon]="faFinal"></fa-icon>
|
|
</div>
|
|
}
|
|
</ng-container>
|
|
@if (song.legalType === 'open') {
|
|
<div class="warning">
|
|
<fa-icon [icon]="faLegal"></fa-icon>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div>{{ song.key }}</div>
|
|
</div>
|
|
}
|
|
<div *appRole="['contributor']" class="list-action">
|
|
<app-button [fullWidth]="true" [icon]="faNewSong" routerLink="new">Neuen Song anlegen</app-button>
|
|
</div>
|
|
</app-card>
|
|
</div>
|
|
</app-page-frame>
|
|
}
|