105 lines
3.8 KiB
JavaScript
105 lines
3.8 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Container, Grid } from 'semantic-ui-react';
|
|
|
|
import MainMenu from '../../components/MainMenu';
|
|
import DateRangePicker from '../../components/DateRangePicker';
|
|
import MemberSelector from './components/MemberSelector';
|
|
import MemberSummary from './components/MemberSummary';
|
|
import MemberIncidentsTables from '../../components/MemberIncidentsTables';
|
|
import GenerateFeesInORDButton from '../../components/GenerateFeesInORDButton';
|
|
|
|
import { fetchMemberIncidents } from '../../store/actions';
|
|
|
|
class PracticeSummaryReport extends Component {
|
|
constructor(props){
|
|
super(props);
|
|
|
|
this.state = {
|
|
dateRange: null,
|
|
memberId: props.match.params.memberId,
|
|
};
|
|
}
|
|
|
|
onDateRangeUpdate(dateRange){
|
|
this.fetchIncidents(dateRange, this.state.memberId);
|
|
this.setState({dateRange});
|
|
}
|
|
|
|
onMemberSelectionUpdate(memberId){
|
|
this.fetchIncidents(this.state.dateRange, memberId);
|
|
this.setState({memberId});
|
|
}
|
|
|
|
fetchIncidents(dateRange, memberId){
|
|
const { fetchMemberIncidents } = this.props;
|
|
|
|
if (dateRange && dateRange.startDate && dateRange.endDate && memberId){
|
|
fetchMemberIncidents(memberId, dateRange);
|
|
}
|
|
}
|
|
|
|
render () {
|
|
const { memberIncidents, loadingMemberIncidents, loadingAddFeesStatus } = this.props;
|
|
const { memberId, dateRange } = this.state;
|
|
|
|
const loading = loadingAddFeesStatus || loadingMemberIncidents;
|
|
|
|
const addFeesButtonDisabled = !memberId || !dateRange || loading;
|
|
|
|
return (
|
|
<Container>
|
|
<MainMenu/>
|
|
<h3>Practice Summary Report</h3>
|
|
<hr/>
|
|
<Grid stackable columns="equal">
|
|
<Grid.Row>
|
|
<Grid.Column>
|
|
<MemberSelector onMemberSelect={this.onMemberSelectionUpdate.bind(this)} defaultMemberId={memberId} />
|
|
</Grid.Column>
|
|
<Grid.Column>
|
|
<DateRangePicker inlineButton onDatesUpdate={this.onDateRangeUpdate.bind(this)}/>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
<Grid.Row>
|
|
<Grid.Column>
|
|
<MemberSummary
|
|
incidents={memberIncidents}
|
|
loading={loading}
|
|
/>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
<Grid.Row>
|
|
<Grid.Column>
|
|
<GenerateFeesInORDButton
|
|
singleMember
|
|
disabled={addFeesButtonDisabled}
|
|
dateRange={dateRange}
|
|
memberIds={[memberId]}
|
|
/>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
<Grid.Row/>
|
|
<Grid.Row>
|
|
<Grid.Column>
|
|
<MemberIncidentsTables incidents={memberIncidents} pendingIncidents={loading} hideMemberName/>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
</Grid>
|
|
</Container>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => ({
|
|
memberIncidents: state.memberIncidents.result,
|
|
loadingMemberIncidents: state.memberIncidents.pending,
|
|
loadingAddFeesStatus: state.addFeesStatus.pending,
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
fetchMemberIncidents: (memberId, dateRange) => fetchMemberIncidents(dispatch, memberId, dateRange),
|
|
});
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(PracticeSummaryReport);
|