file list

WEB/src/app/app.module.ts

@@ -16,6 +16,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { TableComponent } from './components/songs/table/table.component';
 import { SongsComponent } from './components/songs/songs.component';
@@ -23,9 +24,19 @@ import { SongComponent } from './components/songs/song/song.component';
 import { SongEditComponent } from './components/songs/song-edit/song-edit.component';
 import { SongNewComponent } from './components/songs/song-new/song-new.component';
 import { SongFormComponent } from './components/songs/song-form/song-form.component';
+import { SongFilesComponent } from './components/songs/song-files/song-files.component';
 
 @NgModule({
-  declarations: [AppComponent, SongsComponent, TableComponent, SongComponent, SongEditComponent, SongNewComponent, SongFormComponent],
+  declarations: [
+    AppComponent,
+    SongsComponent,
+    TableComponent,
+    SongComponent,
+    SongEditComponent,
+    SongNewComponent,
+    SongFormComponent,
+    SongFilesComponent
+  ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
@@ -42,6 +53,7 @@ import { SongFormComponent } from './components/songs/song-form/song-form.compon
     MatChipsModule,
     MatRadioModule,
     MatSelectModule,
+    MatTooltipModule,
 
     FontAwesomeModule
   ],

WEB/src/app/components/songs/song-files/song-files.component.html

@@ -0,0 +1,38 @@
+<div class="song-detail-container files" *ngIf="song">
+  <mat-card class="mat-elevation-z8">
+    <mat-card-content>
+      <table mat-table [dataSource]="song.Files" class="mat-elevation-z8">
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef>Angehängte Dateien</th>
+          <td mat-cell *matCellDef="let element">{{ element.Name }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="action">
+          <th mat-header-cell *matHeaderCellDef>
+            <button
+              mat-icon-button
+              (click)="onClickNew()"
+              matTooltip="neue Datei hochladen"
+              matTooltipPosition="left"
+            >
+              <fa-icon [icon]="faFileUpload"></fa-icon>
+            </button>
+          </th>
+          <td mat-cell *matCellDef="let element">
+            <button
+              mat-icon-button
+              (click)="onClickDownload(element.ID)"
+              matTooltip="Datei herunterladen"
+              matTooltipPosition="left"
+            >
+              <fa-icon [icon]="faDownload"></fa-icon>
+            </button>
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="columns"></tr>
+        <tr mat-row *matRowDef="let row; columns: columns"></tr>
+      </table>
+    </mat-card-content>
+  </mat-card>
+</div>

WEB/src/app/components/songs/song-files/song-files.component.less

@@ -0,0 +1,11 @@
+:host {
+  display: block;
+}
+
+button {
+  font-size: 24px;
+  color: #aaa;
+  &:hover {
+    color: #000;
+  }
+}

WEB/src/app/components/songs/song-files/song-files.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import { Song } from 'src/app/models/song.model';
+import { SongsService } from 'src/app/data/songs.service';
+import { DownloadService } from 'src/app/data/download.service';
+import { faFileUpload, faDownload } from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+  selector: 'app-song-files',
+  templateUrl: './song-files.component.html',
+  styleUrls: ['./song-files.component.less']
+})
+export class SongFilesComponent {
+  public song: Song;
+  public selectedSongId = 0;
+  public faFileUpload = faFileUpload;
+  public faDownload = faDownload;
+  public columns = ['name', 'action'];
+
+  constructor(
+    private downloadService: DownloadService,
+    songService: SongsService,
+    change: ChangeDetectorRef
+  ) {
+    songService.selectedSong.subscribe(_ => {
+      if (_) {
+        this.selectedSongId = _.ID;
+        this.song = _;
+      } else {
+        this.selectedSongId = 0;
+        this.song = null;
+      }
+      change.markForCheck();
+    });
+  }
+
+  public onClickNew(): void {}
+  public onClickDownload(id: number): void {}
+}

WEB/src/app/components/songs/song-new/song-new.component.ts

@@ -29,6 +29,7 @@ export class SongNewComponent implements OnInit {
 
   public onBack(): void {
     this.songsService.state = State.list;
+    this.songsService.resetSelectedSong();
   }
 
   public onClickAdd(): void {

WEB/src/app/components/songs/song/song.component.ts

@@ -23,7 +23,6 @@ export class SongComponent {
 
   constructor(
     private songService: SongsService,
-    private downloadService: DownloadService,
     change: ChangeDetectorRef
   ) {
     songService.selectedSong.subscribe(_ => {
@@ -41,11 +40,6 @@ export class SongComponent {
     this.songService.resetSelectedSong();
   }
 
-  public onClickDownload(): void {
-    const id = this.song.ID;
-    this.downloadService.get(id, false);
-  }
-
   public onClickEdit(): void {
     this.songService.state = State.edit;
   }

WEB/src/app/components/songs/songs.component.html

@@ -1,4 +1,5 @@
 <app-table></app-table>
 <app-song [@blend] *ngIf="songsService.state === State.read"></app-song>
+<app-song-files [@blend] *ngIf="songsService.state === State.read"></app-song-files>
 <app-song-edit [@blend] *ngIf="songsService.state === State.edit"></app-song-edit>
 <app-song-new [@blend] *ngIf="songsService.state === State.new"></app-song-new>

WEB/src/app/components/songs/table/table.component.html

@@ -3,7 +3,13 @@
   [class.pinned]="songsService.state !== State.list"
 >
   <div class="table-container">
-    <button mat-icon-button (click)="onClickNew()" class="button-new">
+    <button
+      mat-icon-button
+      (click)="onClickNew()"
+      class="button-new"
+      matTooltip="neuen Titel anlegen"
+      matTooltipPosition="left"
+    >
       <fa-icon [icon]="faNew"></fa-icon>
     </button>
     <table

WEB/src/app/components/songs/table/table.component.less

@@ -14,7 +14,7 @@ table {
   position: absolute;
   right: 5px;
   top: 5px;
-  font-size: 2em;
+  font-size: 24px;
   z-index: 1000;
   color: #aaa;
   &:hover {

WEB/src/styles.less

@@ -101,4 +101,21 @@ html {
   .mat-radio-button {
     margin: 15px 10px 0 10px;
   }
+
+  &.files {
+    .mat-card {
+      padding: 0;
     }
+    table {
+      width: 100%;
+      background: none;
+      box-shadow: none;
+    }
+    td.mat-cell:last-of-type, td.mat-footer-cell:last-of-type, th.mat-header-cell:last-of-type {
+      padding-right: 8px;
+      text-align: right;
+  }
+  }
+}
+
+