split fees into specific categories and send delete request

client/src/components/MemberIncidentsTables/components/SingleIncidentsTable.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { Loader, Button } from 'semantic-ui-react';
-import ReactTable from 'react-table';
 import 'react-table/react-table.css';
 import { NavLink } from 'react-router-dom';
 
@@ -19,20 +18,68 @@ import { doorLockRelatedWithReservationIncidentHeaders, standaloneDoorLockIncide
 import { deleteIncidents } from "../../../store/actions";
 
 class SingleIncidentsTable extends Component {
+    state = {
+        selectedUnlockedIncidentIds: [],
+        selectedUnscheduledIncidentIds: [],
+        selectedBookingChangeIncidentIds: []
+    };
+
+    onSelectChange = (selectedIncidents) => {
+        const newSelectedUnlockedIncidentIds = [];
+        const newSelectedUnscheduledIncidentIds = [];
+        const newSelectedBookingChangeIncidentIds = [];
+
+        selectedIncidents.forEach(incident => {
+            const incidentDetails = incident.split('-');
+            // incident is described as : select-incidentType-incidentId
+            if (Array.isArray(incidentDetails) && incidentDetails.length > 2){
+                const incidentType = parseInt(incidentDetails[1]);
+                const incidentId = parseInt(incidentDetails[2]);
+
+                switch (incidentType) {
+                    case 2:
+                    case 5:
+                        newSelectedUnlockedIncidentIds.push(incidentId);
+                        break;
+                    case 3:
+                    case 4:
+                    case 6:
+                        newSelectedUnscheduledIncidentIds.push(incidentId);
+                        break;
+                    case 7:
+                    case 8:
+                    case 9:
+                        newSelectedBookingChangeIncidentIds.push(incidentId);
+                        break;
+                    default:
+                        break;
+                }
+            }
+        });
+
+        this.setState({
+            selectedUnlockedIncidentIds: newSelectedUnlockedIncidentIds,
+            selectedUnscheduledIncidentIds: newSelectedUnscheduledIncidentIds,
+            selectedBookingChangeIncidentIds: newSelectedBookingChangeIncidentIds
+        });
+    };
+
     deleteSelectedFees = () => {
         const { dateRange, deleteIncidentsById } = this.props;
-
-        const unlockedIncidentIds = [];
-        const unscheduledIncidentIds = [];
-        const bookingChangeIncidentIds = [];
+        const { selectedUnlockedIncidentIds, selectedUnscheduledIncidentIds, selectedBookingChangeIncidentIds } = this.state;
 
         const incidentsToDelete = {
-            unlockedIncidentIds,
-            unscheduledIncidentIds,
-            bookingChangeIncidentIds
+            unlockedIncidentIds: selectedUnlockedIncidentIds,
+            unscheduledIncidentIds: selectedUnscheduledIncidentIds,
+            bookingChangeIncidentIds: selectedBookingChangeIncidentIds
         };
 
         deleteIncidentsById(dateRange, incidentsToDelete);
+        this.setState({
+            selectedUnlockedIncidentIds: [],
+            selectedUnscheduledIncidentIds: [],
+            selectedBookingChangeIncidentIds: []
+        });
     };
 
     render(){
@@ -43,6 +90,16 @@ class SingleIncidentsTable extends Component {
             hideMemberName,
             tableType
         } = this.props;
+
+        const {
+            selectedUnlockedIncidentIds,
+            selectedUnscheduledIncidentIds,
+            selectedBookingChangeIncidentIds
+        } = this.state;
+
+        const totalSelected = selectedUnlockedIncidentIds.length + selectedUnscheduledIncidentIds.length + selectedBookingChangeIncidentIds.length;
+        const numberOfSelectedText = totalSelected > 0 ? ` (${totalSelected})` : '';
+
         const incidents = this.props.incidents ? this.props.incidents : [];
         incidents.forEach(incident => {
             incident.id = `${incident.incidentType}-${incident.incidentId}`;
@@ -176,8 +233,9 @@ class SingleIncidentsTable extends Component {
                 <h4>{title}</h4>
                 <Loader active={loading} />
                 {
-                    <Button disabled={loading} onClick={this.deleteSelectedFees}>Delete</Button>
+                    <Button disabled={loading || totalSelected === 0} onClick={this.deleteSelectedFees}>{`Delete selected ${numberOfSelectedText}`}</Button>
                 }
+                <br/><br/>
                 {
                     !loading && incidents &&
                     <SelectTable
@@ -185,6 +243,7 @@ class SingleIncidentsTable extends Component {
                         multiSort={false}
                         columns={columns}
                         keyField="id"
+                        onSelectChange={this.onSelectChange}
                     />
                 }
             </div>

client/src/components/SelectTable/index.js

@@ -29,6 +29,7 @@ class SelectTable extends Component {
             selection.push(key);
         }
         // update the state
+        this.props.onSelectChange(selection);
         this.setState({ selection });
     };
 
@@ -50,6 +51,7 @@ class SelectTable extends Component {
                 selection.push(`select-${item._original[keyField]}`);
             });
         }
+        this.props.onSelectChange(selection);
         this.setState({ selectAll, selection });
     };