Fixed column names and the report

2019-07-07 07:02:42 +02:00
parent 2fcb10522c
commit 1e1c61882f
16 changed files with 455 additions and 115 deletions
--- a/client/src/components/MemberIncidentsTables/components/SingleIncidentsTable.js
+++ b/client/src/components/MemberIncidentsTables/components/SingleIncidentsTable.js
@@ -0,0 +1,119 @@
+import React from 'react';
+import { Loader } from 'semantic-ui-react';
+import ReactTable from 'react-table';
+import 'react-table/react-table.css';
+import { NavLink } from 'react-router-dom';
+
+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';
+
+
+const SingleIncidentsTable = props => {
+    const { loading, title, openMemberSummaryOnMemberClick, showBookingTimes, showDoorLockEntryTimes, hideMemberName } = props;
+    const incidents = props.incidents ? props.incidents : [];
+
+    const columns = [];
+    if (incidents && incidents.length > 0){
+        const incidentHeaders = Object.keys(incidentsReportHeaderTitles);
+
+        incidentHeaders.forEach((header) => {
+            const columnTitle = incidentsReportHeaderTitles[header];
+
+            let showColumn = true;
+            if ((header === 'bookingStart' || header === 'bookingEnd') && !showBookingTimes){
+                showColumn = false;
+            }
+            if ((header === 'unlockTimestamp' || header === 'lockTimestamp') && !showDoorLockEntryTimes){
+                showColumn = false;
+            }
+            if (header === 'memberName' && hideMemberName){
+                showColumn = false;
+            }
+
+            if (columnTitle && showColumn){
+                const columnAlignments = {
+                    left: 'left',
+                    right: 'right',
+                };
+                let columnContentsAlignment = columnAlignments.left;
+
+                columns.push({
+                    Header: incidentsReportHeaderTitles[header],
+                    accessor: header,
+                    Cell: props => {
+                        let cellValue = '';
+                        let urlValue = undefined;
+
+                        switch (props.column.id) {
+                            case 'memberName':
+                                const memberId = props.row['_original'].memberId;
+                                urlValue = `/practice-summary-report/${memberId}`;
+                                cellValue = props.value;
+                                break;
+                            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_RELATED_WITH_RESERVATION:
+                                    case UNLOCKED_INCIDENT_STANDALONE:
+                                        cellValue = `${incidentLevelDescriptions[incidentLevel]}`;
+                                        break;
+                                    case UNSCHEDULED_INCIDENT_BEFORE_RESERVATION:
+                                    case UNSCHEDULED_INCIDENT_AFTER_RESERVATION:
+                                    case UNSCHEDULED_INCIDENT_STANDALONE:
+                                        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;
+                        }
+
+                        if (openMemberSummaryOnMemberClick && urlValue){
+                            return <NavLink to={urlValue}>{cellValue}</NavLink>
+                        }else{
+                            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 SingleIncidentsTable;
--- a/client/src/components/MemberIncidentsTables/index.js
+++ b/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
+        />
+    );
+}