add show

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

@@ -1,27 +1,27 @@
 import {Injectable} from '@angular/core';
-import {SongDataService} from './song-data.service';
 import {File} from './file';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {FileServer} from './fileServer';
+import {DbService} from '../../../services/db.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class FileDataService {
 
-  constructor(private songDataService: SongDataService) {
+  constructor(private db: DbService) {
   }
 
-  public async put(songId: string, file: FileServer): Promise<string> {
-    const songRef = this.songDataService.getSongRef(songId);
+  public async set(songId: string, file: FileServer): Promise<string> {
+    const songRef = this.db.doc('songs/' + songId);
     const fileCollection = songRef.collection('files');
     const id = await fileCollection.add(file);
     return id.id;
   }
 
-  public get$(songId: string): Observable<File[]> {
-    const songRef = this.songDataService.getSongRef(songId);
+  public read$(songId: string): Observable<File[]> {
+    const songRef = this.db.doc('songs/' + songId);
     return songRef.collection<File>('files').snapshotChanges().pipe(map(actions => {
       return actions.map(a => ({
         ...a.payload.doc.data(),

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

@@ -31,7 +31,7 @@ describe('SongDataService', () => {
 
   it('should list songs', async(() => {
     const service: SongDataService = TestBed.get(SongDataService);
-    service.list().subscribe(s => {
+    service.list$().subscribe(s => {
         expect(s).toEqual([
           {title: 'title1'}
         ] as any);

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

@@ -1,40 +1,17 @@
 import {Injectable} from '@angular/core';
-import {AngularFirestore, AngularFirestoreCollection} from '@angular/fire/firestore';
-import {Song} from '../models/song';
+import {Song} from './song';
 import {Observable} from 'rxjs';
-import {map} from 'rxjs/operators';
-import {AngularFirestoreDocument} from '@angular/fire/firestore/document/document';
+import {DbService} from '../../../services/db.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class SongDataService {
-  private songCollection: AngularFirestoreCollection<Song>;
-  private readonly songs: Observable<Song[]>;
-
-  constructor(private afs: AngularFirestore) {
-    this.songCollection = afs.collection<Song>('songs');
-    this.songs = this.songCollection.snapshotChanges().pipe(map(actions => {
-      return actions.map(a => ({
-        ...a.payload.doc.data(),
-        id: a.payload.doc.id
-      }));
-    }));
+  constructor(private dbService: DbService) {
   }
 
-  public list = (): Observable<Song[]> => this.songs;
-
-  public getSongRef = (songId: string): AngularFirestoreDocument<Song> => this.afs.doc<Song>('songs/' + songId);
-
-  public read(songId: string): Observable<Song | undefined> {
-    return this.getSongRef(songId).valueChanges().pipe(map(song => ({
-      ...song,
-      id: songId
-    } as Song)));
-  }
-
-  public async update(songId: string, data: any): Promise<void> {
-    await this.getSongRef(songId).update(data);
-  }
+  public list$ = (): Observable<Song[]> => this.dbService.col$('songs');
+  public read$ = (songId: string): Observable<Song | undefined> => this.dbService.doc$('songs/' + songId);
+  public update = async (songId: string, data: any): Promise<void> => await this.dbService.doc(songId).update(data);
 }
 

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

@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';
-import {Song} from '../models/song';
+import {Song} from './song';
 import {SongDataService} from './song-data.service';
 import {tap} from 'rxjs/operators';
 
@@ -26,8 +26,8 @@ export class SongService {
     importCCLI = (songs: Song[]) => this.updateFromCLI(songs);
   }
 
-  public list$ = (): Observable<Song[]> => this.songDataService.list().pipe(tap(_ => this.list = _));
-  public read = (songId: string): Observable<Song | undefined> => this.songDataService.read(songId);
+  public list$ = (): Observable<Song[]> => this.songDataService.list$().pipe(tap(_ => this.list = _));
+  public read = (songId: string): Observable<Song | undefined> => this.songDataService.read$(songId);
 
   public async update(songId: string, data: any): Promise<void> {
     await this.songDataService.update(songId, data);

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

@@ -55,6 +55,6 @@ export class UploadService extends FileBase {
       path: upload.path,
       createdAt: new Date()
     };
-    await this.fileDataService.put(songId, file);
+    await this.fileDataService.set(songId, file);
   }
 }

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

@@ -1,5 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {Song} from '../../models/song';
+import {Song} from '../../services/song';
 
 @Component({
   selector: 'app-list-item',

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

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {SongService} from '../services/song.service';
-import {Song} from '../models/song';
+import {Song} from '../services/song';
 import {debounceTime, map} from 'rxjs/operators';
 import {combineLatest, Observable} from 'rxjs';
 import {fade} from '../../../animations';

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

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {Song} from '../../../models/song';
+import {Song} from '../../../services/song';
 import {FormGroup} from '@angular/forms';
 import {ActivatedRoute, Router} from '@angular/router';
 import {SongService} from '../../../services/song.service';

src/app/modules/songs/song/edit/edit.component.html

@@ -1,2 +1,4 @@
-<app-edit-song></app-edit-song>
-<app-edit-file></app-edit-file>
+<div>
+  <app-edit-song></app-edit-song>
+  <app-edit-file></app-edit-file>
+</div>

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

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {Song} from '../../models/song';
+import {Song} from '../../services/song';
 import {FormControl, FormGroup} from '@angular/forms';
 
 @Injectable({

src/app/modules/songs/song/song.component.html

@@ -1,29 +1,35 @@
-<app-card *ngIf="song$ | async as song" [heading]="song.number + ' - ' + song.title">
-  <div class="song">
-    <div>
-      <div class="detail">
-        <div>Typ: {{song.type | songType}}</div>
-        <div>Tonart: {{song.key}}</div>
-        <div>Tempo: {{song.tempo}}</div>
-        <div *ngIf="song.legalOwner">Rechteinhaber: {{song.legalOwner|legalOwner}}</div>
-        <div *ngIf="song.legalOwnerId">Rechteinhaber ID: {{song.legalOwnerId}}</div>
-        <div *ngIf="song.legalLicenseId">Lizenznummer: {{song.legalLicenseId}}</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 class="split">
+  <app-card *ngIf="song$ | async as song" [heading]="song.number + ' - ' + song.title">
+    <div class="song">
+      <div>
+        <div class="detail">
+          <div>Typ: {{song.type | songType}}</div>
+          <div>Tonart: {{song.key}}</div>
+          <div>Tempo: {{song.tempo}}</div>
+          <div *ngIf="song.legalOwner">Rechteinhaber: {{song.legalOwner|legalOwner}}</div>
+          <div *ngIf="song.legalOwnerId">Rechteinhaber ID: {{song.legalOwnerId}}</div>
+          <div *ngIf="song.legalLicenseId">Lizenznummer: {{song.legalLicenseId}}</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>
+      </div>
+
+      <div class="text">{{song.text}}</div>
+      <div class="text">{{song.comment}}</div>
+      <div>
+        <h3>Anhänge</h3>
+        <div *ngFor="let file of (files$|async)">{{file.name}}</div>
       </div>
     </div>
 
-    <div class="text">{{song.text}}</div>
-    <div class="text">{{song.comment}}</div>
-    <div>
-      <h3>Anhänge</h3>
-      <div *ngFor="let file of (files$|async)">{{file.name}}</div>
-    </div>
-  </div>
+    <app-button-row>
+      <button color="primary" mat-flat-button routerLink="edit">Bearbeiten</button>
+      <button mat-button routerLink="../">Schließen</button>
+    </app-button-row>
 
-  <app-button-row>
-    <button color="primary" mat-flat-button routerLink="edit">Bearbeiten</button>
-  </app-button-row>
+  </app-card>
+  <app-card>
 
-</app-card>
+  </app-card>
+</div>

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

@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {SongService} from '../services/song.service';
 import {map, switchMap} from 'rxjs/operators';
-import {Song} from '../models/song';
+import {Song} from '../services/song';
 import {Observable} from 'rxjs';
 import {FileDataService} from '../services/file-data.service';
 import {File} from '../services/file';
@@ -31,7 +31,7 @@ export class SongComponent implements OnInit {
 
     this.files$ = this.activatedRoute.params.pipe(
       map(param => param.songId),
-      switchMap(songId => this.fileService.get$(songId))
+      switchMap(songId => this.fileService.read$(songId))
     );
 
   }