This repository has been archived by the owner on Jan 9, 2023. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
/
ViewIncidentsTable.tsx
123 lines (109 loc) · 3.3 KB
/
ViewIncidentsTable.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
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'
import useTranslator from '../../shared/hooks/useTranslator'
import { extractUsername } from '../../shared/util/extractUsername'
import useIncidents from '../hooks/useIncidents'
import IncidentSearchRequest from '../model/IncidentSearchRequest'
interface Props {
searchRequest: IncidentSearchRequest
}
function ViewIncidentsTable(props: Props) {
const { searchRequest } = props
const { t } = useTranslator()
const history = useHistory()
const { data, isLoading } = useIncidents(searchRequest)
if (data === undefined || isLoading) {
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 incidentsText = t('incidents.label')
const filename = incidentsText.concat('.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}`),
},
]}
/>
<Dropdown direction="down" variant="secondary" text="DOWNLOAD" items={dropdownItems} />
</>
)
}
export default ViewIncidentsTable