migrate angular 21
This commit is contained in:
@@ -1,86 +1,104 @@
|
||||
<div class="split">
|
||||
<app-card
|
||||
*ngIf="song$ | async as song"
|
||||
[heading]="song.number + ' - ' + song.title"
|
||||
closeLink="../"
|
||||
>
|
||||
<div class="song">
|
||||
<div>
|
||||
<div *appRole="['leader', 'contributor']" class="detail">
|
||||
<div>Typ: {{ song.type | songType }}</div>
|
||||
<div>Tonart: {{ song.key }}</div>
|
||||
<div>Tempo: {{ song.tempo }}</div>
|
||||
<div>Status: {{ (song.status | status) || "entwurf" }}</div>
|
||||
<div *ngIf="song.legalOwner">
|
||||
Rechteinhaber: {{ song.legalOwner | legalOwner }}
|
||||
@if (song$ | async; as song) {
|
||||
<app-card
|
||||
[heading]="song.number + ' - ' + song.title"
|
||||
closeLink="../"
|
||||
>
|
||||
<div class="song">
|
||||
<div>
|
||||
<div *appRole="['leader', 'contributor']" class="detail">
|
||||
<div>Typ: {{ song.type | songType }}</div>
|
||||
<div>Tonart: {{ song.key }}</div>
|
||||
<div>Tempo: {{ song.tempo }}</div>
|
||||
<div>Status: {{ (song.status | status) || "entwurf" }}</div>
|
||||
@if (song.legalOwner) {
|
||||
<div>
|
||||
Rechteinhaber: {{ song.legalOwner | legalOwner }}
|
||||
</div>
|
||||
}
|
||||
@if (song.legalOwnerId && song.legalOwner === 'CCLI') {
|
||||
<div>
|
||||
<a
|
||||
href="https://songselect.ccli.com/Songs/{{ song.legalOwnerId }}"
|
||||
target="_blank"
|
||||
>
|
||||
CCLI Nummer: {{ song.legalOwnerId }}
|
||||
</a>
|
||||
</div>
|
||||
}
|
||||
@if (song.legalOwnerId && song.legalOwner !== 'CCLI') {
|
||||
<div>
|
||||
Rechteinhaber ID: {{ song.legalOwnerId }}
|
||||
</div>
|
||||
}
|
||||
@if (song.artist) {
|
||||
<div>Künstler: {{ song.artist }}</div>
|
||||
}
|
||||
@if (song.label) {
|
||||
<div>Verlag: {{ song.label }}</div>
|
||||
}
|
||||
@if (song.origin) {
|
||||
<div>Quelle: {{ song.origin }}</div>
|
||||
}
|
||||
<div>Wie oft verwendet: {{ songCount$ | async }}</div>
|
||||
</div>
|
||||
<div *ngIf="song.legalOwnerId && song.legalOwner === 'CCLI'">
|
||||
<a
|
||||
href="https://songselect.ccli.com/Songs/{{ song.legalOwnerId }}"
|
||||
target="_blank"
|
||||
>
|
||||
CCLI Nummer: {{ song.legalOwnerId }}
|
||||
</a>
|
||||
</div>
|
||||
<div *ngIf="song.legalOwnerId && song.legalOwner !== 'CCLI'">
|
||||
Rechteinhaber ID: {{ song.legalOwnerId }}
|
||||
</div>
|
||||
<div *ngIf="song.artist">Künstler: {{ song.artist }}</div>
|
||||
<div *ngIf="song.label">Verlag: {{ song.label }}</div>
|
||||
<div *ngIf="song.origin">Quelle: {{ song.origin }}</div>
|
||||
<div>Wie oft verwendet: {{ songCount$ | async }}</div>
|
||||
</div>
|
||||
@if (user$ | async; as user) {
|
||||
<app-song-text
|
||||
[chordMode]="user.chordMode"
|
||||
[showSwitch]="true"
|
||||
[text]="song.text"
|
||||
></app-song-text>
|
||||
}
|
||||
<mat-chip-listbox
|
||||
*appRole="['leader', 'contributor']"
|
||||
aria-label="Attribute"
|
||||
>
|
||||
@for (flag of getFlags(song.flags); track flag) {
|
||||
<mat-chip-option>{{
|
||||
flag
|
||||
}}
|
||||
</mat-chip-option>
|
||||
}
|
||||
</mat-chip-listbox>
|
||||
<div *appRole="['leader', 'contributor']" class="text">
|
||||
{{ song.comment }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<app-song-text
|
||||
*ngIf="user$ | async as user"
|
||||
[chordMode]="user.chordMode"
|
||||
[showSwitch]="true"
|
||||
[text]="song.text"
|
||||
></app-song-text>
|
||||
|
||||
<mat-chip-listbox
|
||||
*appRole="['leader', 'contributor']"
|
||||
aria-label="Attribute"
|
||||
>
|
||||
<mat-chip-option *ngFor="let flag of getFlags(song.flags)">{{
|
||||
flag
|
||||
}}
|
||||
</mat-chip-option>
|
||||
</mat-chip-listbox>
|
||||
|
||||
<div *appRole="['leader', 'contributor']" class="text">
|
||||
{{ song.comment }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<app-button-row>
|
||||
<app-button
|
||||
(click)="onDelete(song.id)"
|
||||
*appRole="['admin']"
|
||||
[icon]="faDelete"
|
||||
>Löschen
|
||||
</app-button>
|
||||
<app-button *appRole="['contributor']" [icon]="faEdit" routerLink="edit"
|
||||
>Bearbeiten
|
||||
</app-button>
|
||||
<ng-container *appRole="['leader']">
|
||||
<app-button [icon]="faFileCirclePlus" [matMenuTriggerFor]="menu">
|
||||
Zu Veranstaltung hinzufügen
|
||||
<app-button-row>
|
||||
<app-button
|
||||
(click)="onDelete(song.id)"
|
||||
*appRole="['admin']"
|
||||
[icon]="faDelete"
|
||||
>Löschen
|
||||
</app-button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<app-button (click)="addSongToShow(show, song)" *ngFor="let show of privateShows$|async">
|
||||
{{ show.date.toDate() | date: "dd.MM.yyyy" }} {{ show.showType | showType }}
|
||||
<app-button *appRole="['contributor']" [icon]="faEdit" routerLink="edit"
|
||||
>Bearbeiten
|
||||
</app-button>
|
||||
<ng-container *appRole="['leader']">
|
||||
<app-button [icon]="faFileCirclePlus" [matMenuTriggerFor]="menu">
|
||||
Zu Veranstaltung hinzufügen
|
||||
</app-button>
|
||||
</mat-menu>
|
||||
</ng-container>
|
||||
</app-button-row>
|
||||
</app-card>
|
||||
<ng-container *ngIf="files$ | async as files">
|
||||
<app-card *ngIf="files.length > 0" heading="Anhänge">
|
||||
<p *ngFor="let file of files$ | async">
|
||||
<app-file [file]="file"></app-file>
|
||||
</p>
|
||||
<mat-menu #menu="matMenu">
|
||||
@for (show of privateShows$|async; track show) {
|
||||
<app-button (click)="addSongToShow(show, song)">
|
||||
{{ show.date.toDate() | date: "dd.MM.yyyy" }} {{ show.showType | showType }}
|
||||
</app-button>
|
||||
}
|
||||
</mat-menu>
|
||||
</ng-container>
|
||||
</app-button-row>
|
||||
</app-card>
|
||||
</ng-container>
|
||||
}
|
||||
@if (files$ | async; as files) {
|
||||
@if (files.length > 0) {
|
||||
<app-card heading="Anhänge">
|
||||
@for (file of files$ | async; track file) {
|
||||
<p>
|
||||
<app-file [file]="file"></app-file>
|
||||
</p>
|
||||
}
|
||||
</app-card>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user