Fixing CSV export and adding download button

Author: perki

dr-patient-view-controler.js

@@ -1,5 +1,5 @@
 import { drPatientLib  } from "./dr-patient-view-lib.js";
-
+import { exportCSVFile } from "./exportToCSV.js";
 /**
  * Based on 
  * - drApiConnecion
@@ -23,10 +23,25 @@ const tableHeaders = {
   description: 'Description'
 }
 
+const downloadHeaders = Object.assign({
+  streamId: 'Stream Id',
+  eventType: 'Event Type'
+}, tableHeaders);
+
 async function refresh () {
   const { patientApiEndpoint, questionaryId } = getRequestFrormApiEndPoint();
-  console.log('>> zz', patientApiEndpoint, questionaryId);
-  const lines = await drPatientLib.getPatientData(patientApiEndpoint, questionaryId);
+  const { infos, lines }  = await drPatientLib.getPatientData(patientApiEndpoint, questionaryId);
+  console.log('>> zz', infos);
+  // -- set patient Id
+  const username = infos.user.username;
+  document.getElementById('patient-label').innerHTML = username;
+
+  // -- set download button
+  document.getElementById('button-download').onclick = () => {
+    exportCSVFile(downloadHeaders, lines, username + '-' + questionaryId);
+  };
+
+  // -- update table
   const table = document.getElementById('patient-data-table');
   const headerRow = table.insertRow(-1);
   for (const thLabel of Object.values(tableHeaders)) {

dr-patient-view-lib.js

@@ -29,8 +29,9 @@ async function getPatientData (patientApiEndoint, questionaryId) {
   }
 
   const connection = new Pryv.Connection(patientApiEndoint);
+  const infos = await connection.accessInfo();
   await connection.getEventsStreamed(queryParams, forEachEvent);
-  return patientData;
+  return { infos, lines: patientData };
 }
 
 

dr-patient-view.html

@@ -18,12 +18,14 @@
   <div class="container">
     <img src="https://healthdatasafe.github.io/style/images/Horizontal/hds-logo-hz-1024x400-hz-color.png" alt="Logo" width="300px">
     <h1>Demo Form - Dr's Patient View</h1>
+    <a href="dr.html" class="btn btn-primary">HOME</a>
     <div class="card">
       <div class="card-patient">
-        Patient: <h2 class="patient-label">Patient X</h2>
+        <h2> Patient: <span id="patient-label">Patient X</span></h2>
       </div>
     </div>
     <div class="card" id="data-view">
+      <button id="button-download" class="btn btn-secondary">Download</button>
       <table id="patient-data-table" class="table">
 
       </table>

exportToCSV.js

@@ -1,30 +1,21 @@
-function convertToCSV(objArray) {
-  var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
-  var str = '';
-
-  for (var i = 0; i < array.length; i++) {
-      var line = '';
-      for (var index in array[i]) {
-          if (line != '') line += ','
-
-          line += array[i][index];
-      }
-
-      str += line + '\r\n';
-  }
-
-  return str;
+/**
+ * convert all " to '' and add ","
+ */
+function fenceLine(items) {
+    return '"' + items.map(i => i.replaceAll('"','\'\'')).join('","') + '"\r\n';
 }
 
-export function exportCSVFile(headers, items, fileTitle) {
-  if (headers) {
-      items.unshift(headers);
-  }
-
-  // Convert Object to JSON
-  var jsonObject = JSON.stringify(items);
+export function exportCSVFile(headers, lines, fileTitle) {
+  let csv = fenceLine(Object.values(headers));
 
-  var csv = convertToCSV(jsonObject);
+  for (const line of lines) {
+    const items = [];
+    for (const key of Object.keys(headers)) {
+        const v = line[key];
+        items.push(v == null ? '': v + '');
+    }
+    csv += fenceLine(items);
+  }
 
   var exportedFilenmae = fileTitle + '.csv' || 'export.csv';