feat(incidents): create downloadable incidents csv report

package.json

@@ -8,13 +8,15 @@
     "@hospitalrun/components": "~1.16.0",
     "@reduxjs/toolkit": "~1.4.0",
     "@types/escape-string-regexp": "~2.0.1",
+    "@types/json2csv": "~5.0.1",
     "@types/pouchdb-find": "~6.3.4",
     "bootstrap": "~4.5.0",
     "date-fns": "~2.15.0",
     "escape-string-regexp": "~4.0.0",
     "i18next": "~19.6.0",
     "i18next-browser-languagedetector": "~6.0.0",
     "i18next-xhr-backend": "~3.2.2",
+    "json2csv": "~5.0.1",
     "lodash": "^4.17.15",
     "node-sass": "~4.14.0",
     "pouchdb": "~7.2.1",

src/incidents/list/ViewIncidentsTable.tsx

@@ -1,5 +1,6 @@
-import { Spinner, Table } from '@hospitalrun/components'
+import { Spinner, Table, Dropdown } from '@hospitalrun/components'
 import format from 'date-fns/format'
+import { Parser } from 'json2csv'
 import React from 'react'
 import { useHistory } from 'react-router'
 
@@ -22,33 +23,98 @@ function ViewIncidentsTable(props: Props) {
     return <Spinner type="DotLoader" loading />
   }
 
+  // filter data
+  const exportData = [{}]
+  let first = true
+  if (data != null) {
+    data.forEach((elm) => {
+      const entry = {
+        code: elm.code,
+        date: format(new Date(elm.date), 'yyyy-MM-dd hh:mm a'),
+        reportedBy: elm.reportedBy,
+        reportedOn: format(new Date(elm.reportedOn), 'yyyy-MM-dd hh:mm a'),
+        status: elm.status,
+      }
+      if (first) {
+        exportData[0] = entry
+        first = false
+      } else {
+        exportData.push(entry)
+      }
+    })
+  }
+
+  function downloadCSV() {
+    const fields = Object.keys(exportData[0])
+    const opts = { fields }
+    const parser = new Parser(opts)
+    const csv = parser.parse(exportData)
+    console.log(csv)
+
+    const filename = 'IncidenntsCSV.csv'
+    const text = csv
+    const element = document.createElement('a')
+    element.setAttribute('href', `data:text/plain;charset=utf-8,${encodeURIComponent(text)}`)
+    element.setAttribute('download', filename)
+
+    element.style.display = 'none'
+    document.body.appendChild(element)
+
+    element.click()
+
+    document.body.removeChild(element)
+  }
+
+  const dropdownItems = [
+    {
+      onClick: function runfun() {
+        downloadCSV()
+      },
+      text: 'CSV',
+    },
+  ]
+
   return (
-    <Table
-      getID={(row) => row.id}
-      data={data}
-      columns={[
-        { label: t('incidents.reports.code'), key: 'code' },
-        {
-          label: t('incidents.reports.dateOfIncident'),
-          key: 'date',
-          formatter: (row) => (row.date ? format(new Date(row.date), 'yyyy-MM-dd hh:mm a') : ''),
-        },
-        {
-          label: t('incidents.reports.reportedBy'),
-          key: 'reportedBy',
-          formatter: (row) => extractUsername(row.reportedBy),
-        },
-        {
-          label: t('incidents.reports.reportedOn'),
-          key: 'reportedOn',
-          formatter: (row) =>
-            row.reportedOn ? format(new Date(row.reportedOn), 'yyyy-MM-dd hh:mm a') : '',
-        },
-        { label: t('incidents.reports.status'), key: 'status' },
-      ]}
-      actionsHeaderText={t('actions.label')}
-      actions={[{ label: t('actions.view'), action: (row) => history.push(`incidents/${row.id}`) }]}
-    />
+    <>
+      <Table
+        getID={(row) => row.id}
+        data={data}
+        columns={[
+          {
+            label: t('incidents.reports.code'),
+            key: 'code',
+          },
+          {
+            label: t('incidents.reports.dateOfIncident'),
+            key: 'date',
+            formatter: (row) => (row.date ? format(new Date(row.date), 'yyyy-MM-dd hh:mm a') : ''),
+          },
+          {
+            label: t('incidents.reports.reportedBy'),
+            key: 'reportedBy',
+            formatter: (row) => extractUsername(row.reportedBy),
+          },
+          {
+            label: t('incidents.reports.reportedOn'),
+            key: 'reportedOn',
+            formatter: (row) =>
+              row.reportedOn ? format(new Date(row.reportedOn), 'yyyy-MM-dd hh:mm a') : '',
+          },
+          {
+            label: t('incidents.reports.status'),
+            key: 'status',
+          },
+        ]}
+        actionsHeaderText={t('actions.label')}
+        actions={[
+          {
+            label: t('actions.view'),
+            action: (row) => history.push(`incidents/${row.id}`),
+          },
+        ]}
+      />
+      <Dropdown direction="down" variant="secondary" text="DOWNLOAD" items={dropdownItems} />
+    </>
   )
 }