delete file button

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

@@ -20,6 +20,11 @@ export class FileDataService {
     return id.id;
   }
 
+  public async delete(songId: string, fileId: string): Promise<void> {
+    const fileRef = this.db.doc('songs/' + songId + '/files/' + fileId);
+    await fileRef.delete();
+  }
+
   public read$(songId: string): Observable<File[]> {
     const songRef = this.db.doc('songs/' + songId);
     return songRef.collection<File>('files').snapshotChanges().pipe(map(actions => {

src/app/modules/songs/services/file.service.spec.ts

@@ -0,0 +1,16 @@
+import {TestBed} from '@angular/core/testing';
+
+import {FileService} from './file.service';
+
+describe('FileService', () => {
+  let service: FileService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FileService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,27 @@
+import {Injectable} from '@angular/core';
+import {AngularFireStorage} from '@angular/fire/storage';
+import {Observable} from 'rxjs';
+import {FileDataService} from './file-data.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FileService {
+
+  constructor(
+    private storage: AngularFireStorage,
+    private fileDataService: FileDataService
+  ) {
+  }
+
+  public getDownloadUrl(path: string): Observable<string> {
+    const ref = this.storage.ref(path);
+    return ref.getDownloadURL();
+  }
+
+  public async delete(path: string, songId: string, fileId: string) {
+    const ref = this.storage.ref(path);
+    await ref.delete().toPromise()
+    await this.fileDataService.delete(songId, fileId);
+  }
+}

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

@@ -77,12 +77,25 @@ Cool bridge without any chords
 
     // c c# db c7   cmaj7    c/e
     expect(sections[2].lines[0].chords).toEqual([
-      {chord: 'c', length: 2, position: 0},
+      {chord: 'c', length: 1, position: 0},
-      {chord: 'c#', length: 3, position: 2},
+      {chord: 'c#', length: 2, position: 2},
-      {chord: 'db', length: 3, position: 5},
+      {chord: 'db', length: 2, position: 5},
       {chord: 'c', length: 2, position: 8, add: '7'},
       {chord: 'c', length: 5, position: 13, add: 'maj7'},
       {chord: 'c', length: 3, position: 22, slashChord: 'e'},
     ]);
   });
+
+  it('should parse chords with a lot of symbols', () => {
+    const service: TextRenderingService = TestBed.inject(TextRenderingService);
+    const text = `Strophe
+g#       F#         E          g#       F#          E
+text`
+    const sections = service.parse(text);
+    expect(sections[0].lines[0].type).toBe(LineType.chord);
+    expect(sections[0].lines[0].text).toBe('g#       F#         E          g#       F#          E');
+    expect(sections[0].lines[1].type).toBe(LineType.text);
+    expect(sections[0].lines[1].text).toBe('text');
+
+  });
 });

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

@@ -89,7 +89,7 @@ export class TextRenderingService {
     const chords: Chord[] = [];
 
     // https://regex101.com/r/68jMB8/5
-    const regex = /\b(C#|C|Db|D#|D|Eb|E|F#|F|Gb|G#|G|Ab|A#|A|B|H|c#|c|db|d#|d|eb|e|f#|f|gb|g#|g|ab|a#|a|b|h)(\/(C#|C|Db|D#|D|Eb|E|F#|F|Gb|G#|G|Ab|A#|A|B|H|c#|c|db|d#|d|eb|e|f#|f|gb|g#|g|ab|a#|a|b|h))?(\d+|maj7)?\b\s/mg;
+    const regex = /(C#|C|Db|D#|D|Eb|E|F#|F|Gb|G#|G|Ab|A#|A|B|H|c#|c|db|d#|d|eb|e|f#|f|gb|g#|g|ab|a#|a|b|h)(\/(C#|C|Db|D#|D|Eb|E|F#|F|Gb|G#|G|Ab|A#|A|B|H|c#|c|db|d#|d|eb|e|f#|f|gb|g#|g|ab|a#|a|b|h))?(\d+|maj7)?/mg;
 
     while ((match = regex.exec(chordLine)) !== null) {
       const chord: Chord = {
@@ -105,7 +105,8 @@ export class TextRenderingService {
 
     const chordCount = chords.reduce((acc: number, cur: Chord) => acc + cur.length, 0);
     const lineCount = chordLine.replace(/\s/g, "").length;
-
+    console.log(chordCount + ' - ' + lineCount + ' - ' + chordLine);
+    console.log(chords);
     const isChrod = chordCount * 2 > lineCount;
     return isChrod ? chords : [];
   }

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

@@ -31,22 +31,6 @@ export class UploadService extends FileBase {
       })
     ).subscribe();
 
-    // const storageRef = storage().ref();
-    // const uploadTask = storageRef.child(`${this.basePath}/${songId}/${file.file.name}`).put(file.file as any);
-    //
-    // uploadTask.on(storage.TaskEvent.STATE_CHANGED,
-    //   (snapshot) => {
-    //     file.progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
-    //   },
-    //   (error) => {
-    //     console.log(error);
-    //   },
-    //   () => {
-    //     file.url = uploadTask.snapshot.downloadURL;
-    //     file.name = file.file.name;
-    //     this.saveFileData(songId, file);
-    //   }
-    // );
   }
 
   private async saveFileData(songId: string, upload: Upload) {

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

@@ -20,7 +20,7 @@
   </div>
 
   <p *ngFor="let file of (files$|async)">
-    <app-file [file]="file"></app-file>
+    <app-file [file]="file" [songId]="songId"></app-file>
   </p>
 </app-card>
 

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

@@ -1,3 +1,5 @@
-<a [href]="url$|async" target="_blank">
+<button (click)="onDelete()" mat-icon-button>
-  {{name}}
+  <fa-icon [icon]="faTrash"></fa-icon>
-</a>
+</button>
+
+<a [href]="url$|async" target="_blank">{{name}}</a>

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

@@ -0,0 +1,3 @@
+button {
+  margin: -5px 0;
+}

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

@@ -1,28 +1,33 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {Observable} from 'rxjs';
 import {File} from '../../../../services/file';
-import {AngularFireStorage} from '@angular/fire/storage';
+import {faTrashAlt} from '@fortawesome/free-solid-svg-icons/faTrashAlt';
+import {FileService} from '../../../../services/file.service';
 
 @Component({
   selector: 'app-file',
   templateUrl: './file.component.html',
   styleUrls: ['./file.component.less']
 })
-export class FileComponent implements OnInit {
+export class FileComponent {
   public url$: Observable<string>;
   public name: string;
+  public faTrash = faTrashAlt;
+  @Input() songId: string;
+  private fileId: string;
+  private path: string;
 
-  constructor(private storage: AngularFireStorage) {
+  constructor(private fileService: FileService) {
   }
 
   @Input() set file(file: File) {
-
+    this.url$ = this.fileService.getDownloadUrl(file.path + '/' + file.name);
-    const ref = this.storage.ref(file.path + '/' + file.name);
-    this.url$ = ref.getDownloadURL();
     this.name = file.name;
-
+    this.fileId = file.id;
+    this.path = file.path + '/' + file.name;
   };
 
-  ngOnInit(): void {
+  public async onDelete(): Promise<void> {
+    await this.fileService.delete(this.path, this.songId, this.fileId);
   }
 }

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

@@ -39,11 +39,11 @@
     </app-button-row>
 
   </app-card>
-  <ng-template *ngIf="(files$|async) as files">
+  <ng-container *ngIf="(files$|async) as files">
     <app-card *ngIf="files.length>0" heading="Anhänge">
       <p *ngFor="let file of (files$|async)">
         <app-file [file]="file"></app-file>
       </p>
     </app-card>
-  </ng-template>
+  </ng-container>
 </div>