Merge pull request #109 from sartography/chore/resource-files-461

Chore/resource files 461

package.json

@@ -63,7 +63,7 @@
     "ngx-markdown": "^12.0.1",
     "protractor": "^7.0.0",
     "rxjs": "^6.5.3",
-    "sartography-workflow-lib": "0.0.569",
+    "sartography-workflow-lib": "0.0.571",
     "tslib": "^2.3.0",
     "uuid": "^8.3.2",
     "zone.js": "^0.11.4"

src/app/_dialogs/open-file-dialog/open-file-dialog.component.html

@@ -2,6 +2,7 @@
   <ng-container *ngIf="!mode">Where is your file?</ng-container>
   <ng-container *ngIf="mode === 'local'">Upload a local {{fileTypesString()}} file</ng-container>
   <ng-container *ngIf="mode === 'remote'">Open a {{fileTypesString()}} file from URL</ng-container>
+  <ng-container *ngIf="mode === 'reference'">Upload a new reference file ({{fileTypes}})</ng-container>
   <span fxFlex></span>
   <button mat-icon-button mat-dialog-close=""><mat-icon>close</mat-icon></button>
 </div>
@@ -28,6 +29,17 @@
     <button (click)="cancel()" mat-flat-button>Cancel</button>
   </div>
 
+  <div *ngIf="mode === 'reference'">
+    <mat-form-field (click)="fileInput.click()">
+      <span matPrefix><mat-icon>folder_open</mat-icon> &nbsp;</span>
+      <input [value]="getFileName()" disabled matInput type="text">
+    </mat-form-field>
+    <input #fileInput (change)="onFileSelected($event)" accept="{{fileExtensions()}}" hidden id="file"
+           type="file">
+    <button (click)="onSubmit()" [disabled]="!data.file" color="primary" mat-flat-button>Upload File</button>
+    <button (click)="cancel()" mat-flat-button>Cancel</button>
+  </div>
+
   <div *ngIf="mode === 'remote'">
     <mat-form-field>
       <span matPrefix><mat-icon>link</mat-icon> &nbsp;</span>

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

@@ -1,15 +1,25 @@
 <div class="container" fxLayout="column" fxLayoutGap="40px">
-  <h1>Reference Files</h1>
+  <div class="top-bar" fxLayout="row" fxLayoutGap="75px">
+    <h1>Reference Files</h1>
+    <button mat-button color="accent" (click)="addNewReferenceFile()">
+      <mat-icon>file_upload</mat-icon> Add new Reference File
+    </button>
+  </div>
 
   <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

@@ -1,6 +1,15 @@
 @import "../../config";
 
+.top-bar {
+  padding-top: 1em;
+  margin-bottom: 1em;
+}
+
 mat-card {
   padding: 2em;
   border: 1px solid $brand-gray;
 }
+
+.trashcan {
+  color: darkorange;
+}

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

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {MatDialog} from '@angular/material/dialog';
 import {MatSnackBar} from '@angular/material/snack-bar';
 import * as fileSaver from 'file-saver';
-import {ApiService, FileMeta, FileType} from 'sartography-workflow-lib';
+import {ApiService, FileMeta, FileParams, FileType, getFileType, isNumberDefined} from 'sartography-workflow-lib';
 import {OpenFileDialogComponent} from '../_dialogs/open-file-dialog/open-file-dialog.component';
 import {OpenFileDialogData} from '../_interfaces/dialog-data';
 
@@ -56,4 +56,36 @@ export class ReferenceFilesComponent {
       fileSaver.saveAs(blob, fm.name);
     });
   }
+
+  addNewReferenceFile(fm?: FileMeta, file?: File) {
+    const dialogData: OpenFileDialogData = {
+      fileMetaId: fm ? fm.id : undefined,
+      file,
+      mode: 'reference',
+      fileTypes: [FileType.DOC, FileType.DOCX, FileType.XLSX, FileType.XLS],
+    };
+    const dialogRef = this.dialog.open(OpenFileDialogComponent, {data: dialogData});
+
+    dialogRef.afterClosed().subscribe((data: OpenFileDialogData) => {
+      if (data && data.file) {
+        const newFileMeta: FileMeta = {
+          content_type: data.file.type,
+          name: data.file.name,
+          type: getFileType(data.file),
+          is_reference: true,
+        };
+          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();
+    });
+  }
 }