Added Button

package-lock.json

@@ -5595,6 +5595,11 @@
         }
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",

package.json

@@ -39,6 +39,7 @@
     "chart.js": "^2.9.4",
     "chartjs-plugin-datalabels": "^0.7.0",
     "code-128-encoder": "^3.1.1",
+    "file-saver": "^2.0.5",
     "lodash.isequal": "^4.5.0",
     "ng2-charts": "^2.4.2",
     "ngx-qrcode-svg": "^2.0.0",

src/app/graphs/graphs.component.html

@@ -112,7 +112,7 @@
 
   <mat-card>
     <mat-card-header>
-      <h3 class="mb-0">Records to be processed </h3>
+      <h3 class="mb-0">Records to be processed <button mat-raised-button class="btn-sm" color="primary" (click)="downloadSearchResults()">Download Table</button> </h3> 
     </mat-card-header>
 
     <table mat-table [dataSource]="searchResult" class="mat-elevation-z8">

src/app/graphs/graphs.component.ts

@@ -108,7 +108,6 @@ export class GraphsComponent implements OnInit {
     this.graphService.getRawSearchData(this.form, this.currentPage).subscribe(searchResult => this.searchResult = searchResult);
   }
 
-
   searchToday(): void {
     this.startDate = new Date();
     this.endDate = new Date();
@@ -121,6 +120,10 @@ export class GraphsComponent implements OnInit {
     this.updateGraphData();
   }
   
+  downloadSearchResults(): void {
+    this.graphService.downloadSearchResults(this.form);
+  }
+
   updateGraphData(): void {
 
     if (this.form.location.trim().split(' ').length === 1) {
@@ -182,7 +185,6 @@ export class GraphsComponent implements OnInit {
     this.form.startDate = startDate.toLocaleDateString();
     this.form.endDate = endDate.toLocaleDateString();
     this.updateGraphData();
-    this.graphService.downloadSearchResults(this.form);
   }
 
   chartClicked(e: any): void {

src/app/services/graph.service.ts

@@ -1,15 +1,15 @@
 import { Injectable, Inject } from '@angular/core';
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
 import { APP_BASE_HREF } from '@angular/common';
 import { Observable, throwError } from 'rxjs';
-import { catchError, timeout } from 'rxjs/operators';
+import { catchError, map, timeout } from 'rxjs/operators';
 import { ApiError } from '../models/apiError.interface';
 import { AppEnvironment } from '../models/appEnvironment.interface';
 import { HttpParams } from '@angular/common/http';
 import { Sample } from '../models/sample.interface';
 
 import { SearchForm } from '../models/search_form';
-
+import { saveAs } from 'file-saver';
 @Injectable({
   providedIn: 'root'
 })
@@ -22,13 +22,14 @@ export class GraphService {
     this.apiRoot = environment.api;
   }
 
-  downloadSearchResults(form: SearchForm): Observable<Sample[]> {
+  downloadSearchResults(form: SearchForm): void {
     let params = this.createParams(form);
  
-    return this.httpClient
-      .get<Sample[]>(this.apiRoot + `/dashboard/download`, { params })
-      .pipe(timeout(1000), catchError(err => this._handleError(err)))
-      .pipe(catchError(err => this._handleError(err)));
+    this.httpClient
+      .get(this.apiRoot + `/dashboard/download`,  {responseType: 'text', params: params}).subscribe((data: string) => {
+        let blob = new Blob([data], { type: 'text/csv' });
+        saveAs(blob, "data.csv");
+      });
   }
 
   getRawSearchData(form: SearchForm, page: number): Observable<Sample[]> {