Bump period to 7 minutes / silent feature

This commit is contained in:
Senad Uka
2019-11-26 14:00:18 +01:00
parent fe1f691b2f
commit 43c4214a23
20 changed files with 592 additions and 181 deletions

View File

@@ -1,9 +1,11 @@
import React from 'react';
import { Loader } from 'semantic-ui-react';
import ReactTable from 'react-table';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Loader, Button } from 'semantic-ui-react';
import 'react-table/react-table.css';
import { NavLink } from 'react-router-dom';
import SelectTable from "../../SelectTable";
import {incidentsReportHeaderTitles} from '../../../constants/constants';
import {
incidentTableTypes,
@@ -13,155 +15,244 @@ 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 {
state = {
selectedUnlockedIncidentIds: [],
selectedUnscheduledIncidentIds: [],
selectedBookingChangeIncidentIds: []
};
const SingleIncidentsTable = props => {
const {
loading,
title,
openMemberSummaryOnMemberClick,
hideMemberName,
tableType
} = props;
const incidents = props.incidents ? props.incidents : [];
const columns = [];
onSelectChange = (selectedIncidents) => {
const newSelectedUnlockedIncidentIds = [];
const newSelectedUnscheduledIncidentIds = [];
const newSelectedBookingChangeIncidentIds = [];
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;
}
selectedIncidents.forEach(incident => {
const incidentDetails = incident.split('-');
// incident is described as : select-incidentType-incidentId
if (Array.isArray(incidentDetails) && incidentDetails.length > 2){
const incidentType = parseInt(incidentDetails[1]);
const incidentId = parseInt(incidentDetails[2]);
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>
}
}
});
switch (incidentType) {
case 2:
case 5:
newSelectedUnlockedIncidentIds.push(incidentId);
break;
case 3:
case 4:
case 6:
newSelectedUnscheduledIncidentIds.push(incidentId);
break;
case 7:
case 8:
case 9:
newSelectedBookingChangeIncidentIds.push(incidentId);
break;
default:
break;
}
}
});
}
return (
<div>
<h4>{title}</h4>
<Loader active={loading} />
{
!loading && incidents &&
<ReactTable
data={incidents}
multiSort={false}
columns={columns}
/>
this.setState({
selectedUnlockedIncidentIds: newSelectedUnlockedIncidentIds,
selectedUnscheduledIncidentIds: newSelectedUnscheduledIncidentIds,
selectedBookingChangeIncidentIds: newSelectedBookingChangeIncidentIds
});
};
deleteSelectedFees = () => {
const { dateRange, deleteIncidentsById, memberId } = this.props;
const { selectedUnlockedIncidentIds, selectedUnscheduledIncidentIds, selectedBookingChangeIncidentIds } = this.state;
const incidentsToDelete = {
unlockedIncidentIds: selectedUnlockedIncidentIds,
unscheduledIncidentIds: selectedUnscheduledIncidentIds,
bookingChangeIncidentIds: selectedBookingChangeIncidentIds
};
deleteIncidentsById(dateRange, incidentsToDelete, memberId);
this.setState({
selectedUnlockedIncidentIds: [],
selectedUnscheduledIncidentIds: [],
selectedBookingChangeIncidentIds: []
});
};
render(){
const {
loading,
title,
openMemberSummaryOnMemberClick,
hideMemberName,
tableType
} = this.props;
const {
selectedUnlockedIncidentIds,
selectedUnscheduledIncidentIds,
selectedBookingChangeIncidentIds
} = this.state;
const totalSelected = selectedUnlockedIncidentIds.length + selectedUnscheduledIncidentIds.length + selectedBookingChangeIncidentIds.length;
const numberOfSelectedText = totalSelected > 0 ? ` (${totalSelected})` : '';
const incidents = this.props.incidents ? this.props.incidents : [];
incidents.forEach(incident => {
incident.id = `${incident.incidentType}-${incident.incidentId}`;
});
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;
}
</div>
);
};
export default SingleIncidentsTable;
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 || totalSelected === 0} onClick={this.deleteSelectedFees}>{`Delete selected ${numberOfSelectedText}`}</Button>
}
<br/><br/>
{
!loading && incidents &&
<SelectTable
data={incidents}
multiSort={false}
columns={columns}
keyField="id"
onSelectChange={this.onSelectChange}
/>
}
</div>
);
}
}
const mapDispatchToProps = (dispatch) => ({
deleteIncidentsById: (dateRange, incidentsToDelete, memberId) => deleteIncidents(dispatch, {dateRange, incidentsToDelete, memberId})
});
export default connect(null, mapDispatchToProps)(SingleIncidentsTable);

View File

@@ -8,7 +8,7 @@ import {
} from '../../constants/enums';
export default function MemberIncidentsTables (props) {
const { pendingIncidents, incidents, hideMemberName } = props;
const { pendingIncidents, incidents, hideMemberName, dateRange, memberId } = props;
const incidentsRelatedToReservations = [];
const standaloneIncidents = [];
@@ -46,6 +46,8 @@ export default function MemberIncidentsTables (props) {
openMemberSummaryOnMemberClick
hideMemberName={hideMemberName}
tableType={incidentTableTypes.INCIDENTS_RELATED_TO_RESERVATIONS}
dateRange={dateRange}
memberId={memberId}
/>
);
@@ -56,6 +58,8 @@ export default function MemberIncidentsTables (props) {
openMemberSummaryOnMemberClick
hideMemberName={hideMemberName}
tableType={incidentTableTypes.STANDALONE_INCIDENTS}
dateRange={dateRange}
memberId={memberId}
/>
);
@@ -66,6 +70,8 @@ export default function MemberIncidentsTables (props) {
openMemberSummaryOnMemberClick
hideMemberName={hideMemberName}
tableType={incidentTableTypes.BOOKING_CHANGE_INCIDENTS}
dateRange={dateRange}
memberId={memberId}
/>
);

View File

@@ -0,0 +1,111 @@
import React, { Component } from 'react';
import Table from 'react-table';
import SelectTableHOC from 'react-table/lib/hoc/selectTable';
const SelectTableElement = SelectTableHOC(Table);
class SelectTable extends Component {
static defaultProps = {
keyField: "id"
};
/**
* Toggle a single checkbox for select table
*/
toggleSelection = (key, shift, row) => {
// start off with the existing state
let selection = [...this.state.selection];
const keyIndex = selection.indexOf(key);
// check to see if the key exists
if (keyIndex >= 0) {
// it does exist so we will remove it using destructing
selection = [
...selection.slice(0, keyIndex),
...selection.slice(keyIndex + 1)
];
} else {
// it does not exist so add it
selection.push(key);
}
// update the state
this.props.onSelectChange(selection);
this.setState({ selection });
};
/**
* Toggle all checkboxes for select table
*/
toggleAll = () => {
const { keyField } = this.props;
const selectAll = !this.state.selectAll;
const selection = [];
if (selectAll) {
// we need to get at the internals of ReactTable
const wrappedInstance = this.checkboxTable.getWrappedInstance();
// the 'sortedData' property contains the currently accessible records based on the filter and sort
const currentRecords = wrappedInstance.getResolvedState().sortedData;
// we just push all the IDs onto the selection array
currentRecords.forEach(item => {
selection.push(`select-${item._original[keyField]}`);
});
}
this.props.onSelectChange(selection);
this.setState({ selectAll, selection });
};
/**
* Whether or not a row is selected for select table
*/
isSelected = key => {
return this.state.selection.includes(`select-${key}`);
};
rowFn = (state, rowInfo, column, instance) => {
const { selection } = this.state;
return {
onClick: (e, handleOriginal) => {
// console.log("It was in this row:", rowInfo);
// IMPORTANT! React-Table uses onClick internally to trigger
// events like expanding SubComponents and pivots.
// By default a custom 'onClick' handler will override this functionality.
// If you want to fire the original onClick handler, call the
// 'handleOriginal' function.
if (handleOriginal) {
handleOriginal();
}
},
style: {
background:
rowInfo &&
selection.includes(`select-${rowInfo.original.id}`) &&
"lightgreen"
}
};
};
state = {
selectAll: false,
selection: []
};
render() {
return (
<SelectTableElement
{...this.props}
ref={r => (this.checkboxTable = r)}
toggleSelection={this.toggleSelection}
selectAll={this.state.selectAll}
selectType="checkbox"
toggleAll={this.toggleAll}
isSelected={this.isSelected}
getTrProps={this.rowFn}
/>
);
}
}
export default SelectTable;

View File

@@ -47,7 +47,7 @@ class IncidentsReport extends Component {
<br/><br/>
<hr/>
<br/>
<MemberIncidentsTables pendingIncidents={loading} incidents={incidents} />
<MemberIncidentsTables pendingIncidents={loading} incidents={incidents} dateRange={dateRange} />
</Container>
);
}

View File

@@ -83,7 +83,13 @@ class SpecificMemberIncidentsReport extends Component {
<Grid.Row/>
<Grid.Row>
<Grid.Column>
<MemberIncidentsTables incidents={memberIncidents} pendingIncidents={loading} hideMemberName/>
<MemberIncidentsTables
incidents={memberIncidents}
pendingIncidents={loading}
hideMemberName
dateRange={dateRange}
memberId={memberId}
/>
</Grid.Column>
</Grid.Row>
</Grid>

View File

@@ -88,6 +88,21 @@ export const fetchIncidents = (dispatch, dateRange) => {
});
};
export const deleteIncidents = (dispatch, deleteData) => {
const pendingAction = deleteData.memberId ? FETCH_MEMBER_INCIDENTS_PENDING : FETCH_INCIDENTS_PENDING;
const successAction = deleteData.memberId ? FETCH_MEMBER_INCIDENTS_SUCCESS : FETCH_INCIDENTS_SUCCESS;
const failedAction = deleteData.memberId ? FETCH_MEMBER_INCIDENTS_FAILED : FETCH_INCIDENTS_FAILED;
dispatch({type: pendingAction});
API.delete(`/integration/fees`, { data: deleteData })
.then(response => {
dispatch({type: successAction, payload: response.data});
})
.catch(error => {
dispatch({type: failedAction, payload: error.response});
});
};
export const fetchMembersList = (dispatch) => {
dispatch({type: FETCH_MEMBERS_PENDING});
API.get('officeRnD/membersList')