update angular

This commit is contained in:
2025-01-02 15:01:59 +01:00
parent 73d3ecfd42
commit 802c309679
199 changed files with 13745 additions and 11691 deletions

View File

@@ -4,5 +4,7 @@ import {Component} from '@angular/core';
selector: 'app-archive-dialog',
templateUrl: './archive-dialog.component.html',
styleUrls: ['./archive-dialog.component.less'],
standalone: false,
})
export class ArchiveDialogComponent {}
export class ArchiveDialogComponent {
}

View File

@@ -2,7 +2,6 @@ import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent} from '@angular/material/dialog';
import {MatButton} from '@angular/material/button';
import QRCode from 'qrcode';
import {AsyncPipe} from '@angular/common';
import {ShowTypePipe} from '../../../../widget-modules/pipes/show-type-translater/show-type.pipe';
import {Show} from '../../services/show';
@@ -13,8 +12,7 @@ export interface ShareDialogData {
@Component({
selector: 'app-share-dialog',
standalone: true,
imports: [MatButton, MatDialogActions, MatDialogContent, MatDialogClose, AsyncPipe],
imports: [MatButton, MatDialogActions, MatDialogContent, MatDialogClose],
templateUrl: './share-dialog.component.html',
styleUrl: './share-dialog.component.less',
})

View File

@@ -6,19 +6,21 @@
<mat-select formControlName="showType">
<mat-optgroup label="öffentlich">
<mat-option *ngFor="let key of showTypePublic" [value]="key">{{
key | showType
}}</mat-option>
key | showType
}}
</mat-option>
</mat-optgroup>
<mat-optgroup label="privat">
<mat-option *ngFor="let key of showTypePrivate" [value]="key">{{
key | showType
}}</mat-option>
key | showType
}}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Datum</mat-label>
<input [matDatepicker]="picker" formControlName="date" matInput/>
<input [matDatepicker]="picker" formControlName="date" matInput />
<mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
<mat-datepicker #picker touchUi></mat-datepicker>
</mat-form-field>

View File

@@ -14,6 +14,7 @@ import Timestamp = firebase.firestore.Timestamp;
selector: 'app-edit',
templateUrl: './edit.component.html',
styleUrls: ['./edit.component.less'],
standalone: false,
})
export class EditComponent implements OnInit {
public shows$: Observable<Show[]>;
@@ -38,7 +39,7 @@ export class EditComponent implements OnInit {
map(param => param as {showId: string}),
map(param => param.showId),
switchMap((showId: string) => this.showService.read$(showId)),
take(1)
take(1),
)
.subscribe(show => {
this.form.setValue({
@@ -60,7 +61,7 @@ export class EditComponent implements OnInit {
{
date: Timestamp.fromDate(this.form.value.date),
showType: this.form.value.showType,
} as Partial<Show>
} as Partial<Show>,
);
await this.router.navigateByUrl(`/shows/${this.form.value.id ?? ''}`);
}

View File

@@ -5,8 +5,9 @@
<mat-label>Zeitraum</mat-label>
<mat-select formControlName="time">
<mat-option *ngFor="let time of times" [value]="time.key">{{
time.value
}}</mat-option>
time.value
}}
</mat-option>
</mat-select>
</mat-form-field>

View File

@@ -15,6 +15,7 @@ import {isEqual} from 'lodash';
selector: 'app-filter',
templateUrl: './filter.component.html',
styleUrls: ['./filter.component.less'],
standalone: false,
})
export class FilterComponent {
@Input() public route = '/shows/';
@@ -38,7 +39,7 @@ export class FilterComponent {
private showService: ShowService,
private userService: UserService,
activatedRoute: ActivatedRoute,
fb: UntypedFormBuilder
fb: UntypedFormBuilder,
) {
this.filterFormGroup = fb.group({
time: 1,
@@ -63,7 +64,7 @@ export class FilterComponent {
this.showService.list$().pipe(
map(shows => {
return shows.map(show => show.owner).filter(onlyUnique);
})
}),
),
this.userService.users$,
]).pipe(
@@ -76,7 +77,7 @@ export class FilterComponent {
.sort(dynamicSort('value'));
}),
distinctUntilChanged(isEqual),
map(_ => _ as {key: string; value: string}[])
map(_ => _ as {key: string; value: string}[]),
);
};

View File

@@ -1,5 +1,7 @@
<div class="list-item" *ngIf="show">
<div *ngIf="show" class="list-item">
<div>{{ show.date.toDate() | date: "dd.MM.yyyy" }}</div>
<div><app-user-name [userId]="show.owner"></app-user-name></div>
<div>
<app-user-name [userId]="show.owner"></app-user-name>
</div>
<div>{{ show.showType | showType }}</div>
</div>

View File

@@ -11,7 +11,7 @@ describe('ListItemComponent', () => {
void TestBed.configureTestingModule({
declarations: [ListItemComponent],
}).compileComponents();
})
}),
);
beforeEach(() => {

View File

@@ -5,6 +5,7 @@ import {Show} from '../../services/show';
selector: 'app-list-item',
templateUrl: './list-item.component.html',
styleUrls: ['./list-item.component.less'],
standalone: false,
})
export class ListItemComponent {
@Input() public show: Show | null = null;

View File

@@ -1,5 +1,5 @@
<div>
<!-- <app-list-header *appRole="['leader']"></app-list-header>-->
<!-- <app-list-header *appRole="['leader']"></app-list-header>-->
<app-list-header *appRole="['leader']">
<app-filter *ngIf="shows$ | async as shows" [shows]="publicShows$ | async"></app-filter>
</app-list-header>

View File

@@ -11,7 +11,7 @@ describe('ListComponent', () => {
void TestBed.configureTestingModule({
declarations: [ListComponent],
}).compileComponents();
})
}),
);
beforeEach(() => {

View File

@@ -12,6 +12,7 @@ import {map} from 'rxjs/operators';
templateUrl: './list.component.html',
styleUrls: ['./list.component.less'],
animations: [fade],
standalone: false,
})
export class ListComponent {
public shows$ = this.showService.list$();
@@ -21,13 +22,13 @@ export class ListComponent {
const filterValues = params as FilterValues;
if (!filterValues?.time) return 1;
return +filterValues.time;
})
}),
);
public owner$ = this.activatedRoute.queryParams.pipe(
map(params => {
const filterValues = params as FilterValues;
return filterValues?.owner;
})
}),
);
public publicShows$ = combineLatest([this.shows$, this.lastMonths$, this.owner$]).pipe(
@@ -38,14 +39,15 @@ export class ListComponent {
d.setMonth(d.getMonth() - lastMonths);
return f.published && f.date.toDate() >= d;
})
.filter(show => !owner || show.owner === owner)
)
.filter(show => !owner || show.owner === owner),
),
);
public constructor(
private showService: ShowService,
private activatedRoute: ActivatedRoute
) {}
private activatedRoute: ActivatedRoute,
) {
}
public trackBy = (index: number, show: unknown) => (show as Show).id;
}

View File

@@ -6,19 +6,21 @@
<mat-select formControlName="showType">
<mat-optgroup label="öffentlich">
<mat-option *ngFor="let key of showTypePublic" [value]="key">{{
key | showType
}}</mat-option>
key | showType
}}
</mat-option>
</mat-optgroup>
<mat-optgroup label="privat">
<mat-option *ngFor="let key of showTypePrivate" [value]="key">{{
key | showType
}}</mat-option>
key | showType
}}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Datum</mat-label>
<input [matDatepicker]="picker" formControlName="date" matInput/>
<input [matDatepicker]="picker" formControlName="date" matInput />
<mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
<mat-datepicker #picker touchUi></mat-datepicker>
</mat-form-field>

View File

@@ -11,7 +11,7 @@ describe('NewComponent', () => {
void TestBed.configureTestingModule({
declarations: [NewComponent],
}).compileComponents();
})
}),
);
beforeEach(() => {

View File

@@ -11,6 +11,7 @@ import {faSave} from '@fortawesome/free-solid-svg-icons';
selector: 'app-new',
templateUrl: './new.component.html',
styleUrls: ['./new.component.less'],
standalone: false,
})
export class NewComponent implements OnInit {
public shows$: Observable<Show[]>;
@@ -25,7 +26,7 @@ export class NewComponent implements OnInit {
public constructor(
private showService: ShowService,
showDataService: ShowDataService,
private router: Router
private router: Router,
) {
this.shows$ = showDataService.list$;
}

View File

@@ -33,8 +33,9 @@ export class DocxService {
private songService: SongService,
private textRenderingService: TextRenderingService,
private userService: UserService,
private configService: ConfigService
) {}
private configService: ConfigService,
) {
}
public async create(showId: string, options: DownloadOptions = {}): Promise<void> {
const data = await this.prepareData(showId);
@@ -94,7 +95,10 @@ export class DocxService {
});
}
private renderSongs(songs: {showSong: ShowSong; sections: Section[]}[], options: DownloadOptions, config: Config): Paragraph[] {
private renderSongs(songs: {
showSong: ShowSong;
sections: Section[]
}[], options: DownloadOptions, config: Config): Paragraph[] {
return songs.reduce((p: Paragraph[], song) => [...p, ...this.renderSong(song.showSong, song.showSong, song.sections, options, config)], []);
}
@@ -199,7 +203,10 @@ export class DocxService {
sections,
};
});
const songsLoaded = (await Promise.all(songsAsync)).filter(_ => !!_).map(_ => _ as {showSong: ShowSong; sections: Section[]});
const songsLoaded = (await Promise.all(songsAsync)).filter(_ => !!_).map(_ => _ as {
showSong: ShowSong;
sections: Section[]
});
const songs = show.order.map(_ => songsLoaded.filter(f => f.showSong.id === _)[0]);
return {songs, show, user, config};
}

View File

@@ -8,6 +8,7 @@ import {map} from 'rxjs/operators';
providedIn: 'root',
})
export class ShowDataService {
public list$ = new BehaviorSubject<Show[]>([]);
private collection = 'shows';
public constructor(private dbService: DbService) {
@@ -15,7 +16,7 @@ export class ShowDataService {
}
public listRaw$ = () => this.dbService.col$<Show>(this.collection);
public list$ = new BehaviorSubject<Show[]>([]);
public read$ = (showId: string): Observable<Show | null> => this.list$.pipe(map(_ => _.find(s => s.id === showId) || null));
// public list$ = (): Observable<Show[]> => this.dbService.col$(this.collection);

View File

@@ -11,7 +11,8 @@ export class ShowSongDataService {
private collection = 'shows';
private subCollection = 'songs';
public constructor(private dbService: DbService) {}
public constructor(private dbService: DbService) {
}
public list$ = (showId: string, queryFn?: QueryFn): Observable<ShowSong[]> => this.dbService.col$(`${this.collection}/${showId}/${this.subCollection}`, queryFn);
public read$ = (showId: string, songId: string): Observable<ShowSong | null> => this.dbService.doc$(`${this.collection}/${showId}/${this.subCollection}/${songId}`);

View File

@@ -14,8 +14,9 @@ export class ShowSongService {
private showSongDataService: ShowSongDataService,
private songDataService: SongDataService,
private userService: UserService,
private showService: ShowService
) {}
private showService: ShowService,
) {
}
public async new$(showId: string, songId: string, addedLive = false): Promise<string | null> {
const song = await firstValueFrom(this.songDataService.read$(songId));

View File

@@ -9,7 +9,7 @@ describe('ShowService', () => {
() =>
void TestBed.configureTestingModule({
providers: [{provide: ShowDataService, useValue: mockShowDataService}],
})
}),
);
ShowService.SHOW_TYPE_PUBLIC.forEach(type => {

View File

@@ -25,14 +25,14 @@ export class ShowService {
return this.userService.user$.pipe(
switchMap(
() => this.showDataService.list$,
(user: User | null, shows: Show[]) => ({user, shows})
(user: User | null, shows: Show[]) => ({user, shows}),
),
map(s =>
s.shows
.sort((a, b) => a.date.toMillis() - b.date.toMillis())
.filter(_ => !_.archived)
.filter(show => show.published || (show.owner === s.user?.id && !publishedOnly))
)
.filter(show => show.published || (show.owner === s.user?.id && !publishedOnly)),
),
);
}

View File

@@ -14,28 +14,28 @@
<mat-checkbox *ngIf="!useSwiper" [(ngModel)]="showText">Text anzeigen</mat-checkbox>
</div>
<div [class.floating]="useSwiper">
<app-menu-button @fade (click)="onZoomOut()" [icon]="faZoomOut" class="btn-delete btn-icon"
<app-menu-button (click)="onZoomOut()" @fade [icon]="faZoomOut" class="btn-delete btn-icon"
matTooltip="Verkleinern"></app-menu-button>
<app-menu-button @fade (click)="onZoomIn()" [icon]="faZoomIn" class="btn-delete btn-icon"
<app-menu-button (click)="onZoomIn()" @fade [icon]="faZoomIn" class="btn-delete btn-icon"
matTooltip="Vergrößern"></app-menu-button>
<app-menu-button (click)="useSwiper=!useSwiper;fullscreen(useSwiper)" @fade
[icon]="useSwiper ? faFileLines : faFile" class="btn-delete btn-icon"
matTooltip="Swiper umschalten"></app-menu-button>
</div>
</div>
<div *ngIf="showSongs && !useSwiper" [cdkDropListDisabled]="show.published || showText" cdkDropList
class="song-list"
<div (cdkDropListDropped)="drop($event, show)" *ngIf="showSongs && !useSwiper" [cdkDropListDisabled]="show.published || showText"
[style.cursor]="!(show.published || showText) ? 'drag' : 'inherit'"
[style.font-size]="textSize + 'em'"
(cdkDropListDropped)="drop($event, show)">
<div *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy" class="song-row" cdkDrag>
cdkDropList
class="song-list">
<div *ngFor="let song of orderedShowSongs(show); let i = index; trackBy: trackBy" cdkDrag class="song-row">
<app-song
[showSong]="song"
[showId]="showId"
[showText]="showText"
[show]="show"
[fullscreen]="useSwiper"
[index]="i"
[showId]="showId"
[showSong]="song"
[showText]="showText"
[show]="show"
></app-song>
</div>
</div>
@@ -57,8 +57,8 @@
<app-add-song
*ngIf="songs && !show.published && !useSwiper"
[show]="show"
[showSongs]="showSongs"
[show]="show"
[songs]="songs"
></app-add-song>
@@ -80,7 +80,7 @@
<app-button (click)="onShare(show)" *ngIf="show.published" [icon]="faShare">
Teilen
</app-button>
<app-button (click)="onChange(show.id)" [icon]="faSliders" *ngIf="!show.published">
<app-button (click)="onChange(show.id)" *ngIf="!show.published" [icon]="faSliders">
Ändern
</app-button>
</ng-container>

View File

@@ -11,7 +11,7 @@ describe('ShowComponent', () => {
void TestBed.configureTestingModule({
declarations: [ShowComponent],
}).compileComponents();
})
}),
);
beforeEach(() => {

View File

@@ -37,6 +37,7 @@ import {ShareDialogComponent} from '../dialog/share-dialog/share-dialog.componen
templateUrl: './show.component.html',
styleUrls: ['./show.component.less'],
animations: [fade],
standalone: false,
})
export class ShowComponent implements OnInit, OnDestroy {
public show$: Observable<Show | null> | null = null;
@@ -56,8 +57,11 @@ export class ShowComponent implements OnInit, OnDestroy {
public faUsers = faUsers;
public faZoomIn = faMagnifyingGlassPlus;
public faZoomOut = faMagnifyingGlassMinus;
private subs: Subscription[] = [];
public useSwiper = false;
public textSize = 1;
public faFileLines = faFileLines;
public faFile = faFile;
private subs: Subscription[] = [];
public constructor(
private activatedRoute: ActivatedRoute,
@@ -68,15 +72,16 @@ export class ShowComponent implements OnInit, OnDestroy {
private router: Router,
private cRef: ChangeDetectorRef,
public dialog: MatDialog,
private guestShowService: GuestShowService
) {}
private guestShowService: GuestShowService,
) {
}
public ngOnInit(): void {
this.show$ = this.activatedRoute.params.pipe(
map(param => param as {showId: string}),
map(param => param.showId),
tap((_: string) => (this.showId = _)),
switchMap((showId: string) => this.showService.read$(showId))
switchMap((showId: string) => this.showService.read$(showId)),
);
this.subs.push(
this.activatedRoute.params
@@ -84,7 +89,7 @@ export class ShowComponent implements OnInit, OnDestroy {
map(param => param as {showId: string}),
map(param => param.showId),
switchMap(showId => this.showSongService.list$(showId)),
filter(_ => !!_ && _.length > 0)
filter(_ => !!_ && _.length > 0),
)
.subscribe(_ => {
this.showSongs = _;
@@ -96,7 +101,7 @@ export class ShowComponent implements OnInit, OnDestroy {
.subscribe(_ => {
this.songs = _;
this.cRef.markForCheck();
})
}),
);
}
@@ -104,8 +109,6 @@ export class ShowComponent implements OnInit, OnDestroy {
this.subs.forEach(_ => _.unsubscribe());
}
public textSize = 1;
public onZoomIn() {
this.textSize += 0.1;
}
@@ -176,9 +179,6 @@ export class ShowComponent implements OnInit, OnDestroy {
await this.router.navigateByUrl('/shows/' + showId + '/edit');
}
public faFileLines = faFileLines;
public faFile = faFile;
@HostListener('document:keydown', ['$event'])
public handleKeyboardEvent(event: KeyboardEvent) {
const swiperEl = document.querySelector('swiper-container') as unknown as Swiper;

View File

@@ -23,11 +23,11 @@
<mat-form-field *ngIf="edit" appearance="outline">
<mat-label>Songtext</mat-label>
<textarea matTooltip="Tonart ändern"
class="edit"
[cdkTextareaAutosize]="true"
<textarea [cdkTextareaAutosize]="true"
[formControl]="editSongControl"
class="edit"
matInput
matTooltip="Tonart ändern"
></textarea>
</mat-form-field>
<div *ngIf="edit">Es wird nur der Liedtext für dieser Veranstaltung geändert.</div>

View File

@@ -11,7 +11,7 @@ describe('SongComponent', () => {
void TestBed.configureTestingModule({
declarations: [SongComponent],
}).compileComponents();
})
}),
);
beforeEach(() => {

View File

@@ -14,6 +14,7 @@ import {MatSelect} from '@angular/material/select';
templateUrl: './song.component.html',
styleUrls: ['./song.component.less'],
animations: [fade],
standalone: false,
})
export class SongComponent implements OnInit {
@Input() public show: Show | null = null;
@@ -21,9 +22,6 @@ export class SongComponent implements OnInit {
@Input() public showText: boolean | null = null;
@Input() public index = -1;
@Input() public fullscreen = false;
@ViewChild('option') private keyOptions: MatSelect;
public keys: string[] = [];
public faDelete = faTrash;
public faEdit = faPenToSquare;
@@ -33,8 +31,10 @@ export class SongComponent implements OnInit {
public iSong: ShowSong | null = null;
public edit = false;
public editSongControl = new UntypedFormControl();
@ViewChild('option') private keyOptions: MatSelect;
public constructor(private showSongService: ShowSongService) {}
public constructor(private showSongService: ShowSongService) {
}
@Input()
public set showSong(song: ShowSong) {

View File

@@ -29,4 +29,5 @@ const routes: Routes = [
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class ShowsRoutingModule {}
export class ShowsRoutingModule {
}

View File

@@ -72,4 +72,5 @@ import {MatDialogModule} from '@angular/material/dialog';
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class ShowsModule {}
export class ShowsModule {
}