Make Practice Summary Report stub

client/src/scenes/IncidentsReport/index.js

@@ -1,96 +1,30 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { Container, Loader } from 'semantic-ui-react';
-import ReactTable from 'react-table';
-import 'react-table/react-table.css';
+import { Container } from 'semantic-ui-react';
 
 import MainMenu from '../../components/MainMenu';
+import DateRangePicker from '../../components/DateRangePicker';
+import MemberIncidentsTable from '../../components/MemberIncidentsTable';
+
 import { fetchIncidents } from '../../store/actions';
-import { incidentsReportHeaderTitles } from '../../constants/menuItems';
-import { incidentDescriptions, incidentLevelDescriptions, UNSCHEDULED_INCIDENT, UNLOCKED_INCIDENT } from '../../constants/enums';
 
 class IncidentsReport extends Component {
-
-    componentDidMount() {
+    onDatesUpdate(dateRange) {
         const { fetchIncidents } = this.props;
-        fetchIncidents();
+        fetchIncidents(dateRange);
     }
 
     render () {
         const { pendingIncidents, incidents } = this.props;
 
-        const columns = [];
-        if (incidents && incidents.length > 0){
-            const incidentHeaders = Object.keys(incidentsReportHeaderTitles);
-
-            incidentHeaders.forEach((header) => {
-                const columnTitle = incidentsReportHeaderTitles[header];
-
-                if (columnTitle){
-                    const columnAlignments = {
-                        left: 'left',
-                        right: 'right',
-                    };
-                    let columnContentsAlignment = columnAlignments.left;
-
-                    columns.push({
-                        Header: incidentsReportHeaderTitles[header],
-                        accessor: header,
-                        Cell: props => {
-                            let cellValue;
-
-                            switch (props.column.id) {
-                                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:
-                                            cellValue = `${incidentLevelDescriptions[incidentLevel]}`;
-                                            break;
-                                        case UNSCHEDULED_INCIDENT:
-                                            cellValue = `${timeIntervalsToCharge} x 5 min`;
-                                            break;
-                                    }
-                                    break;
-
-                                case 'totalChargeFee':
-                                    const totalFee = props.value ? props.value : props.row['_original'].incidentPrice;
-                                    const totalFeeFormatted = parseFloat(totalFee).toFixed(2);
-                                    cellValue = `$ ${totalFeeFormatted}`;
-                                    columnContentsAlignment = columnAlignments.right;
-                                    break;
-
-                                default:
-                                    cellValue = props.value;
-                            }
-
-                            return <div style={{ textAlign: columnContentsAlignment }}>{cellValue}</div>
-                        }
-                    });
-                }
-            });
-        }
-
         return (
             <Container>
                 <MainMenu/>
                 <h3>Incidents Report</h3>
                 <hr/>
-                <Loader active={pendingIncidents} />
-                {
-                    !pendingIncidents && incidents &&
-                    <ReactTable
-                        data={incidents}
-                        multiSort={false}
-                        columns={columns}
-                    />
-                }
+                <DateRangePicker buttonLabel="Show report" onDatesUpdate={this.onDatesUpdate.bind(this)} />
+                <br/>
+                <MemberIncidentsTable loading={pendingIncidents} incidents={incidents} />
             </Container>
         );
     }
@@ -102,7 +36,7 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-    fetchIncidents: () => fetchIncidents(dispatch),
+    fetchIncidents: (dateRange) => fetchIncidents(dispatch, dateRange),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(IncidentsReport);

client/src/scenes/PracticeSummaryReport/components/MemberSelector.js

@@ -0,0 +1,58 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { Dropdown, Form } from 'semantic-ui-react';
+
+import { fetchMembersList } from '../../../store/actions';
+
+class MemberSelector extends Component {
+    componentDidMount() {
+        const { fetchMembersList } = this.props;
+
+        fetchMembersList();
+    }
+
+    onMemberSelectionChange(event, data){
+        const { onMemberSelect } = this.props;
+
+        const { value } = data;
+
+        if (onMemberSelect && value){
+            onMemberSelect(value);
+        }
+    }
+
+    render(){
+        const { members } = this.props;
+
+        const dropdownOptions = members && Array.isArray(members) ? members.map(member => ({
+                key: member.memberId,
+                value: member.memberId,
+                text: member.name
+            })
+        ) : null;
+
+        return (
+            <Form>
+                <label>{'\u00A0'}</label>
+                <Dropdown
+                    options={dropdownOptions}
+                    placeholder="Select Member"
+                    selection
+                    search
+                    fluid
+                    onChange={this.onMemberSelectionChange.bind(this)}
+                />
+            </Form>
+        );
+    }
+}
+
+const mapStateToProps = (state) => ({
+    members: state.membersList.result,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+    fetchMembersList: () => fetchMembersList(dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(MemberSelector);

client/src/scenes/PracticeSummaryReport/components/MemberSummary.js

@@ -0,0 +1,9 @@
+import React, { Component } from 'react';
+
+class MemberSummary extends Component {
+    render() {
+        return (<h4>Member Summary</h4>);
+    }
+}
+
+export default MemberSummary;

client/src/scenes/PracticeSummaryReport/index.js

@@ -0,0 +1,87 @@
+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 MemberIncidentsTable from '../../components/MemberIncidentsTable';
+
+import { fetchMemberIncidents } from '../../store/actions';
+
+class PracticeSummaryReport extends Component {
+    constructor(props){
+        super(props);
+
+        this.state = {
+            dateRange: null,
+            memberId: null,
+        };
+    }
+
+    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, loading } = this.props;
+
+        return (
+            <Container>
+                <MainMenu/>
+                <h3>Practice Summary Report</h3>
+                <hr/>
+                <Grid stackable columns="equal">
+                    <Grid.Row>
+                        <Grid.Column>
+                            <MemberSelector onMemberSelect={this.onMemberSelectionUpdate.bind(this)} />
+                        </Grid.Column>
+                        <Grid.Column>
+                            <DateRangePicker onDatesUpdate={this.onDateRangeUpdate.bind(this)}/>
+                        </Grid.Column>
+                    </Grid.Row>
+                    <Grid.Row>
+                        <Grid.Column>
+                            <MemberSummary />
+                        </Grid.Column>
+                    </Grid.Row>
+                    <Grid.Row>
+                        <Grid.Column>
+                            <MemberIncidentsTable
+                                title="Detail list"
+                                incidents={memberIncidents}
+                                loading={loading}
+                            />
+                        </Grid.Column>
+                    </Grid.Row>
+                </Grid>
+            </Container>
+        );
+    }
+}
+
+const mapStateToProps = (state) => ({
+    memberIncidents: state.memberIncidents.result,
+    loading: state.memberIncidents.pending,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+    fetchMemberIncidents: (memberId, dateRange) => fetchMemberIncidents(dispatch, memberId, dateRange),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(PracticeSummaryReport);