diff --git a/package.json b/package.json
index 5df817faf6..abf0c57f4e 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
"@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",
@@ -15,6 +16,7 @@
"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",
diff --git a/src/incidents/list/ViewIncidentsTable.tsx b/src/incidents/list/ViewIncidentsTable.tsx
index d57532e3f4..b4a57cc58b 100644
--- a/src/incidents/list/ViewIncidentsTable.tsx
+++ b/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
}
+ // 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 (
-
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}`) }]}
- />
+ <>
+ 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}`),
+ },
+ ]}
+ />
+
+ >
)
}