Member Practice Summary Report and bugfixes

client/src/scenes/SpecificMemberIncidentsReport/index.js

@@ -0,0 +1,104 @@
+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 SpecificMemberIncidentsReport 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>Member Incidents 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)(SpecificMemberIncidentsReport);