Rewert to range picker for incident reports

.gitignore

@@ -1,4 +1,4 @@
 node_modules
 npm-debug.log
-
+.env
 .idea

client/src/components/DateRangePicker/index.js

@@ -0,0 +1,142 @@
+import React, { Component } from 'react';
+import moment from 'moment';
+
+import { Form, Message, Grid } from 'semantic-ui-react';
+
+import { defaultDateFormat } from '../../constants/constants';
+
+class DateRangePicker extends Component {
+    constructor(props) {
+        super(props);
+
+        const initialStartDate = props.startDate ? moment(props.startDate, defaultDateFormat) : moment().startOf('month');
+        let initialEndDate = props.endDate ? moment(props.endDate, defaultDateFormat) : moment();
+
+        if (initialStartDate > initialEndDate){
+            initialEndDate = initialStartDate.add(1, 'day');
+        }
+
+        this.state = {
+            startDate: initialStartDate,
+            endDate: initialEndDate,
+            error: null,
+            startDateLabel: props.startDateLabel || 'Start date',
+            endDateLabel: props.endDateLabel || 'End date',
+        };
+    }
+
+    onStartDateChange(event) {
+        const { endDate, startDateLabel, endDateLabel } = this.state;
+
+        const newStartDate = moment(event.target.value, defaultDateFormat);
+        if (newStartDate > endDate){
+            this.setState({
+                error: `${startDateLabel} cannot be after ${endDateLabel}`
+            });
+            return;
+        }
+        this.setState({startDate: newStartDate, error: null});
+    }
+
+    onEndDateChange(event) {
+        const { startDate, startDateLabel, endDateLabel } = this.state;
+
+        const newEndDate = moment(event.target.value, defaultDateFormat);
+        if (newEndDate < startDate){
+            this.setState({
+                error: `${startDateLabel} cannot be after ${endDateLabel}`
+            });
+            return;
+        }
+        this.setState({endDate: newEndDate, error: null});
+    }
+
+    onDismiss() {
+        this.setState({error: null});
+    }
+
+    onButtonClick() {
+        const { onDatesUpdate } = this.props;
+        const { startDate, endDate } = this.state;
+
+        if (onDatesUpdate){
+            onDatesUpdate({
+                startDate: startDate.format(defaultDateFormat),
+                endDate: endDate.format(defaultDateFormat),
+            });
+        }
+    }
+
+    componentDidMount() {
+        this.onButtonClick();
+    }
+
+    render() {
+        const { startDate, endDate, error, startDateLabel, endDateLabel } = this.state;
+        const { inlineButton } = this.props;
+
+        const buttonLabel = this.props.buttonLabel || 'Save';
+
+        const startDateValue = startDate.format(defaultDateFormat);
+        const endDateValue = endDate.format(defaultDateFormat);
+
+        const buttonRender = (
+            <Grid.Column width={inlineButton ? 3 : null}>
+                { inlineButton && <label>{'\u00A0'}</label> }
+                <Form.Button onClick={this.onButtonClick.bind(this)}>{buttonLabel}</Form.Button>
+            </Grid.Column>
+        );
+
+        return (
+            <Form>
+                <Grid stackable columns={inlineButton ? null : 'equal'}>
+                    <Grid.Row>
+                        <Grid.Column width={inlineButton ? 7 : null}>
+                            <label>{startDateLabel}</label>
+                            <Form.Input
+                                fluid
+                                required
+                                type="date"
+                                value={startDateValue}
+                                onChange={this.onStartDateChange.bind(this)}
+                            />
+                        </Grid.Column>
+                        <Grid.Column width={inlineButton ? 6 : null}>
+                            <label>{endDateLabel}</label>
+                            <Form.Input
+                                fluid
+                                required
+                                type="date"
+                                value={endDateValue}
+                                onChange={this.onEndDateChange.bind(this)}
+                            />
+                        </Grid.Column>
+                        {
+                            inlineButton && buttonRender
+                        }
+                    </Grid.Row>
+                    { error &&
+                        <Grid.Row>
+                            <Grid.Column>
+                                <Message color="orange" onDismiss={this.onDismiss.bind(this)}>
+                                    <Message.Header>Wrong date</Message.Header>
+                                    <p><b>{startDateLabel}</b> has to be before <b>{endDateLabel}</b></p>
+                                </Message>
+                            </Grid.Column>
+                        </Grid.Row>
+                    }
+                    {
+                        !inlineButton &&
+                        <Grid.Row>
+                            {buttonRender}
+                        </Grid.Row>
+                    }
+                </Grid>
+            </Form>
+        );
+    }
+}
+
+export default DateRangePicker;
+
+

client/src/scenes/IncidentsReport/index.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { Container } from 'semantic-ui-react';
 
 import MainMenu from '../../components/MainMenu';
-import MonthSelector from '../../components/MonthSelector';
+import DateRangePicker from '../../components/DateRangePicker';
 import MemberIncidentsTables from '../../components/MemberIncidentsTables';
 import GenerateFeesInORDButton from '../../components/GenerateFeesInORDButton';
 
@@ -37,7 +37,7 @@ class IncidentsReport extends Component {
                 <MainMenu/>
                 <h3>Incidents Report</h3>
                 <hr/>
-                <MonthSelector buttonLabel="Show report" onDatesUpdate={this.onDatesUpdate} inlineButton />
+                <DateRangePicker buttonLabel="Show report" onDatesUpdate={this.onDatesUpdate} inlineButton />
                 <br/>
                 <GenerateFeesInORDButton
                     disabled={loading}

client/src/scenes/SpecificMemberIncidentsReport/index.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { Container, Grid } from 'semantic-ui-react';
 
 import MainMenu from '../../components/MainMenu';
-import MonthSelector from '../../components/MonthSelector';
+import DateRangePicker from '../../components/DateRangePicker';
 import MemberSelector from './components/MemberSelector';
 import MemberSummary from './components/MemberSummary';
 import MemberIncidentsTables from '../../components/MemberIncidentsTables';
@@ -58,7 +58,7 @@ class SpecificMemberIncidentsReport extends Component {
                             <MemberSelector onMemberSelect={this.onMemberSelectionUpdate.bind(this)} defaultMemberId={memberId} />
                         </Grid.Column>
                         <Grid.Column>
-                            <MonthSelector inlineButton onDatesUpdate={this.onDateRangeUpdate.bind(this)}/>
+                            <DateRangePicker inlineButton onDatesUpdate={this.onDateRangeUpdate.bind(this)}/>
                         </Grid.Column>
                     </Grid.Row>
                     <Grid.Row>