add and implement action to send "delete fees" request
This commit is contained in:
Bilal Catic
@@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Loader } from 'semantic-ui-react';
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Loader, Button } from 'semantic-ui-react';
|
||||
import ReactTable from 'react-table';
|
||||
import 'react-table/react-table.css';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
@@ -13,155 +14,180 @@ import {
|
||||
UNSCHEDULED_INCIDENT_BEFORE_RESERVATION, UNSCHEDULED_INCIDENT_STANDALONE
|
||||
} from '../../../constants/enums';
|
||||
import { doorLockRelatedWithReservationIncidentHeaders, standaloneDoorLockIncidentHeaders, bookingChangeIncidentHeaders } from '../../../constants/constants';
|
||||
import { deleteIncidents } from "../../../store/actions";
|
||||
|
||||
class SingleIncidentsTable extends Component {
|
||||
deleteSelectedFees = () => {
|
||||
const { dateRange, deleteIncidentsById } = this.props;
|
||||
|
||||
const SingleIncidentsTable = props => {
|
||||
const {
|
||||
loading,
|
||||
title,
|
||||
openMemberSummaryOnMemberClick,
|
||||
hideMemberName,
|
||||
tableType
|
||||
} = props;
|
||||
const incidents = props.incidents ? props.incidents : [];
|
||||
const columns = [];
|
||||
const unlockedIncidentIds = [];
|
||||
const unscheduledIncidentIds = [];
|
||||
const bookingChangeIncidentIds = [];
|
||||
|
||||
if (incidents && incidents.length > 0){
|
||||
let tableHeaders;
|
||||
switch (tableType) {
|
||||
case incidentTableTypes.INCIDENTS_RELATED_TO_RESERVATIONS:
|
||||
tableHeaders = doorLockRelatedWithReservationIncidentHeaders;
|
||||
break;
|
||||
case incidentTableTypes.STANDALONE_INCIDENTS:
|
||||
tableHeaders = standaloneDoorLockIncidentHeaders;
|
||||
break;
|
||||
case incidentTableTypes.BOOKING_CHANGE_INCIDENTS:
|
||||
tableHeaders = bookingChangeIncidentHeaders;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
const incidentsToDelete = {
|
||||
unlockedIncidentIds,
|
||||
unscheduledIncidentIds,
|
||||
bookingChangeIncidentIds
|
||||
};
|
||||
|
||||
deleteIncidentsById(dateRange, incidentsToDelete);
|
||||
};
|
||||
|
||||
render(){
|
||||
const {
|
||||
loading,
|
||||
title,
|
||||
openMemberSummaryOnMemberClick,
|
||||
hideMemberName,
|
||||
tableType
|
||||
} = this.props;
|
||||
const incidents = this.props.incidents ? this.props.incidents : [];
|
||||
const columns = [];
|
||||
|
||||
if (incidents && incidents.length > 0){
|
||||
let tableHeaders;
|
||||
switch (tableType) {
|
||||
case incidentTableTypes.INCIDENTS_RELATED_TO_RESERVATIONS:
|
||||
tableHeaders = doorLockRelatedWithReservationIncidentHeaders;
|
||||
break;
|
||||
case incidentTableTypes.STANDALONE_INCIDENTS:
|
||||
tableHeaders = standaloneDoorLockIncidentHeaders;
|
||||
break;
|
||||
case incidentTableTypes.BOOKING_CHANGE_INCIDENTS:
|
||||
tableHeaders = bookingChangeIncidentHeaders;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
tableHeaders.forEach((header) => {
|
||||
const columnTitle = incidentsReportHeaderTitles[header];
|
||||
|
||||
let showColumn = true;
|
||||
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 = `/specific-member-incidents-report/${memberId}`;
|
||||
cellValue = props.value;
|
||||
break;
|
||||
case 'resourceName':
|
||||
if (props.row['_original'].resourceName){
|
||||
cellValue = props.row['_original'].resourceName || '---';
|
||||
}else{
|
||||
const oldResourceName = props.row['_original'].oldResourceName || '---';
|
||||
const newResourceName = props.row['_original'].newResourceName || '---';
|
||||
if (oldResourceName !== newResourceName){
|
||||
cellValue = `${oldResourceName}\n${newResourceName}`;
|
||||
}else{
|
||||
cellValue = oldResourceName;
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'reservation':
|
||||
const bookingStart = props.row['_original'].bookingStart;
|
||||
const bookingEnd = props.row['_original'].bookingEnd;
|
||||
cellValue = `${bookingStart}\n${bookingEnd}`;
|
||||
break;
|
||||
case 'doorLockTimestamps':
|
||||
const unlockTimestamp = props.row['_original'].unlockTimestamp;
|
||||
const lockTimestamp = props.row['_original'].lockTimestamp;
|
||||
cellValue = `${unlockTimestamp ? unlockTimestamp : '---'}\n${lockTimestamp ? lockTimestamp : '---'}`;
|
||||
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.row['_original'].incidentPrice || props.value) || 0;
|
||||
const totalFeeFormatted = parseFloat(totalFee).toFixed(2);
|
||||
cellValue = `$ ${totalFeeFormatted}`;
|
||||
columnContentsAlignment = columnAlignments.right;
|
||||
break;
|
||||
case 'oldReservation':
|
||||
const oldBookingStart = props.row['_original'].oldBookingStart;
|
||||
const oldBookingEnd = props.row['_original'].oldBookingEnd;
|
||||
cellValue = `${oldBookingStart}\n${oldBookingEnd}`;
|
||||
break;
|
||||
case 'newReservation':
|
||||
const newBookingStart = props.row['_original'].newBookingStart || '---';
|
||||
const newBookingEnd = props.row['_original'].newBookingEnd || '---';
|
||||
cellValue = `${newBookingStart}\n${newBookingEnd}`;
|
||||
break;
|
||||
default:
|
||||
cellValue = props.value;
|
||||
}
|
||||
|
||||
if (openMemberSummaryOnMemberClick && urlValue){
|
||||
return <NavLink to={urlValue}>{cellValue}</NavLink>
|
||||
}else{
|
||||
return <div style={{ textAlign: columnContentsAlignment, whiteSpace: 'pre' }}>{cellValue}</div>
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
tableHeaders.forEach((header) => {
|
||||
const columnTitle = incidentsReportHeaderTitles[header];
|
||||
|
||||
let showColumn = true;
|
||||
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 = `/specific-member-incidents-report/${memberId}`;
|
||||
cellValue = props.value;
|
||||
break;
|
||||
case 'resourceName':
|
||||
if (props.row['_original'].resourceName){
|
||||
cellValue = props.row['_original'].resourceName || '---';
|
||||
}else{
|
||||
const oldResourceName = props.row['_original'].oldResourceName || '---';
|
||||
const newResourceName = props.row['_original'].newResourceName || '---';
|
||||
if (oldResourceName !== newResourceName){
|
||||
cellValue = `${oldResourceName}\n${newResourceName}`;
|
||||
}else{
|
||||
cellValue = oldResourceName;
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'reservation':
|
||||
const bookingStart = props.row['_original'].bookingStart;
|
||||
const bookingEnd = props.row['_original'].bookingEnd;
|
||||
cellValue = `${bookingStart}\n${bookingEnd}`;
|
||||
break;
|
||||
case 'doorLockTimestamps':
|
||||
const unlockTimestamp = props.row['_original'].unlockTimestamp;
|
||||
const lockTimestamp = props.row['_original'].lockTimestamp;
|
||||
cellValue = `${unlockTimestamp ? unlockTimestamp : '---'}\n${lockTimestamp ? lockTimestamp : '---'}`;
|
||||
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.row['_original'].incidentPrice || props.value) || 0;
|
||||
const totalFeeFormatted = parseFloat(totalFee).toFixed(2);
|
||||
cellValue = `$ ${totalFeeFormatted}`;
|
||||
columnContentsAlignment = columnAlignments.right;
|
||||
break;
|
||||
case 'oldReservation':
|
||||
const oldBookingStart = props.row['_original'].oldBookingStart;
|
||||
const oldBookingEnd = props.row['_original'].oldBookingEnd;
|
||||
cellValue = `${oldBookingStart}\n${oldBookingEnd}`;
|
||||
break;
|
||||
case 'newReservation':
|
||||
const newBookingStart = props.row['_original'].newBookingStart || '---';
|
||||
const newBookingEnd = props.row['_original'].newBookingEnd || '---';
|
||||
cellValue = `${newBookingStart}\n${newBookingEnd}`;
|
||||
break;
|
||||
default:
|
||||
cellValue = props.value;
|
||||
}
|
||||
|
||||
if (openMemberSummaryOnMemberClick && urlValue){
|
||||
return <NavLink to={urlValue}>{cellValue}</NavLink>
|
||||
}else{
|
||||
return <div style={{ textAlign: columnContentsAlignment, whiteSpace: 'pre' }}>{cellValue}</div>
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
return (
|
||||
<div>
|
||||
<h4>{title}</h4>
|
||||
<Loader active={loading} />
|
||||
{
|
||||
<Button disabled={loading} onClick={this.deleteSelectedFees}>Delete</Button>
|
||||
}
|
||||
{
|
||||
!loading && incidents &&
|
||||
<ReactTable
|
||||
data={incidents}
|
||||
multiSort={false}
|
||||
columns={columns}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h4>{title}</h4>
|
||||
<Loader active={loading} />
|
||||
{
|
||||
!loading && incidents &&
|
||||
<ReactTable
|
||||
data={incidents}
|
||||
multiSort={false}
|
||||
columns={columns}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
deleteIncidentsById: (dateRange, incidentsToDelete) => deleteIncidents(dispatch, {dateRange, incidentsToDelete})
|
||||
});
|
||||
|
||||
export default SingleIncidentsTable;
|
||||
export default connect(null, mapDispatchToProps)(SingleIncidentsTable);
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
} from '../../constants/enums';
|
||||
|
||||
export default function MemberIncidentsTables (props) {
|
||||
const { pendingIncidents, incidents, hideMemberName } = props;
|
||||
const { pendingIncidents, incidents, hideMemberName, dateRange } = props;
|
||||
|
||||
const incidentsRelatedToReservations = [];
|
||||
const standaloneIncidents = [];
|
||||
@@ -46,6 +46,7 @@ export default function MemberIncidentsTables (props) {
|
||||
openMemberSummaryOnMemberClick
|
||||
hideMemberName={hideMemberName}
|
||||
tableType={incidentTableTypes.INCIDENTS_RELATED_TO_RESERVATIONS}
|
||||
dateRange={dateRange}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -56,6 +57,7 @@ export default function MemberIncidentsTables (props) {
|
||||
openMemberSummaryOnMemberClick
|
||||
hideMemberName={hideMemberName}
|
||||
tableType={incidentTableTypes.STANDALONE_INCIDENTS}
|
||||
dateRange={dateRange}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -66,6 +68,7 @@ export default function MemberIncidentsTables (props) {
|
||||
openMemberSummaryOnMemberClick
|
||||
hideMemberName={hideMemberName}
|
||||
tableType={incidentTableTypes.BOOKING_CHANGE_INCIDENTS}
|
||||
dateRange={dateRange}
|
||||
/>
|
||||
);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user