delete song

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

@@ -15,6 +15,8 @@ export class SongDataService {
   public list$ = (): Observable<Song[]> => this.dbService.col$(this.collection);
   public read$ = (songId: string): Observable<Song | undefined> => 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 add = async (data: Partial<Song>): Promise<string> => (await this.dbService.col(this.collection).add(data)).id
+  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();
+
 }
 

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

@@ -17,7 +17,6 @@ export class SongService {
   public static LEGAL_OWNER = ['CCLI', 'other'];
   public static LEGAL_TYPE = ['open', 'allowed'];
 
-
   private list: Song[];
 
   constructor(private songDataService: SongDataService) {
@@ -36,6 +35,10 @@ export class SongService {
     return await this.songDataService.add({number, title, status: 'draft', legalType: 'open'})
   }
 
+  public async delete(songId: string): Promise<void> {
+    await this.songDataService.delete(songId);
+  }
+
 // https://www.csvjson.com/csv2json
   private async updateFromCLI(songs: Song[]) {
     const mapped = songs.map(_ => ({

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

@@ -29,6 +29,7 @@
     </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>
     </app-button-row>
 

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

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 import {SongService} from '../services/song.service';
 import {map, switchMap} from 'rxjs/operators';
 import {Song} from '../services/song';
@@ -9,6 +9,7 @@ import {File} from '../services/file';
 import {UserService} from '../../../services/user/user.service';
 import {User} from '../../../services/user/user';
 import {faEdit} from '@fortawesome/free-solid-svg-icons/faEdit';
+import {faTrash} from '@fortawesome/free-solid-svg-icons/faTrash';
 
 @Component({
   selector: 'app-song',
@@ -20,12 +21,14 @@ export class SongComponent implements OnInit {
   public files$: Observable<File[]>;
   public user$: Observable<User>;
   public faEdit = faEdit;
+  public faDelete = faTrash;
 
   constructor(
     private activatedRoute: ActivatedRoute,
     private songService: SongService,
     private fileService: FileDataService,
     private userService: UserService,
+    private router: Router,
   ) {
     this.user$ = userService.user$;
   }
@@ -40,7 +43,6 @@ export class SongComponent implements OnInit {
       map(param => param.songId),
       switchMap(songId => this.fileService.read$(songId))
     );
-
   }
 
   public getFlags = (flags: string): string[] => {
@@ -48,4 +50,8 @@ export class SongComponent implements OnInit {
     return flags.split(';').filter(_ => !!_);
   };
 
+  public async onDelete(songId: string): Promise<void> {
+    await this.songService.delete(songId);
+    await this.router.navigateByUrl('/songs');
+  }
 }