diff --git a/client/src/components/MemberIncidentsTables/components/SingleIncidentsTable.js b/client/src/components/MemberIncidentsTables/components/SingleIncidentsTable.js
index b694963..27d5872 100644
--- a/client/src/components/MemberIncidentsTables/components/SingleIncidentsTable.js
+++ b/client/src/components/MemberIncidentsTables/components/SingleIncidentsTable.js
@@ -5,6 +5,8 @@ import ReactTable from 'react-table';
import 'react-table/react-table.css';
import { NavLink } from 'react-router-dom';
+import SelectTable from "../../SelectTable";
+
import {incidentsReportHeaderTitles} from '../../../constants/constants';
import {
incidentTableTypes,
@@ -42,6 +44,9 @@ class SingleIncidentsTable extends Component {
tableType
} = this.props;
const incidents = this.props.incidents ? this.props.incidents : [];
+ incidents.forEach(incident => {
+ incident.id = `${incident.incidentType}-${incident.incidentId}`;
+ });
const columns = [];
if (incidents && incidents.length > 0){
@@ -175,10 +180,11 @@ class SingleIncidentsTable extends Component {
}
{
!loading && incidents &&
-
}
diff --git a/client/src/components/SelectTable/index.js b/client/src/components/SelectTable/index.js
new file mode 100644
index 0000000..7b570dd
--- /dev/null
+++ b/client/src/components/SelectTable/index.js
@@ -0,0 +1,109 @@
+import React, { Component } from 'react';
+import Table from 'react-table';
+import SelectTableHOC from 'react-table/lib/hoc/selectTable';
+
+const SelectTableElement = SelectTableHOC(Table);
+
+class SelectTable extends Component {
+ static defaultProps = {
+ keyField: "id"
+ };
+
+ /**
+ * Toggle a single checkbox for select table
+ */
+ toggleSelection = (key, shift, row) => {
+ // start off with the existing state
+ let selection = [...this.state.selection];
+ const keyIndex = selection.indexOf(key);
+
+ // check to see if the key exists
+ if (keyIndex >= 0) {
+ // it does exist so we will remove it using destructing
+ selection = [
+ ...selection.slice(0, keyIndex),
+ ...selection.slice(keyIndex + 1)
+ ];
+ } else {
+ // it does not exist so add it
+ selection.push(key);
+ }
+ // update the state
+ this.setState({ selection });
+ };
+
+ /**
+ * Toggle all checkboxes for select table
+ */
+ toggleAll = () => {
+ const { keyField } = this.props;
+ const selectAll = !this.state.selectAll;
+ const selection = [];
+
+ if (selectAll) {
+ // we need to get at the internals of ReactTable
+ const wrappedInstance = this.checkboxTable.getWrappedInstance();
+ // the 'sortedData' property contains the currently accessible records based on the filter and sort
+ const currentRecords = wrappedInstance.getResolvedState().sortedData;
+ // we just push all the IDs onto the selection array
+ currentRecords.forEach(item => {
+ selection.push(`select-${item._original[keyField]}`);
+ });
+ }
+ this.setState({ selectAll, selection });
+ };
+
+ /**
+ * Whether or not a row is selected for select table
+ */
+ isSelected = key => {
+ return this.state.selection.includes(`select-${key}`);
+ };
+
+ rowFn = (state, rowInfo, column, instance) => {
+ const { selection } = this.state;
+
+ return {
+ onClick: (e, handleOriginal) => {
+ // console.log("It was in this row:", rowInfo);
+
+ // IMPORTANT! React-Table uses onClick internally to trigger
+ // events like expanding SubComponents and pivots.
+ // By default a custom 'onClick' handler will override this functionality.
+ // If you want to fire the original onClick handler, call the
+ // 'handleOriginal' function.
+ if (handleOriginal) {
+ handleOriginal();
+ }
+ },
+ style: {
+ background:
+ rowInfo &&
+ selection.includes(`select-${rowInfo.original.id}`) &&
+ "lightgreen"
+ }
+ };
+ };
+
+ state = {
+ selectAll: false,
+ selection: []
+ };
+
+ render() {
+ return (
+ (this.checkboxTable = r)}
+ toggleSelection={this.toggleSelection}
+ selectAll={this.state.selectAll}
+ selectType="checkbox"
+ toggleAll={this.toggleAll}
+ isSelected={this.isSelected}
+ getTrProps={this.rowFn}
+ />
+ );
+ }
+}
+
+export default SelectTable;