109 lines
4.2 KiB
JavaScript
109 lines
4.2 KiB
JavaScript
|
import React, { Component } from 'react';
|
||
|
|
import { connect } from 'react-redux';
|
||
|
|
import { Container, Loader } from 'semantic-ui-react';
|
||
|
|
import ReactTable from 'react-table';
|
||
|
|
import 'react-table/react-table.css';
|
||
|
|
|
||
|
|
import MainMenu from '../../components/MainMenu';
|
||
|
|
import { fetchIncidents } from '../../store/actions';
|
||
|
|
import { incidentsReportHeaderTitles } from '../../constants/menuItems';
|
||
|
|
import { incidentDescriptions, incidentLevelDescriptions, UNSCHEDULED_INCIDENT, UNLOCKED_INCIDENT } from '../../constants/enums';
|
||
|
|
|
||
|
|
class IncidentsReport extends Component {
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
const { fetchIncidents } = this.props;
|
||
|
|
fetchIncidents();
|
||
|
|
}
|
||
|
|
|
||
|
|
render () {
|
||
|
|
const { pendingIncidents, incidents } = this.props;
|
||
|
|
|
||
|
|
const columns = [];
|
||
|
|
if (incidents && incidents.length > 0){
|
||
|
|
const incidentHeaders = Object.keys(incidentsReportHeaderTitles);
|
||
|
|
|
||
|
|
incidentHeaders.forEach((header) => {
|
||
|
|
const columnTitle = incidentsReportHeaderTitles[header];
|
||
|
|
|
||
|
|
if (columnTitle){
|
||
|
|
const columnAlignments = {
|
||
|
|
left: 'left',
|
||
|
|
right: 'right',
|
||
|
|
};
|
||
|
|
let columnContentsAlignment = columnAlignments.left;
|
||
|
|
|
||
|
|
columns.push({
|
||
|
|
Header: incidentsReportHeaderTitles[header],
|
||
|
|
accessor: header,
|
||
|
|
Cell: props => {
|
||
|
|
let cellValue;
|
||
|
|
|
||
|
|
switch (props.column.id) {
|
||
|
|
case 'incidentType':
|
||
|
|
cellValue = incidentDescriptions[props.value];
|
||
|
|
break;
|
||
|
|
case 'incidentLevel':
|
||
|
|
cellValue = incidentLevelDescriptions[props.value];
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'feeDescription':
|
||
|
|
const { incidentType, incidentLevel, timeIntervalsToCharge } = props.row['_original'];
|
||
|
|
switch (incidentType) {
|
||
|
|
case UNLOCKED_INCIDENT:
|
||
|
|
cellValue = `${incidentLevelDescriptions[incidentLevel]}`;
|
||
|
|
break;
|
||
|
|
case UNSCHEDULED_INCIDENT:
|
||
|
|
cellValue = `${timeIntervalsToCharge} x 5 min`;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'totalChargeFee':
|
||
|
|
const totalFee = props.value ? props.value : props.row['_original'].incidentPrice;
|
||
|
|
const totalFeeFormatted = parseFloat(totalFee).toFixed(2);
|
||
|
|
cellValue = `$ ${totalFeeFormatted}`;
|
||
|
|
columnContentsAlignment = columnAlignments.right;
|
||
|
|
break;
|
||
|
|
|
||
|
|
default:
|
||
|
|
cellValue = props.value;
|
||
|
|
}
|
||
|
|
|
||
|
|
return <div style={{ textAlign: columnContentsAlignment }}>{cellValue}</div>
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Container>
|
||
|
|
<MainMenu/>
|
||
|
|
<h3>Incidents Report</h3>
|
||
|
|
<hr/>
|
||
|
|
<Loader active={pendingIncidents} />
|
||
|
|
{
|
||
|
|
!pendingIncidents && incidents &&
|
||
|
|
<ReactTable
|
||
|
|
data={incidents}
|
||
|
|
multiSort={false}
|
||
|
|
columns={columns}
|
||
|
|
/>
|
||
|
|
}
|
||
|
|
</Container>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const mapStateToProps = (state) => ({
|
||
|
|
pendingIncidents: state.incidentsReport.pending,
|
||
|
|
incidents: state.incidentsReport.result,
|
||
|
|
});
|
||
|
|
|
||
|
|
const mapDispatchToProps = (dispatch) => ({
|
||
|
|
fetchIncidents: () => fetchIncidents(dispatch),
|
||
|
|
});
|
||
|
|
|
||
|
|
export default connect(mapStateToProps, mapDispatchToProps)(IncidentsReport);
|