file detail edit form

WEB/src/app/app.module.ts

@@ -27,6 +27,7 @@ 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';
 import { FileUploadModule } from 'ng2-file-upload';
+import { SongFileEditComponent } from './components/songs/song-file-edit/song-file-edit.component';
 
 @NgModule({
   declarations: [
@@ -37,7 +38,8 @@ import { FileUploadModule } from 'ng2-file-upload';
     SongEditComponent,
     SongNewComponent,
     SongFormComponent,
-    SongFilesComponent
+    SongFilesComponent,
+    SongFileEditComponent
   ],
   imports: [
     BrowserModule,

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

@@ -28,7 +28,7 @@ export class SongEditComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.form = this.editSongService.initEditForm(true);
+    this.form = this.editSongService.initSongEditForm(true);
     this.change.markForCheck();
   }
 

WEB/src/app/components/songs/song-file-edit/song-file-edit.component.html

@@ -0,0 +1,17 @@
+<form *ngIf="form">
+  <mat-form-field>
+    <input
+      matInput
+      placeholder="Dateiname"
+      [formControl]="form.controls.Name"
+    />
+  </mat-form-field>
+  <mat-form-field>
+      <mat-label>Art</mat-label>
+      <mat-select [formControl]="form.controls.FileType">
+        <mat-option *ngFor="let type of fileTypes" [value]="type.value">
+          {{ type.text }}
+        </mat-option>
+      </mat-select>
+  </mat-form-field>
+</form>

WEB/src/app/components/songs/song-file-edit/song-file-edit.component.less

@@ -0,0 +1,6 @@
+form {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    grid-column-gap: 10px;
+    padding-top: 10px;
+}

WEB/src/app/components/songs/song-file-edit/song-file-edit.component.ts

@@ -0,0 +1,34 @@
+import { faLongArrowAltLeft } from '@fortawesome/free-solid-svg-icons';
+import { FileType } from './../../../models/files-types.model.ts';
+import { FormGroup } from '@angular/forms';
+import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
+import { EditSongService } from 'src/app/data/edit-song.service';
+
+@Component({
+  selector: 'app-song-file-edit',
+  templateUrl: './song-file-edit.component.html',
+  styleUrls: ['./song-file-edit.component.less']
+})
+export class SongFileEditComponent implements OnInit, OnDestroy {
+  @Input() fileId: number;
+  @Output() back = new EventEmitter();
+  public form: FormGroup;
+  public fileTypes = [
+    {value: FileType.None, text: null},
+    {value: FileType.Sheet, text: 'Text'},
+    {value: FileType.Chords, text: 'Text + Akkorde'},
+    {value: FileType.MuseScore, text: 'MuseScore'},
+  ];
+
+  constructor(private editSongService: EditSongService) { }
+
+  public ngOnInit(): void {
+    this.form = this.editSongService.initFileEditForm(this.fileId);
+  }
+
+  public ngOnDestroy(): void {
+    this.form = null;
+
+  }
+
+}

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

@@ -6,7 +6,14 @@
           <th mat-header-cell *matHeaderCellDef>
             Angehängte Dateien
           </th>
-          <td mat-cell *matCellDef="let element">{{ element.Name }}</td>
+          <td mat-cell *matCellDef="let element">
+            <span *ngIf="fileEditId !== element.ID">{{ element.Name }}</span>
+            <app-song-file-edit
+              [fileId]="element.ID"
+              (back)="onClickEdit(null)"
+              *ngIf="fileEditId === element.ID"
+            ></app-song-file-edit>
+          </td>
         </ng-container>
 
         <ng-container matColumnDef="action">
@@ -34,9 +41,28 @@
               (click)="onClickDownload(element.ID, element.Name)"
               matTooltip="Datei herunterladen"
               matTooltipPosition="left"
+              *ngIf="fileEditId !== element.ID"
             >
               <fa-icon [icon]="faDownload"></fa-icon>
             </button>
+            <button
+              mat-icon-button
+              (click)="onClickEdit(element.ID)"
+              matTooltip="Eintrag bearbeiten"
+              matTooltipPosition="left"
+              *ngIf="fileEditId !== element.ID"
+            >
+              <fa-icon [icon]="faEdit"></fa-icon>
+            </button>
+            <button
+              mat-icon-button
+              matTooltip="Zurück zur Tabelle"
+              matTooltipPosition="left"
+              (click)="onClickEdit(null)"
+              *ngIf="fileEditId === element.ID"
+            >
+              <fa-icon [icon]="faArrow"></fa-icon>
+            </button>
           </td>
         </ng-container>
 

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

@@ -2,7 +2,7 @@ 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';
+import { faFileUpload, faDownload, faEdit, faLongArrowAltLeft } from '@fortawesome/free-solid-svg-icons';
 import { FileuploadFactory } from 'src/app/services/fileupload.factory';
 import { FileUploader } from 'ng2-file-upload';
 
@@ -15,9 +15,12 @@ export class SongFilesComponent {
   public song: Song;
   public selectedSongId = 0;
   public faFileUpload = faFileUpload;
+  public faArrow = faLongArrowAltLeft;
   public faDownload = faDownload;
+  public faEdit = faEdit;
   public columns = ['name', 'action'];
   public newFileUploader: FileUploader;
+  public fileEditId: number;
 
   public fileOverNew = false;
 
@@ -49,4 +52,8 @@ export class SongFilesComponent {
   public onFileOverNew(hover: boolean) {
     this.fileOverNew = hover;
   }
+  public onClickEdit(fileId: number) {
+    this.fileEditId = fileId;
+  }
+
 }

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

@@ -23,7 +23,7 @@ export class SongNewComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.form = this.editSongService.initEditForm(false);
+    this.form = this.editSongService.initSongEditForm(false);
     this.change.markForCheck();
   }