105 lines
3.4 KiB
JavaScript
105 lines
3.4 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Container, Button, Loader, Input, Message, Grid } from 'semantic-ui-react';
|
|
|
|
import MainMenu from '../../components/MainMenu';
|
|
|
|
import { fetchMemberPracticeSummaryReport } from '../../store/actions';
|
|
|
|
class MemberPracticeSummaryReport extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
year: new Date().getFullYear(),
|
|
stateError: null,
|
|
}
|
|
}
|
|
|
|
onGenerateReportClick = () => {
|
|
const {fetchMemberPracticeSummaryReport} = this.props;
|
|
const { year } = this.state;
|
|
|
|
const currentYear = new Date().getFullYear();
|
|
const parsedYear = parseInt(year);
|
|
|
|
if (!parsedYear || isNaN(parsedYear)){
|
|
this.setState({stateError: 'Year is not a number'});
|
|
return;
|
|
}
|
|
|
|
if (parsedYear > currentYear){
|
|
this.setState({stateError: 'Selected year cannot be greater than current year'});
|
|
return;
|
|
}
|
|
|
|
fetchMemberPracticeSummaryReport(year);
|
|
};
|
|
|
|
onYearInputChange = (event, data) => {
|
|
let newYear = parseInt(data.value)
|
|
if (!newYear || isNaN(newYear)){
|
|
newYear = new Date().getFullYear();
|
|
}
|
|
this.setState({year: newYear, stateError: null})
|
|
};
|
|
|
|
render () {
|
|
const { pendingReport, fetchReportError } = this.props;
|
|
const { year, stateError } = this.state;
|
|
|
|
let error;
|
|
error = stateError ? stateError : null;
|
|
error = fetchReportError ? fetchReportError : error;
|
|
|
|
return (
|
|
<Container>
|
|
<MainMenu/>
|
|
<h3>Member Practice Summary Report</h3>
|
|
<hr/>
|
|
<br/>
|
|
<Grid stackable>
|
|
<Grid.Row>
|
|
<Grid.Column width={5}>
|
|
<Input
|
|
fluid
|
|
type="number"
|
|
label={'Report for : '}
|
|
value={year}
|
|
onChange={this.onYearInputChange}
|
|
/>
|
|
</Grid.Column>
|
|
<Grid.Column width={5}>
|
|
<Button disabled={pendingReport} onClick={this.onGenerateReportClick}>Generate Report</Button>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
{error &&
|
|
<Grid.Row>
|
|
<Grid.Column>
|
|
<Message negative>
|
|
<Message.Header>Error</Message.Header>
|
|
<br/>
|
|
<Message.Content><p>{error}</p></Message.Content>
|
|
</Message>
|
|
</Grid.Column>
|
|
</Grid.Row>
|
|
}
|
|
</Grid>
|
|
<Loader active={pendingReport} />
|
|
</Container>
|
|
);
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => ({
|
|
pendingReport: state.memberPracticeSummaryReport.pending,
|
|
fetchReportError: state.memberPracticeSummaryReport.error,
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
fetchMemberPracticeSummaryReport: (year) => fetchMemberPracticeSummaryReport(dispatch, year),
|
|
});
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(MemberPracticeSummaryReport);
|