improve UI, refactor

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

@@ -4,17 +4,17 @@ import ReactTable from 'react-table';
 import 'react-table/react-table.css';
 import { NavLink } from 'react-router-dom';
 
-import {incidentsReportHeaderTitles} from '../../constants/menuItems';
+import {incidentsReportHeaderTitles} from '../../../constants/menuItems';
 import {
     incidentDescriptions,
     incidentLevelDescriptions,
     UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION, UNLOCKED_INCIDENT_STANDALONE, UNSCHEDULED_INCIDENT_AFTER_RESERVATION,
     UNSCHEDULED_INCIDENT_BEFORE_RESERVATION, UNSCHEDULED_INCIDENT_STANDALONE
-} from '../../constants/enums';
+} from '../../../constants/enums';
 
 
-const MemberIncidentsTable = props => {
-    const { loading, title, openMemberSummaryOnMemberClick, showBookingTimes, showDoorLockEntryTimes } = props;
+const SingleIncidentsTable = props => {
+    const { loading, title, openMemberSummaryOnMemberClick, showBookingTimes, showDoorLockEntryTimes, hideMemberName } = props;
     const incidents = props.incidents ? props.incidents : [];
 
     const columns = [];
@@ -31,6 +31,9 @@ const MemberIncidentsTable = props => {
             if ((header === 'unlockTimestamp' || header === 'lockTimestamp') && !showDoorLockEntryTimes){
                 showColumn = false;
             }
+            if (header === 'memberName' && hideMemberName){
+                showColumn = false;
+            }
 
             if (columnTitle && showColumn){
                 const columnAlignments = {
@@ -113,4 +116,4 @@ const MemberIncidentsTable = props => {
     );
 };
 
-export default MemberIncidentsTable;
+export default SingleIncidentsTable;

client/src/components/MemberIncidentsTables/index.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import {Accordion, Label} from 'semantic-ui-react';
+import SingleIncidentsTable from './components/SingleIncidentsTable';
+import {
+    UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION, UNLOCKED_INCIDENT_STANDALONE, UNSCHEDULED_INCIDENT_AFTER_RESERVATION,
+    UNSCHEDULED_INCIDENT_BEFORE_RESERVATION, UNSCHEDULED_INCIDENT_STANDALONE
+} from '../../constants/enums';
+
+export default function MemberIncidentsTables (props) {
+    const { pendingIncidents, incidents, hideMemberName } = props;
+
+    const incidentsRelatedToReservations = [];
+    const standaloneIncidents = [];
+
+    if (Array.isArray(incidents)){
+        incidents.forEach((incident) => {
+            if (incident && incident.incidentType){
+                switch (incident.incidentType) {
+                    case UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION:
+                    case UNSCHEDULED_INCIDENT_BEFORE_RESERVATION:
+                    case UNSCHEDULED_INCIDENT_AFTER_RESERVATION:
+                        incidentsRelatedToReservations.push(incident);
+                        break;
+                    case UNLOCKED_INCIDENT_STANDALONE:
+                    case UNSCHEDULED_INCIDENT_STANDALONE:
+                        standaloneIncidents.push(incident);
+                        break;
+                }
+            }
+        });
+    }
+
+    const incidentsRelatedToReservationsTable = (
+        <SingleIncidentsTable
+            loading={pendingIncidents}
+            incidents={incidentsRelatedToReservations}
+            openMemberSummaryOnMemberClick
+            showBookingTimes
+            hideMemberName={hideMemberName}
+        />
+    );
+
+    const standaloneIncidentsTable = (
+        <SingleIncidentsTable
+            loading={pendingIncidents}
+            incidents={standaloneIncidents}
+            openMemberSummaryOnMemberClick
+            showDoorLockEntryTimes
+            hideMemberName={hideMemberName}
+        />
+    );
+
+    const accordionPanels = [
+        {
+            key: 'related-door-lock-incidents',
+            title : { content: <Label color='blue' content={'Door Lock Charges - Related to reservations'} /> },
+            content: { content : incidentsRelatedToReservationsTable },
+        },
+        {
+            key: 'standalone-door-lock-incidents',
+            title : { content: <Label color='blue' content={'Door Lock Charges - Standalone'} /> },
+            content: { content: standaloneIncidentsTable },
+        },
+        {
+            key: 'reservation-modification-incidents',
+            title: {content: <Label color='blue' content={'Cancellation charges'}/>},
+        }
+    ];
+
+    return (
+        <Accordion
+            panels={accordionPanels}
+            exclusive={false}
+            defaultActiveIndex={[0]}
+            fluid
+        />
+    );
+}