Adds a trashcan so you can delete a file reference if you really want

but you cannot delete the two important reference files that were already there

src/app/reference-files/reference-files.component.html

@@ -8,13 +8,18 @@
 
   <div *ngFor="let refFile of referenceFiles" fxLayout="row" fxLayoutGap="40px">
     <mat-card class="mat-elevation-z0">
-      <mat-card-header>
+      <mat-card-header fxLayout="row" fxLayoutAlign="space-between center">
         <mat-card-title>
           <h2>
             <mat-icon>{{refFile.type | getIconCode}}</mat-icon>
-            {{refFile.name}}
+              {{refFile.name}}
           </h2>
         </mat-card-title>
+        <div class="trashcan" *ngIf="(refFile.name !== 'documents.xlsx') && (refFile.name !== 'investigators.xlsx')">
+            <button mat-button (click)="deleteFile(refFile.id, refFile.name)" matTooltip="Delete reference file '{{ refFile.name }}'">
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
       </mat-card-header>
       <mat-card-content>
         <div>Last Modified: {{refFile.last_modified | date:'medium'}}</div>

src/app/reference-files/reference-files.component.scss

@@ -9,3 +9,7 @@ mat-card {
   padding: 2em;
   border: 1px solid $brand-gray;
 }
+
+.trashcan {
+  color: darkorange;
+}

src/app/reference-files/reference-files.component.ts

@@ -69,19 +69,23 @@ export class ReferenceFilesComponent {
     dialogRef.afterClosed().subscribe((data: OpenFileDialogData) => {
       if (data && data.file) {
         const newFileMeta: FileMeta = {
-          id: data.fileMetaId,
           content_type: data.file.type,
           name: data.file.name,
           type: getFileType(data.file),
           is_reference: true,
         };
-        const fileParams = {};
-        this.apiService.addFile(fileParams, newFileMeta, data.file).subscribe(refs => {
-          this.snackBar.open(`Added new file ${fm.name}.`, 'Ok', {duration: 3000});
+          this.apiService.addReferenceFile(newFileMeta, data.file).subscribe(refs => {
+            this.snackBar.open(`Added new file ${newFileMeta.name}.`, 'Ok', {duration: 3000});
             this._loadReferenceFiles();
-          }
-        )
+          });
       }
     });
   }
+
+  deleteFile(id: number, name: string) {
+    this.apiService.deleteFileMeta(id).subscribe(f => {
+      this.snackBar.open(`Deleted reference file ${name}.`, 'Ok', {duration: 3000});
+      this._loadReferenceFiles();
+    });
+  }
 }