persisting songs ins show

.prettierrc

@@ -8,7 +8,7 @@
   "bracketSpacing": false,
   "arrowParens": "avoid",
   "jsxBracketSameLine": false,
-  "printWidth": 120,
+  "printWidth": 180,
   "overrides": [
     {
       "files": "*.component.html",

src/app/modules/guest/guest.component.html

@@ -3,7 +3,7 @@
     <div *ngFor="let song of songs" class="song">
       <app-song-text
         [showSwitch]="false"
-        [text]="song | async"
+        [text]="song"
         chordMode="hide"
       ></app-song-text>
     </div>

src/app/modules/guest/guest.component.ts

@@ -1,43 +1,26 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 import {SongService} from '../songs/services/song.service';
 import {GlobalSettingsService} from '../../services/global-settings.service';
 import {Observable} from 'rxjs';
 import {filter, map, switchMap} from 'rxjs/operators';
 import {ShowSongService} from '../shows/services/show-song.service';
 import {GlobalSettings} from '../../services/global-settings';
-import {Song} from '../songs/services/song';
 
 @Component({
   selector: 'app-guest',
   templateUrl: './guest.component.html',
   styleUrls: ['./guest.component.less'],
 })
-export class GuestComponent implements OnInit {
+export class GuestComponent {
-  public songs$: Observable<Observable<string>[]> | null = null;
+  public songs$: Observable<string[]> = this.globalSettingsService.get$.pipe(
-
-  public constructor(
-    private songService: SongService,
-    private globalSettingsService: GlobalSettingsService,
-    private showSongService: ShowSongService
-  ) {}
-
-  public ngOnInit(): void {
-    this.songs$ = this.globalSettingsService.get$.pipe(
     filter(_ => !!_),
     map(_ => _ as GlobalSettings),
     map(_ => _.currentShow),
     switchMap(_ => this.showSongService.list$(_)),
     filter(_ => !!_),
     map(_ => _),
-      map(_ =>
+    map(_ => _.sort((x, y) => x.order - y.order).map(showSong => showSong.text))
-        _.sort((x, y) => x.order - y.order).map(showSong =>
-          this.songService.read$(showSong.songId).pipe(
-            filter(_ => !!_),
-            map(_ => _ as Song),
-            map(song => song.text)
-          )
-        )
-      )
   );
-  }
+
+  public constructor(private songService: SongService, private globalSettingsService: GlobalSettingsService, private showSongService: ShowSongService) {}
 }

src/app/modules/presentation/monitor/monitor.component.ts

@@ -11,6 +11,7 @@ import {songSwitch} from '../../../widget-modules/components/song-text/animation
 import {TextRenderingService} from '../../songs/services/text-rendering.service';
 import {Show} from '../../shows/services/show';
 import {GlobalSettings} from '../../../services/global-settings';
+import {ShowSongService} from '../../shows/services/show-song.service';
 
 @Component({
   selector: 'app-monitor',
@@ -28,10 +29,9 @@ export class MonitorComponent implements OnInit {
   public date: Date | null = null;
   public config$: Observable<Config | null>;
 
-  // private sections: Section[];
-
   public constructor(
     private showService: ShowService,
+    private showSongService: ShowSongService,
     private songService: SongService,
     private textRenderingService: TextRenderingService,
     private globalSettingsService: GlobalSettingsService,
@@ -60,13 +60,12 @@ export class MonitorComponent implements OnInit {
         tap<Show>(_ => (this.zoom = _.presentationZoom ?? 30))
       )
       .pipe(
-        switchMap((_: Show) => this.songService.read$(_.presentationSongId)),
+        switchMap((_: Show) => this.showSongService.read$(_.id, _.presentationSongId)),
         filter(_ => !!_),
         map(_ => _ as Song)
       )
       .subscribe(_ => {
         this.song = _;
-        // this.sections = this.textRenderingService.parse(_.text, null);
       });
   }
 }

src/app/modules/presentation/remote/remote.component.ts

@@ -76,7 +76,7 @@ export class RemoteComponent {
     this.showService.read$(change).subscribe(_ => (this.show = _));
     this.showSongService.list$(change).subscribe(_ => {
       this.showSongs = _;
-      this.presentationSongs = _.map(song => this.songs.filter(f => f.id === song.songId)[0]).map(song => ({
+      this.presentationSongs = _.map(song => ({
         id: song.id,
         title: song.title,
         sections: this.textRenderingService.parse(song.text, null),

src/app/modules/shows/services/docx.service.ts

@@ -63,12 +63,7 @@ export class DocxService {
     this.saveAs(blob, `${title}.docx`);
   }
 
-  private prepareNewDocument(
+  private prepareNewDocument(type: string, name: string, options: DownloadOptions, sections: ISectionOptions[]): Document {
-    type: string,
-    name: string,
-    options: DownloadOptions,
-    sections: ISectionOptions[]
-  ): Document {
     return new Document({
       creator: name,
       title: type,
@@ -99,24 +94,11 @@ export class DocxService {
     });
   }
 
-  private renderSongs(
+  private renderSongs(songs: {showSong: ShowSong; sections: Section[]}[], options: DownloadOptions, config: Config): Paragraph[] {
-    songs: {showSong: ShowSong; song: Song; sections: Section[]}[],
+    return songs.reduce((p: Paragraph[], song) => [...p, ...this.renderSong(song.showSong, song.showSong, song.sections, options, config)], []);
-    options: DownloadOptions,
-    config: Config
-  ): Paragraph[] {
-    return songs.reduce(
-      (p: Paragraph[], song) => [...p, ...this.renderSong(song.showSong, song.song, song.sections, options, config)],
-      []
-    );
   }
 
-  private renderSong(
+  private renderSong(showSong: ShowSong, song: Song, sections: Section[], options: DownloadOptions, config: Config): Paragraph[] {
-    showSong: ShowSong,
-    song: Song,
-    sections: Section[],
-    options: DownloadOptions,
-    config: Config
-  ): Paragraph[] {
     const songTitle = this.renderSongTitle(song);
     const copyright = this.renderCopyright(song, options, config);
     const songText = this.renderSongText(sections, options?.chordMode ?? showSong.chordMode);
@@ -148,10 +130,7 @@ export class DocxService {
     const artist = song.artist ? song.artist + ', ' : '';
     const termsOfUse = song.termsOfUse ? song.termsOfUse + ', ' : '';
     const origin = song.origin ? song.origin + ', ' : '';
-    const licence =
+    const licence = song.legalOwner === 'CCLI' ? 'CCLI-Liednummer: ' + song.legalOwnerId + ', CCLI-Lizenz: ' + config.ccliLicenseId : 'CCLI-Liednummer: ' + song.legalOwnerId;
-      song.legalOwner === 'CCLI'
-        ? 'CCLI-Liednummer: ' + song.legalOwnerId + ', CCLI-Lizenz: ' + config.ccliLicenseId
-        : 'CCLI-Liednummer: ' + song.legalOwnerId;
 
     return new Paragraph({
       text: artist + label + termsOfUse + origin + licence,
@@ -197,7 +176,7 @@ export class DocxService {
   }
 
   private async prepareData(showId: string): Promise<{
-    songs: {showSong: ShowSong; song: Song; sections: Section[]}[];
+    songs: {showSong: ShowSong; sections: Section[]}[];
     show: Show;
     user: User;
     config: Config;
@@ -210,22 +189,17 @@ export class DocxService {
     if (!config) return null;
 
     const showSongs = await this.showSongService.list(showId);
-    const songsAsync = showSongs.map(async showSong => {
+    const songsAsync = showSongs.map(showSong => {
-      const song = await this.songService.read(showSong.songId);
+      const sections = this.textRenderingService.parse(showSong.text, {
-      if (!song) return null;
-      const sections = this.textRenderingService.parse(song.text, {
         baseKey: showSong.keyOriginal,
         targetKey: showSong.key,
       });
       return {
         showSong,
-        song,
         sections,
       };
     });
-    const songs = (await Promise.all(songsAsync))
+    const songs = (await Promise.all(songsAsync)).filter(_ => !!_).map(_ => _ as {showSong: ShowSong; song: Song; sections: Section[]});
-      .filter(_ => !!_)
-      .map(_ => _ as {showSong: ShowSong; song: Song; sections: Section[]});
     return {songs, show, user, config};
   }
 

src/app/modules/shows/services/show-data.service.ts

@@ -14,7 +14,6 @@ export class ShowDataService {
 
   public list$ = (queryFn?: QueryFn): Observable<Show[]> => this.dbService.col$(this.collection, queryFn);
   public read$ = (showId: string): Observable<Show | null> => this.dbService.doc$(`${this.collection}/${showId}`);
-  public update = async (showId: string, data: Partial<Show>): Promise<void> =>
+  public update = async (showId: string, data: Partial<Show>): Promise<void> => await this.dbService.doc(`${this.collection}/${showId}`).update(data);
-    await this.dbService.doc(`${this.collection}/${showId}`).update(data);
   public add = async (data: Partial<Show>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;
 }

src/app/modules/shows/services/show-song-data.service.ts

@@ -13,14 +13,10 @@ export class ShowSongDataService {
 
   public constructor(private dbService: DbService) {}
 
-  public list$ = (showId: string, queryFn?: QueryFn): Observable<ShowSong[]> =>
+  public list$ = (showId: string, queryFn?: QueryFn): Observable<ShowSong[]> => this.dbService.col$(`${this.collection}/${showId}/${this.subCollection}`, queryFn);
-    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}`);
-  public read$ = (showId: string, songId: string): Observable<ShowSong | null> =>
-    this.dbService.doc$(`${this.collection}/${showId}/${this.subCollection}/${songId}`);
   public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> =>
     await this.dbService.doc(`${this.collection}/${showId}/${this.subCollection}/${songId}`).update(data);
-  public delete = async (showId: string, songId: string): Promise<void> =>
+  public delete = async (showId: string, songId: string): Promise<void> => await this.dbService.doc(`${this.collection}/${showId}/${this.subCollection}/${songId}`).delete();
-    await this.dbService.doc(`${this.collection}/${showId}/${this.subCollection}/${songId}`).delete();
+  public add = async (showId: string, data: Partial<ShowSong>): Promise<string> => (await this.dbService.col(`${this.collection}/${showId}/${this.subCollection}`).add(data)).id;
-  public add = async (showId: string, data: Partial<ShowSong>): Promise<string> =>
-    (await this.dbService.col(`${this.collection}/${showId}/${this.subCollection}`).add(data)).id;
 }

src/app/modules/shows/services/show-song.service.ts

@@ -10,17 +10,14 @@ import {UserService} from '../../../services/user/user.service';
   providedIn: 'root',
 })
 export class ShowSongService {
-  public constructor(
+  public constructor(private showSongDataService: ShowSongDataService, private songDataService: SongDataService, private userService: UserService) {}
-    private showSongDataService: ShowSongDataService,
-    private songDataService: SongDataService,
-    private userService: UserService
-  ) {}
 
   public async new$(showId: string, songId: string, order: number, addedLive = false): Promise<string | null> {
     const song = await this.songDataService.read$(songId).pipe(take(1)).toPromise();
     const user = await this.userService.user$.pipe(take(1)).toPromise();
     if (!song || !user) return null;
     const data: Partial<ShowSong> = {
+      ...song,
       songId,
       order,
       key: song.key,
@@ -31,10 +28,11 @@ export class ShowSongService {
     return await this.showSongDataService.add(showId, data);
   }
 
-  public list$ = (showId: string): Observable<ShowSong[]> =>
+  public read$ = (showId: string, songId: string): Observable<ShowSong | null> => this.showSongDataService.read$(showId, songId);
-    this.showSongDataService.list$(showId, _ => _.orderBy('order'));
+  public read = (showId: string, songId: string): Promise<ShowSong | null> => this.read$(showId, songId).pipe(first()).toPromise();
+
+  public list$ = (showId: string): Observable<ShowSong[]> => this.showSongDataService.list$(showId, _ => _.orderBy('order'));
   public list = (showId: string): Promise<ShowSong[]> => this.list$(showId).pipe(first()).toPromise();
   public delete$ = (showId: string, songId: string): Promise<void> => this.showSongDataService.delete(showId, songId);
-  public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> =>
+  public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> => await this.showSongDataService.update$(showId, songId, data);
-    await this.showSongDataService.update$(showId, songId, data);
 }

src/app/modules/shows/services/show-song.ts

@@ -1,6 +1,7 @@
 import {ChordMode} from '../../../widget-modules/components/song-text/song-text.component';
+import {Song} from '../../songs/services/song';
 
-export interface ShowSong {
+export interface ShowSong extends Song {
   id: string;
   songId: string;
   key: string;

src/app/modules/shows/services/show.service.ts

@@ -10,25 +10,8 @@ import {User} from '../../../services/user/user';
   providedIn: 'root',
 })
 export class ShowService {
-  public static SHOW_TYPE = [
+  public static SHOW_TYPE = ['service-worship', 'service-praise', 'home-group-big', 'home-group', 'prayer-group', 'teens-group', 'kids-group', 'misc-public', 'misc-private'];
-    'service-worship',
+  public static SHOW_TYPE_PUBLIC = ['service-worship', 'service-praise', 'home-group-big', 'teens-group', 'kids-group', 'misc-public'];
-    'service-praise',
-    'home-group-big',
-    'home-group',
-    'prayer-group',
-    'teens-group',
-    'kids-group',
-    'misc-public',
-    'misc-private',
-  ];
-  public static SHOW_TYPE_PUBLIC = [
-    'service-worship',
-    'service-praise',
-    'home-group-big',
-    'teens-group',
-    'kids-group',
-    'misc-public',
-  ];
   public static SHOW_TYPE_PRIVATE = ['home-group', 'prayer-group', 'misc-private'];
   private user: User | null = null;
 
@@ -44,14 +27,11 @@ export class ShowService {
         () => this.showDataService.list$(),
         (user: User | null, shows: Show[]) => ({user, shows})
       ),
-      map(s =>
+      map(s => s.shows.filter(_ => !_.archived).filter(show => show.published || (show.owner === s.user?.id && !publishedOnly)))
-        s.shows.filter(_ => !_.archived).filter(show => show.published || (show.owner === s.user?.id && !publishedOnly))
-      )
     );
   }
 
-  public update$ = async (showId: string, data: Partial<Show>): Promise<void> =>
+  public update$ = async (showId: string, data: Partial<Show>): Promise<void> => this.showDataService.update(showId, data);
-    this.showDataService.update(showId, data);
 
   public async new$(data: Partial<Show>): Promise<string | null> {
     if (!data.showType || !this.user) return null;

src/app/modules/shows/show/show.component.html

@@ -5,12 +5,7 @@
       show.date.toDate() | date: 'dd.MM.yyyy'
     }} - {{ getStatus(show) }}"
   >
-    <i *ngIf="show.public"
+    <i>{{show.public ? 'öffentliche' : 'geschlossene'}} Veranstaltung von
-    >öffentliche Veranstaltung von
-      <app-user-name [userId]="show.owner"></app-user-name>
-    </i>
-    <i *ngIf="!show.public"
-    >geschlossene Veranstaltung von
       <app-user-name [userId]="show.owner"></app-user-name>
     </i>
     <p *ngIf="!show.published">
@@ -19,7 +14,7 @@
     <div *ngIf="showSongs && songs" class="song-list">
       <app-song
         *ngFor="let song of showSongs"
-        [Song]="getSong(song.songId)"
+        [Song]="song"
         [showId]="showId"
         [showSong]="song"
         [showSongs]="showSongs"

src/app/modules/shows/show/song/song.component.less

@@ -1,5 +1,6 @@
 
 .song {
+  min-height: 28px;
   display: grid;
   grid-template-columns: 20px 20px auto 70px 25px;
   @media screen and (max-width: 860px) {

src/app/modules/songs/services/song-data.service.ts

@@ -13,9 +13,7 @@ export class SongDataService {
 
   public list$ = (): Observable<Song[]> => this.dbService.col$(this.collection);
   public read$ = (songId: string): Observable<Song | null> => this.dbService.doc$(this.collection + '/' + songId);
-  public update$ = async (songId: string, data: Partial<Song>): Promise<void> =>
+  public update$ = async (songId: string, data: Partial<Song>): Promise<void> => await this.dbService.doc(this.collection + '/' + songId).update(data);
-    await this.dbService.doc(this.collection + '/' + songId).update(data);
   public add = async (data: Partial<Song>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id;
-  public delete = async (songId: string): Promise<void> =>
+  public delete = async (songId: string): Promise<void> => await this.dbService.doc(this.collection + '/' + songId).delete();
-    await this.dbService.doc(this.collection + '/' + songId).delete();
 }

src/app/modules/songs/services/text-rendering.service.ts

@@ -49,9 +49,7 @@ export class TextRenderingService {
     const type = hasMatches ? LineType.chord : LineType.text;
 
     const line: Line = {type, text, chords: hasMatches ? cords : null};
-    return transpose !== null && transpose !== undefined
+    return transpose !== null && transpose !== undefined ? this.transposeService.transpose(line, transpose.baseKey, transpose.targetKey) : this.transposeService.renderChords(line);
-      ? this.transposeService.transpose(line, transpose.baseKey, transpose.targetKey)
-      : this.transposeService.renderChords(line);
   }
 
   private getSectionTypeOfLine(line: string): SectionType | null {

src/app/modules/songs/services/transpose.service.ts

@@ -33,10 +33,7 @@ export class TransposeService {
 
   public getDistance(baseKey: string, targetKey: string): number {
     const scale = getScaleType(baseKey);
-    return scale
+    return scale ? (scale[0].indexOf(targetKey) - scale[0].indexOf(baseKey) ?? scale[1].indexOf(targetKey) - scale[1].indexOf(baseKey)) % 12 : 0;
-      ? (scale[0].indexOf(targetKey) - scale[0].indexOf(baseKey) ??
-          scale[1].indexOf(targetKey) - scale[1].indexOf(baseKey)) % 12
-      : 0;
   }
 
   public getMap(baseKey: string, difference: number): TransposeMap | null {
@@ -74,8 +71,7 @@ export class TransposeService {
   }
 
   private renderLine(chords: Chord[]): string {
-    let template =
+    let template = '                                                                                                    ';
-      '                                                                                                    ';
 
     chords.forEach(chord => {
       const pos = chord.position;
@@ -92,10 +88,6 @@ export class TransposeService {
   }
 
   private renderChord(chord: Chord) {
-    return (
+    return scaleMapping[chord.chord] + (chord.add ? chord.add : '') + (chord.slashChord ? '/' + scaleMapping[chord.slashChord] : '');
-      scaleMapping[chord.chord] +
-      (chord.add ? chord.add : '') +
-      (chord.slashChord ? '/' + scaleMapping[chord.slashChord] : '')
-    );
   }
 }

src/app/modules/songs/song-list/song-list.component.ts

@@ -20,11 +20,7 @@ export class SongListComponent implements OnInit, OnDestroy {
   public songs$: Observable<Song[]> | null = null;
   public anyFilterActive = false;
 
-  public constructor(
+  public constructor(private songService: SongService, private activatedRoute: ActivatedRoute, private scrollService: ScrollService) {}
-    private songService: SongService,
-    private activatedRoute: ActivatedRoute,
-    private scrollService: ScrollService
-  ) {}
 
   public ngOnInit(): void {
     const filter$ = this.activatedRoute.queryParams.pipe(

src/app/modules/songs/song/edit/edit-file/edit-file.component.ts

@@ -18,11 +18,7 @@ export class EditFileComponent {
   public songId: string | null = null;
   public files$: Observable<File[]>;
 
-  public constructor(
+  public constructor(private activatedRoute: ActivatedRoute, private uploadService: UploadService, private fileService: FileDataService) {
-    private activatedRoute: ActivatedRoute,
-    private uploadService: UploadService,
-    private fileService: FileDataService
-  ) {
     this.activatedRoute.params
       .pipe(
         map(param => param as {songId: string}),

src/app/modules/songs/song/edit/edit.module.ts

@@ -28,14 +28,7 @@ import {HistoryComponent} from './history/history.component';
 import {SongTextModule} from '../../../../widget-modules/components/song-text/song-text.module';
 
 @NgModule({
-  declarations: [
+  declarations: [EditComponent, EditSongComponent, EditFileComponent, FileComponent, SaveDialogComponent, HistoryComponent],
-    EditComponent,
-    EditSongComponent,
-    EditFileComponent,
-    FileComponent,
-    SaveDialogComponent,
-    HistoryComponent,
-  ],
   exports: [EditComponent],
   bootstrap: [SaveDialogComponent],
   imports: [

src/app/modules/songs/song/new/new.module.ts

@@ -11,15 +11,6 @@ import {AutofocusModule} from '../../../../widget-modules/directives/autofocus/a
 
 @NgModule({
   declarations: [NewComponent],
-  imports: [
+  imports: [CommonModule, CardModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, ButtonRowModule, ButtonModule, AutofocusModule],
-    CommonModule,
-    CardModule,
-    ReactiveFormsModule,
-    MatFormFieldModule,
-    MatInputModule,
-    ButtonRowModule,
-    ButtonModule,
-    AutofocusModule,
-  ],
 })
 export class NewModule {}

src/app/modules/user/user.module.ts

@@ -24,18 +24,7 @@ import {LogoModule} from '../../widget-modules/components/logo/logo.module';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 
 @NgModule({
-  declarations: [
+  declarations: [LoginComponent, AuthMessagePipe, InfoComponent, LogoutComponent, RolePipe, PasswordComponent, PasswordSendComponent, UsersComponent, UserComponent, NewComponent],
-    LoginComponent,
-    AuthMessagePipe,
-    InfoComponent,
-    LogoutComponent,
-    RolePipe,
-    PasswordComponent,
-    PasswordSendComponent,
-    UsersComponent,
-    UserComponent,
-    NewComponent,
-  ],
   imports: [
     CommonModule,
     UserRoutingModule,

src/app/services/user/owner.directive.ts

@@ -8,12 +8,7 @@ export class OwnerDirective implements OnInit {
   private currentUserId: string | null = null;
   private iAppOwner: string | null = null;
 
-  public constructor(
+  public constructor(private element: ElementRef, private templateRef: TemplateRef<unknown>, private viewContainer: ViewContainerRef, private userService: UserService) {}
-    private element: ElementRef,
-    private templateRef: TemplateRef<unknown>,
-    private viewContainer: ViewContainerRef,
-    private userService: UserService
-  ) {}
 
   @Input()
   public set appOwner(value: string) {

src/app/widget-modules/components/song-text/song-text.component.ts

@@ -52,13 +52,7 @@ export class SongTextComponent implements OnInit {
     this.offset = 0;
     this.sections = [];
     if (this.fullscreen) {
-      setTimeout(
+      setTimeout(() => (this.sections = this.textRenderingService.parse(this.iText, this.iTranspose).sort((a, b) => a.type - b.type)), 100);
-        () =>
-          (this.sections = this.textRenderingService
-            .parse(this.iText, this.iTranspose)
-            .sort((a, b) => a.type - b.type)),
-        100
-      );
     } else {
       this.sections = this.textRenderingService.parse(this.iText, this.iTranspose).sort((a, b) => a.type - b.type);
     }