create and use component for member incidents

2019-06-18 15:27:18 +02:00
parent e5e86163ea
commit 82aad70912
2 changed files with 96 additions and 75 deletions
--- a/client/src/components/MemberIncidentsTable/index.js
+++ b/client/src/components/MemberIncidentsTable/index.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import { Loader } from 'semantic-ui-react';
+import ReactTable from 'react-table';
+import 'react-table/react-table.css';
+
+import {incidentsReportHeaderTitles} from '../../constants/menuItems';
+import {
+    incidentDescriptions,
+    incidentLevelDescriptions,
+    UNLOCKED_INCIDENT,
+    UNSCHEDULED_INCIDENT
+} from '../../constants/enums';
+
+
+const MemberIncidentsTable = props => {
+    const { loading, incidents, title } = 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;
+                                    default:
+                                        cellValue = '';
+                                        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 (
+        <div>
+            <h4>{title}</h4>
+            <Loader active={loading} />
+            {
+                !loading && incidents &&
+                <ReactTable
+                    data={incidents}
+                    multiSort={false}
+                    columns={columns}
+                />
+            }
+        </div>
+    );
+};
+
+export default MemberIncidentsTable;