Handover report export to XLSX

package.json

@@ -25,16 +25,19 @@
     "@sentry/integrations": "^5.20.1",
     "canvas": "^2.6.1",
     "core-js": "^2.6.11",
+    "downloadjs": "^1.4.7",
     "file-saver": "^2.0.2",
     "firebaseui": "^4.6.1",
     "govuk-frontend": "^3.8.0",
     "html-docx-js": "^0.3.1",
     "html2canvas": "^1.0.0-rc.5",
     "jspdf": "^1.5.3",
+    "save-file": "^2.3.1",
     "vue": "^2.6.11",
     "vue-router": "^3.3.4",
     "vuex": "^3.5.1",
-    "vuexfire": "^3.2.3"
+    "vuexfire": "^3.2.3",
+    "xlsx-populate": "^1.21.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.12.1",

src/helpers/export.js

@@ -0,0 +1,18 @@
+import XLSXPopulate from 'xlsx-populate';
+import { save } from 'save-file';
+
+const downloadXLSX = async (data, title, filename) => {
+  const workbook = await XLSXPopulate.fromBlankAsync();
+  const sheet = workbook.sheet(0);
+  sheet.name(title);
+
+  sheet.cell('A1').value(data);
+  sheet.row(1).style({ bold: true, fill: 'eeeeee' });
+
+  const blob = await workbook.outputAsync();
+  await save(blob, filename);
+};
+
+export {
+  downloadXLSX
+};

src/store/applications.js

@@ -26,6 +26,9 @@ export default {
     records: [],
   },
   getters: {
+    getById: (state) => (applicationId) => {
+      return getById(state.records, applicationId);
+    },
     reasonableAdjustments(state) {
       return reasonableAdjustmentsReport(state.records);
     },
@@ -35,6 +38,10 @@ export default {
   },
 };
 
+const getById = (applications, applicationId) => {
+  return applications.find(application => application.id === applicationId);
+};
+
 const reasonableAdjustmentsReport = (applications) => {
   const report = {
     totalCount: applications.length,