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 SingleIncidentsTable = props => {
-    const { loading, title, openMemberSummaryOnMemberClick, showBookingTimes, showDoorLockEntryTimes } = 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
+        />
+    );
+}

client/src/scenes/IncidentsReport/index.js

@@ -1,20 +1,13 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { Container, Accordion, Label } from 'semantic-ui-react';
+import { Container } from 'semantic-ui-react';
 
 import MainMenu from '../../components/MainMenu';
 import DateRangePicker from '../../components/DateRangePicker';
-import MemberIncidentsTable from '../../components/MemberIncidentsTable';
+import MemberIncidentsTables from '../../components/MemberIncidentsTables';
 
 import { fetchIncidents } from '../../store/actions';
 
-import {
-    UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION,
-    UNLOCKED_INCIDENT_STANDALONE, UNSCHEDULED_INCIDENT_AFTER_RESERVATION,
-    UNSCHEDULED_INCIDENT_BEFORE_RESERVATION,
-    UNSCHEDULED_INCIDENT_STANDALONE
-} from '../../constants/enums';
-
 class IncidentsReport extends Component {
     onDatesUpdate(dateRange) {
         const { fetchIncidents } = this.props;
@@ -24,62 +17,6 @@ class IncidentsReport extends Component {
     render () {
         const { pendingIncidents, incidents } = this.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 = (
-            <MemberIncidentsTable
-                loading={pendingIncidents}
-                incidents={incidentsRelatedToReservations}
-                openMemberSummaryOnMemberClick
-                showBookingTimes
-            />
-        );
-
-        const standaloneIncidentsTable = (
-            <MemberIncidentsTable
-                loading={pendingIncidents}
-                incidents={standaloneIncidents}
-                openMemberSummaryOnMemberClick
-                showDoorLockEntryTimes
-            />
-        );
-
-        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 (
             <Container>
                 <MainMenu/>
@@ -87,12 +24,7 @@ class IncidentsReport extends Component {
                 <hr/>
                 <DateRangePicker buttonLabel="Show report" onDatesUpdate={this.onDatesUpdate.bind(this)} />
                 <br/>
-                <Accordion
+                <MemberIncidentsTables pendingIncidents={pendingIncidents} incidents={incidents} />
-                    panels={accordionPanels}
-                    exclusive={false}
-                    defaultActiveIndex={[0]}
-                    fluid
-                />
             </Container>
         );
     }

client/src/scenes/PracticeSummaryReport/index.js

@@ -6,7 +6,7 @@ import MainMenu from '../../components/MainMenu';
 import DateRangePicker from '../../components/DateRangePicker';
 import MemberSelector from './components/MemberSelector';
 import MemberSummary from './components/MemberSummary';
-import MemberIncidentsTable from '../../components/MemberIncidentsTable';
+import MemberIncidentsTables from '../../components/MemberIncidentsTables';
 
 import { fetchMemberIncidents } from '../../store/actions';
 
@@ -67,11 +67,7 @@ class PracticeSummaryReport extends Component {
                     <Grid.Row/>
                     <Grid.Row>
                         <Grid.Column>
-                            <MemberIncidentsTable
+                            <MemberIncidentsTables incidents={memberIncidents} pendingIncidents={loading} hideMemberName/>
-                                title="Detail list"
-                                incidents={memberIncidents}
-                                loading={loading}
-                            />
                         </Grid.Column>
                     </Grid.Row>
                 </Grid>