diff --git a/client/src/components/MemberIncidentsTables/components/SingleIncidentsTable.js b/client/src/components/MemberIncidentsTables/components/SingleIncidentsTable.js index c4c2221..b4f1cb6 100644 --- a/client/src/components/MemberIncidentsTables/components/SingleIncidentsTable.js +++ b/client/src/components/MemberIncidentsTables/components/SingleIncidentsTable.js @@ -2,6 +2,7 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; import { Loader, Button } from 'semantic-ui-react'; import 'react-table/react-table.css'; +import './style.css'; import { NavLink } from 'react-router-dom'; import SelectTable from "../../SelectTable"; @@ -12,7 +13,8 @@ import { incidentDescriptions, incidentLevelDescriptions, UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION, UNLOCKED_INCIDENT_STANDALONE, UNSCHEDULED_INCIDENT_AFTER_RESERVATION, - UNSCHEDULED_INCIDENT_BEFORE_RESERVATION, UNSCHEDULED_INCIDENT_STANDALONE + UNSCHEDULED_INCIDENT_BEFORE_RESERVATION, UNSCHEDULED_INCIDENT_STANDALONE, BOOKING_CANCELED_LATE, BOOKING_MOVED_TO_ANOTHER_DAY, + BOOKING_SHORTENED } from '../../../constants/enums'; import { doorLockRelatedWithReservationIncidentHeaders, standaloneDoorLockIncidentHeaders, bookingChangeIncidentHeaders } from '../../../constants/constants'; import { deleteIncidents } from "../../../store/actions"; @@ -21,7 +23,11 @@ class SingleIncidentsTable extends Component { state = { selectedUnlockedIncidentIds: [], selectedUnscheduledIncidentIds: [], - selectedBookingChangeIncidentIds: [] + selectedBookingChangeIncidentIds: [], + changedUnlockedIncidentIds: {}, + changedUnscheduledIncidentIds: {}, + changedBookingChangeIncidentIds: {}, + inputIdToFocus: null, }; onSelectChange = (selectedIncidents) => { @@ -94,12 +100,33 @@ class SingleIncidentsTable extends Component { const { selectedUnlockedIncidentIds, selectedUnscheduledIncidentIds, - selectedBookingChangeIncidentIds + selectedBookingChangeIncidentIds, + changedUnlockedIncidentIds, + changedUnscheduledIncidentIds, + changedBookingChangeIncidentIds, + inputIdToFocus } = this.state; + const changedIncidentsProxy = { + [UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION]: changedUnlockedIncidentIds, + [UNLOCKED_INCIDENT_STANDALONE]: changedUnlockedIncidentIds, + [UNSCHEDULED_INCIDENT_BEFORE_RESERVATION]: changedUnscheduledIncidentIds, + [UNSCHEDULED_INCIDENT_AFTER_RESERVATION]: changedUnscheduledIncidentIds, + [UNSCHEDULED_INCIDENT_STANDALONE]: changedUnscheduledIncidentIds, + [BOOKING_SHORTENED]: changedBookingChangeIncidentIds, + [BOOKING_MOVED_TO_ANOTHER_DAY]: changedBookingChangeIncidentIds, + [BOOKING_CANCELED_LATE]: changedBookingChangeIncidentIds + }; + const totalSelected = selectedUnlockedIncidentIds.length + selectedUnscheduledIncidentIds.length + selectedBookingChangeIncidentIds.length; const numberOfSelectedText = totalSelected > 0 ? ` (${totalSelected})` : ''; + const totalChanged = + Object.keys(changedUnlockedIncidentIds).length + + Object.keys(changedUnscheduledIncidentIds).length + + Object.keys(changedBookingChangeIncidentIds).length; + const numberOfChangedText = totalChanged > 0 ? ` (${totalChanged})` : ''; + const incidents = this.props.incidents ? this.props.incidents : []; incidents.forEach(incident => { incident.id = `${incident.incidentType}-${incident.incidentId}`; @@ -122,6 +149,44 @@ class SingleIncidentsTable extends Component { break; } + const priceChangeHandler = (element) => { + if (element && element.target){ + const {value: newValue, id: incidentDescriptionID} = element.target; + const newValueFloat = parseFloat(newValue); + const incidentData = incidentDescriptionID.split('-'); + const incidentType = parseInt(incidentData[0]) || null; + const incidentID = parseInt(incidentData[1]) || null; + + if ((newValueFloat || (newValueFloat === 0)) && incidentType && incidentID){ + const changedUnlockedIncidentIdsCopy = Object.assign({}, changedUnlockedIncidentIds); + const changedUnscheduledIncidentIdsCopy = Object.assign({}, changedUnscheduledIncidentIds); + const changedBookingChangeIncidentIdsCopy = Object.assign({}, changedBookingChangeIncidentIds); + + switch (incidentType) { + case UNLOCKED_INCIDENT_RELATED_WITH_RESERVATION: + case UNLOCKED_INCIDENT_STANDALONE: + changedUnlockedIncidentIdsCopy[incidentID] = newValueFloat; + this.setState({changedUnlockedIncidentIds: changedUnlockedIncidentIdsCopy, inputIdToFocus: incidentDescriptionID}); + break; + + case UNSCHEDULED_INCIDENT_BEFORE_RESERVATION: + case UNSCHEDULED_INCIDENT_AFTER_RESERVATION: + case UNSCHEDULED_INCIDENT_STANDALONE: + changedUnscheduledIncidentIdsCopy[incidentID] = newValueFloat; + this.setState({changedUnscheduledIncidentIds: changedUnscheduledIncidentIdsCopy, inputIdToFocus: incidentDescriptionID}); + break; + + case BOOKING_MOVED_TO_ANOTHER_DAY: + case BOOKING_SHORTENED: + case BOOKING_CANCELED_LATE: + changedBookingChangeIncidentIdsCopy[incidentID] = newValueFloat; + this.setState({changedBookingChangeIncidentIds: changedBookingChangeIncidentIdsCopy, inputIdToFocus: incidentDescriptionID}); + break; + } + } + } + }; + tableHeaders.forEach((header) => { const columnTitle = incidentsReportHeaderTitles[header]; @@ -143,6 +208,10 @@ class SingleIncidentsTable extends Component { Cell: props => { let cellValue = ''; let urlValue = undefined; + let clickablePrice = undefined; + let priceAsNumber = undefined; + let priceInputID = undefined; + let priceFontColor = 'black'; switch (props.column.id) { case 'memberName': @@ -198,8 +267,18 @@ class SingleIncidentsTable extends Component { } break; case 'totalChargeFee': - const totalFee = (props.row['_original'].incidentPrice || props.value) || 0; + clickablePrice = true; + let totalFee = 0; + const changedFee = changedIncidentsProxy[props.row['_original'].incidentType][props.row['_original'].incidentId]; + if (changedFee || (changedFee === 0)){ + totalFee = changedFee; + priceFontColor = 'red'; + }else{ + totalFee = (props.row['_original'].incidentPrice || props.value) || 0; + } const totalFeeFormatted = parseFloat(totalFee).toFixed(2); + priceAsNumber = totalFee; + priceInputID = `${props.row['_original'].incidentType || ''}-${props.row['_original'].incidentId || ''}`; cellValue = `$ ${totalFeeFormatted}`; columnContentsAlignment = columnAlignments.right; break; @@ -217,10 +296,22 @@ class SingleIncidentsTable extends Component { cellValue = props.value; } - if (openMemberSummaryOnMemberClick && urlValue){ - return {cellValue} + if (clickablePrice){ + return

$ +

}else{ - return
{cellValue}
+ if (openMemberSummaryOnMemberClick && urlValue){ + return {cellValue} + }else{ + return
{cellValue}
+ } } } }); @@ -235,6 +326,9 @@ class SingleIncidentsTable extends Component { { } + { + + }

{ !loading && incidents && diff --git a/client/src/components/MemberIncidentsTables/components/style.css b/client/src/components/MemberIncidentsTables/components/style.css new file mode 100644 index 0000000..4ee6e76 --- /dev/null +++ b/client/src/components/MemberIncidentsTables/components/style.css @@ -0,0 +1,5 @@ +::placeholder{ + color: black; + opacity: 1; +} +