From 06ef90fce40bceeb5767ca16c2c501d72f3083e8 Mon Sep 17 00:00:00 2001
From: Benjamin Ifland <benjamin@Apfelbox.local>
Date: Wed, 27 Mar 2019 17:12:27 +0100
Subject: [PATCH] file upload fix

---
 WEB/src/app/app.module.ts                     |  4 ++-
 .../song-files/song-files.component.html      | 27 ++++++++++++-------
 .../songs/song-files/song-files.component.ts  |  3 ++-
 .../app/components/songs/songs.component.html |  4 +--
 WEB/src/styles.less                           |  2 +-
 5 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/WEB/src/app/app.module.ts b/WEB/src/app/app.module.ts
index 6d2ff7e..5ff2877 100644
--- a/WEB/src/app/app.module.ts
+++ b/WEB/src/app/app.module.ts
@@ -17,6 +17,7 @@ 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 { MatProgressBarModule } from '@angular/material/progress-bar';
 
 import { TableComponent } from './components/songs/table/table.component';
 import { SongsComponent } from './components/songs/songs.component';
@@ -43,7 +44,6 @@ import { FileUploadModule } from 'ng2-file-upload';
     BrowserAnimationsModule,
     FormsModule,
     ReactiveFormsModule,
-    AppRoutingModule,
     HttpClientModule,
     ODataModule,
 
@@ -55,9 +55,11 @@ import { FileUploadModule } from 'ng2-file-upload';
     MatRadioModule,
     MatSelectModule,
     MatTooltipModule,
+    MatProgressBarModule,
 
     FontAwesomeModule,
     FileUploadModule,
+    AppRoutingModule,
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/WEB/src/app/components/songs/song-files/song-files.component.html b/WEB/src/app/components/songs/song-files/song-files.component.html
index 60f005d..c19e5f8 100644
--- a/WEB/src/app/components/songs/song-files/song-files.component.html
+++ b/WEB/src/app/components/songs/song-files/song-files.component.html
@@ -4,22 +4,24 @@
       <table mat-table [dataSource]="song.Files" class="mat-elevation-z8">
         <ng-container matColumnDef="name">
           <th mat-header-cell *matHeaderCellDef>
-            <div
-              [uploader]="newFileUploader"
-              (fileOver)="onFileOverNew($event)"
-              [class.file-over]="fileOverNew"
-            >
-              Angehängte Dateien
-            </div>
+            Angehängte Dateien
           </th>
           <td mat-cell *matCellDef="let element">{{ element.Name }}</td>
         </ng-container>
 
         <ng-container matColumnDef="action">
           <th mat-header-cell *matHeaderCellDef>
+            <input
+              type="file"
+              ng2FileSelect
+              [uploader]="newFileUploader"
+              multiple
+              style="display:none"
+              #newFileUploaderRef
+            />
             <button
               mat-icon-button
-              (click)="onClickNew()"
+              (click)="newFileUploaderRef.click()"
               matTooltip="neue Datei hochladen"
               matTooltipPosition="left"
             >
@@ -38,7 +40,14 @@
           </td>
         </ng-container>
 
-        <tr mat-header-row *matHeaderRowDef="columns"></tr>
+        <tr
+          mat-header-row
+          *matHeaderRowDef="columns"
+          ng2FileDrop
+          [uploader]="newFileUploader"
+          (fileOver)="onFileOverNew($event)"
+          [class.file-over]="fileOverNew"
+        ></tr>
         <tr mat-row *matRowDef="let row; columns: columns"></tr>
       </table>
     </mat-card-content>
diff --git a/WEB/src/app/components/songs/song-files/song-files.component.ts b/WEB/src/app/components/songs/song-files/song-files.component.ts
index 4dfdaf0..55e4c2a 100644
--- a/WEB/src/app/components/songs/song-files/song-files.component.ts
+++ b/WEB/src/app/components/songs/song-files/song-files.component.ts
@@ -32,6 +32,8 @@ export class SongFilesComponent {
         this.selectedSongId = _.ID;
         this.song = _;
         this.newFileUploader = this.fileuploadFactory.provideForNewFiles(_.ID);
+        this.newFileUploader.onCompleteItem = () => songService.selectSong(_.ID);
+        this.newFileUploader.onProgressItem = () => change.markForCheck;
       } else {
         this.selectedSongId = 0;
         this.song = null;
@@ -41,7 +43,6 @@ export class SongFilesComponent {
     });
   }
 
-  public onClickNew(): void {}
   public onClickDownload(id: number): void {}
   public onFileOverNew(hover: boolean) {
     this.fileOverNew = hover;
diff --git a/WEB/src/app/components/songs/songs.component.html b/WEB/src/app/components/songs/songs.component.html
index 31ee981..02059cb 100644
--- a/WEB/src/app/components/songs/songs.component.html
+++ b/WEB/src/app/components/songs/songs.component.html
@@ -1,5 +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>
+<app-song [@blend] *ngIf="songsService.state === State.read"></app-song>
+<app-song-files [@blend] *ngIf="songsService.state === State.read"></app-song-files>
diff --git a/WEB/src/styles.less b/WEB/src/styles.less
index 104445e..92e0749 100644
--- a/WEB/src/styles.less
+++ b/WEB/src/styles.less
@@ -10,7 +10,7 @@ html {
 }
 
 .page-container {
-  position: absolute;
+  position: fixed;
   top: 20px;
   left: 20px;
   bottom: 20px;