show incidents for selected member and selected dates

client/src/components/MemberIncidentsTable/index.js

@@ -13,7 +13,8 @@ import {
 
 
 const MemberIncidentsTable = props => {
-    const { loading, incidents, title } = props;
+    const { loading, title } = props;
+    const incidents = props.incidents ? props.incidents : [];
 
     const columns = [];
     if (incidents && incidents.length > 0){

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

@@ -1,20 +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>
         );
     }
 }
 
-export default MemberSelector;
+const mapStateToProps = (state) => ({
+    members: state.membersList.result,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+    fetchMembersList: () => fetchMembersList(dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(MemberSelector);

client/src/scenes/PracticeSummaryReport/index.js

@@ -8,8 +8,39 @@ 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/>
@@ -18,10 +49,10 @@ class PracticeSummaryReport extends Component {
                 <Grid stackable columns="equal">
                     <Grid.Row>
                         <Grid.Column>
-                            <MemberSelector />
+                            <MemberSelector onMemberSelect={this.onMemberSelectionUpdate.bind(this)} />
                         </Grid.Column>
                         <Grid.Column>
-                            <DateRangePicker />
+                            <DateRangePicker onDatesUpdate={this.onDateRangeUpdate.bind(this)}/>
                         </Grid.Column>
                     </Grid.Row>
                     <Grid.Row>
@@ -31,7 +62,11 @@ class PracticeSummaryReport extends Component {
                     </Grid.Row>
                     <Grid.Row>
                         <Grid.Column>
-                            <MemberIncidentsTable title="Incidents list" />
+                            <MemberIncidentsTable
+                                title="Detail list"
+                                incidents={memberIncidents}
+                                loading={loading}
+                            />
                         </Grid.Column>
                     </Grid.Row>
                 </Grid>
@@ -41,9 +76,12 @@ class PracticeSummaryReport extends Component {
 }
 
 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);

client/src/store/actions/integrationActions.js

@@ -8,6 +8,12 @@ import {
     FETCH_INCIDENTS_PENDING,
     FETCH_INCIDENTS_SUCCESS,
     FETCH_INCIDENTS_FAILED,
+    FETCH_MEMBERS_PENDING,
+    FETCH_MEMBERS_SUCCESS,
+    FETCH_MEMBERS_FAILED,
+    FETCH_MEMBER_INCIDENTS_PENDING,
+    FETCH_MEMBER_INCIDENTS_SUCCESS,
+    FETCH_MEMBER_INCIDENTS_FAILED,
 } from '../constants';
 
 import API from '../../utilities/api';
@@ -48,3 +54,27 @@ export const fetchIncidents = (dispatch, dateRange) => {
             dispatch({type: FETCH_INCIDENTS_FAILED, payload: error.response});
         });
 };
+
+export const fetchMembersList = (dispatch) => {
+    dispatch({type: FETCH_MEMBERS_PENDING});
+    API.get('officeRnD/membersList')
+        .then(response => {
+            dispatch({type: FETCH_MEMBERS_SUCCESS, payload: response.data});
+        })
+        .catch(error => {
+            dispatch({type: FETCH_MEMBERS_FAILED, payload: error.response});
+        });
+};
+
+export const fetchMemberIncidents = (dispatch, memberId, dateRange) => {
+    const { startDate, endDate } = dateRange;
+
+    dispatch({type: FETCH_MEMBER_INCIDENTS_PENDING});
+    API.get(`integration/report/member/${memberId}/${startDate}/${endDate}`)
+        .then(response => {
+            dispatch({type: FETCH_MEMBER_INCIDENTS_SUCCESS, payload: response.data});
+        })
+        .catch(error => {
+            dispatch({type: FETCH_MEMBER_INCIDENTS_FAILED, payload: error.response});
+        });
+};

client/src/store/constants.js

@@ -13,3 +13,11 @@ export const ADD_NEW_MAPPING_FAILED = 'ADD_NEW_MAPPING_FAILED';
 export const FETCH_INCIDENTS_PENDING = 'FETCH_INCIDENTS_PENDING';
 export const FETCH_INCIDENTS_SUCCESS = 'FETCH_INCIDENTS_SUCCESS';
 export const FETCH_INCIDENTS_FAILED = 'FETCH_INCIDENTS_FAILED';
+
+export const FETCH_MEMBERS_PENDING = 'FETCH_MEMBERS_PENDING';
+export const FETCH_MEMBERS_SUCCESS = 'FETCH_MEMBERS_SUCCESS';
+export const FETCH_MEMBERS_FAILED = 'FETCH_MEMBERS_FAILED';
+
+export const FETCH_MEMBER_INCIDENTS_PENDING = 'FETCH_MEMBER_INCIDENTS_PENDING';
+export const FETCH_MEMBER_INCIDENTS_SUCCESS = 'FETCH_MEMBER_INCIDENTS_SUCCESS';
+export const FETCH_MEMBER_INCIDENTS_FAILED = 'FETCH_MEMBER_INCIDENTS_FAILED';

client/src/store/reducers/index.js

@@ -4,11 +4,15 @@ import { doorLockData} from './doorLockReducers';
 import { mappingsData } from './mappingsReducer';
 import { addMapping } from './addMappingReducer';
 import { incidentsReport } from './incidentsReportReducer';
+import { membersList } from './membersListReducer';
+import { memberIncidents} from './memberIncidentsReducer';
 
 export const rootReducer = combineReducers({
     doorLockData,
     mappingsData,
     addMapping,
     incidentsReport,
+    membersList,
+    memberIncidents,
 });
 

client/src/store/reducers/memberIncidentsReducer.js

@@ -0,0 +1,38 @@
+import {
+    FETCH_MEMBER_INCIDENTS_PENDING,
+    FETCH_MEMBER_INCIDENTS_SUCCESS,
+    FETCH_MEMBER_INCIDENTS_FAILED,
+} from '../constants';
+
+const initialState = {
+    pending: false,
+    result: null,
+    error: null,
+};
+
+export const memberIncidents = (state, action) => {
+    state = state || initialState;
+    action = action || {};
+
+    switch(action.type){
+        case FETCH_MEMBER_INCIDENTS_PENDING:
+            return Object.assign({}, state, {
+                pending: true,
+                error: null,
+            });
+        case FETCH_MEMBER_INCIDENTS_SUCCESS:
+            return Object.assign({}, state, {
+                pending: false,
+                result: action.payload,
+                error: null,
+            });
+        case FETCH_MEMBER_INCIDENTS_FAILED:
+            return Object.assign({}, state, {
+                pending: false,
+                result: {},
+                error: action.payload,
+            });
+        default:
+            return state;
+    }
+};

client/src/store/reducers/membersListReducer.js

@@ -0,0 +1,38 @@
+import {
+    FETCH_MEMBERS_PENDING,
+    FETCH_MEMBERS_SUCCESS,
+    FETCH_MEMBERS_FAILED,
+} from '../constants';
+
+const initialState = {
+    pending: false,
+    result: null,
+    error: null,
+};
+
+export const membersList = (state, action) => {
+    state = state || initialState;
+    action = action || {};
+
+    switch(action.type){
+        case FETCH_MEMBERS_PENDING:
+            return Object.assign({}, state, {
+                pending: true,
+                error: null,
+            });
+        case FETCH_MEMBERS_SUCCESS:
+            return Object.assign({}, state, {
+                pending: false,
+                result: action.payload,
+                error: null,
+            });
+        case FETCH_MEMBERS_FAILED:
+            return Object.assign({}, state, {
+                pending: false,
+                result: {},
+                error: action.payload,
+            });
+        default:
+            return state;
+    }
+};