From e3eee4139b5c33174cf9b762d0930768873d39b6 Mon Sep 17 00:00:00 2001 From: Bilal Catic Date: Sun, 7 Jul 2019 02:44:34 +0200 Subject: [PATCH] modify UI to display incidents separately --- .../components/MemberIncidentsTable/index.js | 29 ++++---- client/src/constants/enums.js | 15 ++-- client/src/constants/menuItems.js | 2 + client/src/scenes/IncidentsReport/index.js | 72 ++++++++++++++++++- .../components/MemberSummary.js | 6 +- 5 files changed, 102 insertions(+), 22 deletions(-) diff --git a/client/src/components/MemberIncidentsTable/index.js b/client/src/components/MemberIncidentsTable/index.js index 6f79f59..01dac02 100644 --- a/client/src/components/MemberIncidentsTable/index.js +++ b/client/src/components/MemberIncidentsTable/index.js @@ -8,13 +8,13 @@ import {incidentsReportHeaderTitles} from '../../constants/menuItems'; import { incidentDescriptions, incidentLevelDescriptions, - UNLOCKED_INCIDENT, - UNSCHEDULED_INCIDENT + UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION, UNLOCKED_INCIDENT_STANDALONE, UNSCHEDULED_INCIDENT_AFTER_RESERVATION, + UNSCHEDULED_INCIDENT_BEFORE_RESERVATION, UNSCHEDULED_INCIDENT_STANDALONE } from '../../constants/enums'; const MemberIncidentsTable = props => { - const { loading, title, openMemberSummaryOnMemberClick } = props; + const { loading, title, openMemberSummaryOnMemberClick, showBookingTimes, showDoorLockEntryTimes } = props; const incidents = props.incidents ? props.incidents : []; const columns = []; @@ -24,7 +24,15 @@ const MemberIncidentsTable = props => { incidentHeaders.forEach((header) => { const columnTitle = incidentsReportHeaderTitles[header]; - if (columnTitle){ + let showColumn = true; + if ((header === 'bookingStart' || header === 'bookingEnd') && !showBookingTimes){ + showColumn = false; + } + if ((header === 'unlockTimestamp' || header === 'lockTimestamp') && !showDoorLockEntryTimes){ + showColumn = false; + } + + if (columnTitle && showColumn){ const columnAlignments = { left: 'left', right: 'right', @@ -54,10 +62,13 @@ const MemberIncidentsTable = props => { const { incidentType, incidentLevel, timeIntervalsToCharge } = props.row['_original']; switch (incidentType) { - case UNLOCKED_INCIDENT: + case UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION: + case UNLOCKED_INCIDENT_STANDALONE: cellValue = `${incidentLevelDescriptions[incidentLevel]}`; break; - case UNSCHEDULED_INCIDENT: + case UNSCHEDULED_INCIDENT_BEFORE_RESERVATION: + case UNSCHEDULED_INCIDENT_AFTER_RESERVATION: + case UNSCHEDULED_INCIDENT_STANDALONE: cellValue = `${timeIntervalsToCharge} x 5 min`; break; default: @@ -80,12 +91,6 @@ const MemberIncidentsTable = props => { }else{ return
{cellValue}
} - - // return - //
{cellValue}
- // - - // return
{cellValue}
} }); } diff --git a/client/src/constants/enums.js b/client/src/constants/enums.js index a6da2d0..2a3f642 100644 --- a/client/src/constants/enums.js +++ b/client/src/constants/enums.js @@ -1,10 +1,16 @@ -export const UNLOCKED_INCIDENT = 2; -export const UNSCHEDULED_INCIDENT = 3; +export const UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION = 2; +export const UNSCHEDULED_INCIDENT_BEFORE_RESERVATION = 3; +export const UNSCHEDULED_INCIDENT_AFTER_RESERVATION = 4; +export const UNLOCKED_INCIDENT_STANDALONE = 5; +export const UNSCHEDULED_INCIDENT_STANDALONE = 6; export const incidentDescriptions = {}; -incidentDescriptions[UNLOCKED_INCIDENT] = 'User left door unlocked'; -incidentDescriptions[UNSCHEDULED_INCIDENT] = 'Unscheduled use'; +incidentDescriptions[UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION] = 'User left door unlocked'; +incidentDescriptions[UNSCHEDULED_INCIDENT_BEFORE_RESERVATION] = 'Unscheduled use - before'; +incidentDescriptions[UNSCHEDULED_INCIDENT_AFTER_RESERVATION] = 'Unscheduled use - after'; +incidentDescriptions[UNLOCKED_INCIDENT_STANDALONE] = 'User left door unlocked'; +incidentDescriptions[UNSCHEDULED_INCIDENT_STANDALONE] = 'Unscheduled use'; export const incidentLevelDescriptions = { UNLOCKED_0: 'First month', @@ -13,5 +19,4 @@ export const incidentLevelDescriptions = { UNLOCKED_3: 'Fourth month', UNLOCKED_4: 'Fifth month', UNLOCKED_5: 'Sixth month', - }; diff --git a/client/src/constants/menuItems.js b/client/src/constants/menuItems.js index 07b6c96..8a83cfc 100644 --- a/client/src/constants/menuItems.js +++ b/client/src/constants/menuItems.js @@ -45,6 +45,8 @@ export const incidentsReportHeaderTitles = { resourceName: 'Room', bookingStart: 'Reservation Start', bookingEnd: 'Reservation End', + unlockTimestamp: 'Unlock Time', + lockTimestamp: 'Lock Time', memberName: 'Member Name', incidentType: 'Incident Type', feeDescription: 'Fee description', diff --git a/client/src/scenes/IncidentsReport/index.js b/client/src/scenes/IncidentsReport/index.js index fa464ac..8194ee7 100644 --- a/client/src/scenes/IncidentsReport/index.js +++ b/client/src/scenes/IncidentsReport/index.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; -import { Container } from 'semantic-ui-react'; +import { Container, Accordion, Label } from 'semantic-ui-react'; import MainMenu from '../../components/MainMenu'; import DateRangePicker from '../../components/DateRangePicker'; @@ -8,6 +8,13 @@ import MemberIncidentsTable from '../../components/MemberIncidentsTable'; 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; @@ -17,6 +24,62 @@ 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 = ( + + ); + + const standaloneIncidentsTable = ( + + ); + + const accordionPanels = [ + { + key: 'related-door-lock-incidents', + title : { content: