persisting songs ins show

2021-06-12 22:02:11 +02:00
parent 133844c889
commit 7cc905449c
23 changed files with 61 additions and 193 deletions
--- a/src/app/modules/guest/guest.component.html
+++ b/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>
--- a/src/app/modules/guest/guest.component.ts
+++ b/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 {
-  public songs$: Observable<Observable<string>[]> | null = null;
+export class GuestComponent {
+  public songs$: Observable<string[]> = this.globalSettingsService.get$.pipe(
+    filter(_ => !!_),
+    map(_ => _ as GlobalSettings),
+    map(_ => _.currentShow),
+    switchMap(_ => this.showSongService.list$(_)),
+    filter(_ => !!_),
+    map(_ => _),
+    map(_ => _.sort((x, y) => x.order - y.order).map(showSong => showSong.text))
+  );

-  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(_ =>
-        _.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) {}
 }
--- a/src/app/modules/presentation/monitor/monitor.component.ts
+++ b/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);
      });
  }
 }
--- a/src/app/modules/presentation/remote/remote.component.ts
+++ b/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),
--- a/src/app/modules/shows/services/docx.service.ts
+++ b/src/app/modules/shows/services/docx.service.ts
@@ -63,12 +63,7 @@ export class DocxService {
    this.saveAs(blob, `${title}.docx`);
  }

-  private prepareNewDocument(
-    type: string,
-    name: string,
-    options: DownloadOptions,
-    sections: ISectionOptions[]
-  ): Document {
+  private prepareNewDocument(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(
-    songs: {showSong: ShowSong; song: Song; sections: Section[]}[],
-    options: DownloadOptions,
-    config: Config
-  ): Paragraph[] {
-    return songs.reduce(
-      (p: Paragraph[], song) => [...p, ...this.renderSong(song.showSong, song.song, song.sections, options, config)],
-      []
-    );
+  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)], []);
  }

-  private renderSong(
-    showSong: ShowSong,
-    song: Song,
-    sections: Section[],
-    options: DownloadOptions,
-    config: Config
-  ): Paragraph[] {
+  private renderSong(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 =
-      song.legalOwner === 'CCLI'
-        ? 'CCLI-Liednummer: ' + song.legalOwnerId + ', CCLI-Lizenz: ' + config.ccliLicenseId
-        : 'CCLI-Liednummer: ' + song.legalOwnerId;
+    const licence = 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 song = await this.songService.read(showSong.songId);
-      if (!song) return null;
-      const sections = this.textRenderingService.parse(song.text, {
+    const songsAsync = showSongs.map(showSong => {
+      const sections = this.textRenderingService.parse(showSong.text, {
        baseKey: showSong.keyOriginal,
        targetKey: showSong.key,
      });
      return {
        showSong,
-        song,
        sections,
      };
    });
-    const songs = (await Promise.all(songsAsync))
-      .filter(_ => !!_)
-      .map(_ => _ as {showSong: ShowSong; song: Song; sections: Section[]});
+    const songs = (await Promise.all(songsAsync)).filter(_ => !!_).map(_ => _ as {showSong: ShowSong; song: Song; sections: Section[]});
    return {songs, show, user, config};
  }

--- a/src/app/modules/shows/services/show-data.service.ts
+++ b/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> =>
-    await this.dbService.doc(`${this.collection}/${showId}`).update(data);
+  public update = async (showId: string, data: Partial<Show>): Promise<void> => 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;
 }
--- a/src/app/modules/shows/services/show-song-data.service.ts
+++ b/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[]> =>
-    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 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}`);
  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> =>
-    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 delete = async (showId: string, songId: string): Promise<void> => 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;
 }
--- a/src/app/modules/shows/services/show-song.service.ts
+++ b/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(
-    private showSongDataService: ShowSongDataService,
-    private songDataService: SongDataService,
-    private userService: UserService
-  ) {}
+  public constructor(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[]> =>
-    this.showSongDataService.list$(showId, _ => _.orderBy('order'));
+  public read$ = (showId: string, songId: string): Observable<ShowSong | null> => this.showSongDataService.read$(showId, songId);
+  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> =>
-    await this.showSongDataService.update$(showId, songId, data);
+  public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> => await this.showSongDataService.update$(showId, songId, data);
 }
--- a/src/app/modules/shows/services/show-song.ts
+++ b/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;
--- a/src/app/modules/shows/services/show.service.ts
+++ b/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 = [
-    'service-worship',
-    '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 = ['service-worship', '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 =>
-        s.shows.filter(_ => !_.archived).filter(show => show.published || (show.owner === s.user?.id && !publishedOnly))
-      )
+      map(s => s.shows.filter(_ => !_.archived).filter(show => show.published || (show.owner === s.user?.id && !publishedOnly)))
    );
  }

-  public update$ = async (showId: string, data: Partial<Show>): Promise<void> =>
-    this.showDataService.update(showId, data);
+  public update$ = async (showId: string, data: Partial<Show>): Promise<void> => this.showDataService.update(showId, data);

  public async new$(data: Partial<Show>): Promise<string | null> {
    if (!data.showType || !this.user) return null;
--- a/src/app/modules/shows/show/show.component.html
+++ b/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"
-    >öffentliche Veranstaltung von
-      <app-user-name [userId]="show.owner"></app-user-name>
-    </i>
-    <i *ngIf="!show.public"
-    >geschlossene Veranstaltung von
+    <i>{{show.public ? 'öffentliche' : '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"
--- a/src/app/modules/shows/show/song/song.component.less
+++ b/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) {
--- a/src/app/modules/songs/services/song-data.service.ts
+++ b/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> =>
-    await this.dbService.doc(this.collection + '/' + songId).update(data);
+  public update$ = async (songId: string, data: Partial<Song>): Promise<void> => 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> =>
-    await this.dbService.doc(this.collection + '/' + songId).delete();
+  public delete = async (songId: string): Promise<void> => await this.dbService.doc(this.collection + '/' + songId).delete();
 }
--- a/src/app/modules/songs/services/text-rendering.service.ts
+++ b/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
-      ? this.transposeService.transpose(line, transpose.baseKey, transpose.targetKey)
-      : this.transposeService.renderChords(line);
+    return transpose !== null && transpose !== undefined ? this.transposeService.transpose(line, transpose.baseKey, transpose.targetKey) : this.transposeService.renderChords(line);
  }

  private getSectionTypeOfLine(line: string): SectionType | null {
--- a/src/app/modules/songs/services/transpose.service.ts
+++ b/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
-      ? (scale[0].indexOf(targetKey) - scale[0].indexOf(baseKey) ??
-          scale[1].indexOf(targetKey) - scale[1].indexOf(baseKey)) % 12
-      : 0;
+    return scale ? (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 (
-      scaleMapping[chord.chord] +
-      (chord.add ? chord.add : '') +
-      (chord.slashChord ? '/' + scaleMapping[chord.slashChord] : '')
-    );
+    return scaleMapping[chord.chord] + (chord.add ? chord.add : '') + (chord.slashChord ? '/' + scaleMapping[chord.slashChord] : '');
  }
 }
--- a/src/app/modules/songs/song-list/song-list.component.ts
+++ b/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(
-    private songService: SongService,
-    private activatedRoute: ActivatedRoute,
-    private scrollService: ScrollService
-  ) {}
+  public constructor(private songService: SongService, private activatedRoute: ActivatedRoute, private scrollService: ScrollService) {}

  public ngOnInit(): void {
    const filter$ = this.activatedRoute.queryParams.pipe(
--- a/src/app/modules/songs/song/edit/edit-file/edit-file.component.ts
+++ b/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(
-    private activatedRoute: ActivatedRoute,
-    private uploadService: UploadService,
-    private fileService: FileDataService
-  ) {
+  public constructor(private activatedRoute: ActivatedRoute, private uploadService: UploadService, private fileService: FileDataService) {
    this.activatedRoute.params
      .pipe(
        map(param => param as {songId: string}),
--- a/src/app/modules/songs/song/edit/edit.module.ts
+++ b/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: [
-    EditComponent,
-    EditSongComponent,
-    EditFileComponent,
-    FileComponent,
-    SaveDialogComponent,
-    HistoryComponent,
-  ],
+  declarations: [EditComponent, EditSongComponent, EditFileComponent, FileComponent, SaveDialogComponent, HistoryComponent],
  exports: [EditComponent],
  bootstrap: [SaveDialogComponent],
  imports: [
--- a/src/app/modules/songs/song/new/new.module.ts
+++ b/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: [
-    CommonModule,
-    CardModule,
-    ReactiveFormsModule,
-    MatFormFieldModule,
-    MatInputModule,
-    ButtonRowModule,
-    ButtonModule,
-    AutofocusModule,
-  ],
+  imports: [CommonModule, CardModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, ButtonRowModule, ButtonModule, AutofocusModule],
 })
 export class NewModule {}
--- a/src/app/modules/user/user.module.ts
+++ b/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: [
-    LoginComponent,
-    AuthMessagePipe,
-    InfoComponent,
-    LogoutComponent,
-    RolePipe,
-    PasswordComponent,
-    PasswordSendComponent,
-    UsersComponent,
-    UserComponent,
-    NewComponent,
-  ],
+  declarations: [LoginComponent, AuthMessagePipe, InfoComponent, LogoutComponent, RolePipe, PasswordComponent, PasswordSendComponent, UsersComponent, UserComponent, NewComponent],
  imports: [
    CommonModule,
    UserRoutingModule,