list file attachments

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

@@ -18,5 +18,9 @@
       <mat-icon>cloud_upload</mat-icon>
     </button>
   </div>
+
+  <p *ngFor="let file of (files$|async)">
+    <app-file [file]="file"></app-file>
+  </p>
 </app-card>
 

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

@@ -2,7 +2,10 @@ import {Component} from '@angular/core';
 import {Upload} from '../../../services/upload';
 import {UploadService} from '../../../services/upload.service';
 import {ActivatedRoute} from '@angular/router';
-import {map} from 'rxjs/operators';
+import {map, switchMap} from 'rxjs/operators';
+import {FileDataService} from '../../../services/file-data.service';
+import {Observable} from 'rxjs';
+import {File} from '../../../services/file';
 
 @Component({
   selector: 'app-edit-file',
@@ -14,13 +17,24 @@ export class EditFileComponent {
   public selectedFiles: FileList;
   public currentUpload: Upload;
   public songId: string;
+  public files$: Observable<File[]>;
 
-  constructor(private activatedRoute: ActivatedRoute, private uploadService: UploadService) {
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private uploadService: UploadService,
+    private fileService: FileDataService,
+  ) {
     this.activatedRoute.params.pipe(
       map(param => param.songId),
     ).subscribe(songId => {
       this.songId = songId;
     });
+
+    this.files$ = this.activatedRoute.params.pipe(
+      map(param => param.songId),
+      switchMap(songId => this.fileService.read$(songId))
+    );
   }
 
   detectFiles(event) {

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

@@ -1 +1,3 @@
-<p>file works!</p>
+<a [href]="url$|async" target="_blank">
+  {{name}}
+</a>

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

@@ -1,4 +1,7 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
+import {Observable} from 'rxjs';
+import {File} from '../../../../services/file';
+import {AngularFireStorage} from '@angular/fire/storage';
 
 @Component({
   selector: 'app-file',
@@ -6,11 +9,20 @@ import {Component, OnInit} from '@angular/core';
   styleUrls: ['./file.component.less']
 })
 export class FileComponent implements OnInit {
+  public url$: Observable<string>;
+  public name: string;
 
-  constructor() {
+  constructor(private storage: AngularFireStorage) {
   }
 
-  ngOnInit() {
-  }
+  @Input() set file(file: File) {
 
+    const ref = this.storage.ref(file.path + '/' + file.name);
+    this.url$ = ref.getDownloadURL();
+    this.name = file.name;
+
+  };
+
+  ngOnInit(): void {
+  }
 }

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

@@ -0,0 +1,3 @@
+<a [href]="url$|async" target="_blank">
+  {{name}}
+</a>

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

@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {FileComponent} from './file.component';
+
+describe('FileComponent', () => {
+  let component: FileComponent;
+  let fixture: ComponentFixture<FileComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [FileComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,29 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {File} from '../../services/file';
+import {AngularFireStorage} from '@angular/fire/storage';
+import {Observable} from 'rxjs';
+
+@Component({
+  selector: 'app-file',
+  templateUrl: './file.component.html',
+  styleUrls: ['./file.component.less']
+})
+export class FileComponent implements OnInit {
+  public url$: Observable<string>;
+  public name: string;
+
+  constructor(private storage: AngularFireStorage) {
+  }
+
+  @Input() set file(file: File) {
+
+    const ref = this.storage.ref(file.path + '/' + file.name);
+    this.url$ = ref.getDownloadURL();
+    this.name = file.name;
+
+  };
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -35,6 +35,8 @@
 
   </app-card>
   <app-card *ngIf="!!(files$|async)" heading="Anhänge">
-    <div *ngFor="let file of (files$|async)">{{file.name}}</div>
+    <p *ngFor="let file of (files$|async)">
+      <app-file [file]="file"></app-file>
+    </p>
   </app-card>
 </div>

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

@@ -12,10 +12,11 @@ import {MatChipsModule} from '@angular/material/chips';
 import {RoleModule} from '../../../services/user/role.module';
 import {StatusTranslaterModule} from '../../../widget-modules/pipes/status-translater/status-translater.module';
 import {ButtonModule} from '../../../widget-modules/components/button/button.module';
+import {FileComponent} from './file/file.component';
 
 
 @NgModule({
-  declarations: [SongComponent],
+  declarations: [SongComponent, FileComponent],
   exports: [SongComponent],
   imports: [
     CommonModule,