[DSM]-PEPPER-948 download of onc history upload template (#2156)

* DSM-/PEPPER-948-download-of-Onc-History-upload-template initial

* DSM-PEPPER-948-download-of-Onc-History-upload-template backend integrated

* DSM-PEPPER-948-download-of-Onc-History-upload-template linter fix

* DSM-PEPPER-948-download-of-Onc-History-upload-template color adjusted

* DSM-PEPPER-948-download-of-Onc-History-upload-template naming fixed

Author: GiCharkviani

ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.html

@@ -1,8 +1,15 @@
+<h1> Onc History Upload </h1>
+
 <div class="message">
-  <p class="message-fail" *ngIf="uploadStatus === 1">{{errorMessage}}</p>
-  <p class="message-success" *ngIf="uploadStatus === 0">Upload successful</p>
+  <p class="message-fail" *ngIf="requestStatus === 1">{{errorMessage}}</p>
+  <p class="message-success" *ngIf="requestStatus === 0">Upload successful</p>
+</div>
 
+<div class="download-button">
+  <button (click)="downloadTemplateAndDirectory()" mat-raised-button color="primary">Download</button>
+  <p>Click here to download the Onc History upload template and data dictionary</p>
 </div>
+
 <div class="upload">
   <app-filepicker [id]="'kitUploadFile'" [fileFormat]="'.txt'" (fileSelected)="fileSelected($event)"></app-filepicker>
   <button type="button" mat-raised-button color="primary"

ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.scss

@@ -1,3 +1,5 @@
+@use 'commonStyles' as common;
+
 .message {
   height: 2em;
   width: 100%;
@@ -21,3 +23,12 @@
     margin-top: .5em;
   }
 }
+
+.download-button {
+  @include common.flexContainer(center, space-between);
+  width: 42em;
+  p {
+    margin: 0;
+    padding: 0;
+  }
+}

ddp-workspace/projects/ddp-dsm-ui/src/app/oncHistoryUpload/oncHistoryUpload.component.ts

@@ -1,12 +1,13 @@
-import { Component } from '@angular/core';
+import {Component, OnDestroy} from '@angular/core';
 import { DSMService } from '../services/dsm.service';
 import {finalize} from 'rxjs/operators';
 import {SessionService} from '../services/session.service';
 import {MatDialog} from '@angular/material/dialog';
 import {LoadingModalComponent} from '../modals/loading-modal.component';
-import {HttpErrorResponse} from '@angular/common/http';
+import {HttpErrorResponse, HttpResponse} from '@angular/common/http';
+import {Subject, takeUntil} from 'rxjs';
 
-enum UploadStatus {
+enum RequestStatus {
   SUCCESS,
   FAIL,
   DEFAULT
@@ -17,18 +18,24 @@ enum UploadStatus {
   templateUrl: 'oncHistoryUpload.component.html',
   styleUrls: ['oncHistoryUpload.component.scss']
 })
-export class OncHistoryUploadComponent {
-  public uploadStatus: UploadStatus = UploadStatus.DEFAULT;
+export class OncHistoryUploadComponent implements OnDestroy {
+  public requestStatus: RequestStatus = RequestStatus.DEFAULT;
   public errorMessage: string;
   public selectedTextFile: File;
 
+  private subscriptionSubject = new Subject<void>();
+
   constructor(private readonly dsmService: DSMService,
               private readonly session: SessionService,
               private readonly dialog: MatDialog) {}
 
+  ngOnDestroy(): void {
+    this.subscriptionSubject.next();
+    this.subscriptionSubject.complete();
+  }
 
   upload(): void {
-    this.uploadStatus = UploadStatus.DEFAULT;
+    this.requestStatus = RequestStatus.DEFAULT;
 
     const tempDialog = this.dialog
       .open(LoadingModalComponent, {data: {message: 'Uploading, this may take a while'}, disableClose: true});
@@ -37,17 +44,12 @@ export class OncHistoryUploadComponent {
       this.session.selectedRealm,
       this.selectedTextFile
     ).pipe(
+      takeUntil(this.subscriptionSubject),
       finalize(() => tempDialog.close())
     )
       .subscribe({
-        next: () => this.uploadStatus = UploadStatus.SUCCESS,
-        error: (error: any) => {
-          if (error instanceof HttpErrorResponse) {
-            console.log(error);
-            this.uploadStatus = UploadStatus.FAIL;
-            this.errorMessage = error.error;
-          }
-        },
+        next: () => this.requestStatus = RequestStatus.SUCCESS,
+        error: (error: any) => this.handleError(error)
       });
   }
 
@@ -57,4 +59,44 @@ export class OncHistoryUploadComponent {
     }
     this.selectedTextFile = file;
   }
+
+  public downloadTemplateAndDirectory(): void {
+    const tempDialog = this.dialog
+      .open(LoadingModalComponent, {data: {message: 'Downloading... this may take a while'}, disableClose: true});
+
+    this.dsmService.downloadOncHistoryTemplateAndDirectory(this.session.selectedRealm)
+      .pipe(takeUntil(this.subscriptionSubject), finalize(() => tempDialog.close()))
+      .subscribe({
+        next: (response: HttpResponse<ArrayBuffer>) => {
+          const arrayBuffer = response.body;
+          const contentDisposition =  response.headers.get('Content-Disposition');
+          const blob = new Blob([arrayBuffer], {
+            type: 'application/zip'
+          });
+
+          const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+          const matches = filenameRegex.exec(contentDisposition);
+          let filename = 'Onc_history.zip'; // Default filename in case extraction fails
+          if (matches != null && matches[1]) {
+            filename = matches[1].replace(/['"]/g, '');
+          }
+
+          const url = window.URL.createObjectURL(blob);
+          const link = document.createElement('a');
+          link.href = url;
+          link.download = filename;
+
+          link.click();
+          window.URL.revokeObjectURL(url);
+        },
+        error: (error: any) => this.handleError(error)
+      });
+  }
+
+  private handleError(error: any): void {
+    if (error instanceof HttpErrorResponse) {
+      this.requestStatus = RequestStatus.FAIL;
+      this.errorMessage = error.error;
+    }
+  }
 }

ddp-workspace/projects/ddp-dsm-ui/src/app/services/dsm.service.ts

@@ -595,6 +595,16 @@ export class DSMService {
     );
   }
 
+  public downloadOncHistoryTemplateAndDirectory(realm: string): Observable<any> {
+    const url = this.baseUrl + DSMService.UI + 'oncHistory/template';
+    const map: { name: string; value: any }[] = [];
+    map.push({name: DSMService.REALM, value: realm});
+
+    return this.http.get(url, this.buildZipDownloadHeader(map)).pipe(
+      catchError(this.handleError)
+    );
+  }
+
   public getKitTypes(realm: string): Observable<any> {
     const url = this.baseUrl + DSMService.UI + 'kitTypes/' + realm;
     const map: { name: string; value: any }[] = [];
@@ -1197,6 +1207,19 @@ export class DSMService {
     return {headers: this.uploadHeader(), withCredentials: true, params};
   }
 
+  private buildZipDownloadHeader(map: any[]): any {
+    let params: HttpParams = new HttpParams();
+    for (const param of map) {
+      params = params.append(param.name, param.value);
+    }
+    return {headers: this.zipDownloadHeaders(),
+      withCredentials: true,
+      params,
+      responseType: 'arraybuffer',
+      observe: 'response'
+    };
+  }
+
   private buildJsonAuthHeader(): HttpHeaders {
     if (this.checkCookieBeforeCall()) {
       return new HttpHeaders({
@@ -1216,6 +1239,15 @@ export class DSMService {
     }
   }
 
+  private zipDownloadHeaders(): HttpHeaders {
+    if (this.checkCookieBeforeCall()) {
+      return new HttpHeaders({
+        'Content-Type': 'application/zip',
+        Authorization: this.sessionService.getAuthBearerHeaderValue()
+      } );
+    }
+  }
+
   private uploadHeader(): HttpHeaders {
     if (this.checkCookieBeforeCall()) {
       return new HttpHeaders({