client/src/components/DateRangePicker/index.js

@@ -1,140 +0,0 @@
-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/components/MonthSelector/index.js

@@ -0,0 +1,120 @@
+import React, { Component } from 'react';
+import moment from 'moment';
+
+import { Form, Grid } from 'semantic-ui-react';
+
+import { defaultDateFormat } from '../../constants/constants';
+
+class MonthSelector extends Component {
+    constructor(props) {
+        super(props);
+
+        const initialDateTime = moment();
+        const initialMonth = (initialDateTime.month() === 0) ? 11 : initialDateTime.month() - 1;
+        const initialYear = (initialDateTime.month() === 0) ? initialDateTime.year() - 1 : initialDateTime.year();
+
+        this.state = {
+            month: initialMonth,
+            year: initialYear,
+            monthLabel: props.monthLabel || 'Month',
+            yearLabel: props.yearLabel || 'Year',
+        };
+    }
+
+    onMonthSelectionChange = (event, data) => {
+        const newMonthValue = data.value;
+        this.setState({month: newMonthValue});
+    };
+
+    onYearChange = (event) => {
+        const newYearValue = event.target.value ? parseInt(event.target.value) : this.state.year;
+        this.setState({year: newYearValue});
+    };
+
+    onButtonClick() {
+        const { onDatesUpdate } = this.props;
+        const { month, year } = this.state;
+
+        const monthYearMoment = moment().month(month).year(year);
+
+        if (onDatesUpdate){
+            onDatesUpdate({
+                startDate: monthYearMoment.clone().startOf('month').format(defaultDateFormat),
+                endDate: monthYearMoment.clone().endOf('month').format(defaultDateFormat),
+            });
+        }
+    }
+
+    componentDidMount() {
+        this.onButtonClick();
+    }
+
+    render() {
+        const { month, year, monthLabel, yearLabel } = this.state;
+        const { inlineButton } = this.props;
+
+        const buttonLabel = this.props.buttonLabel || 'Save';
+
+        const buttonRender = (
+            <Grid.Column width={inlineButton ? 3 : null}>
+                { inlineButton && <label>{'\u00A0'}</label> }
+                <Form.Button onClick={this.onButtonClick.bind(this)}>{buttonLabel}</Form.Button>
+            </Grid.Column>
+        );
+
+        const monthDropdownOptions = [
+            {value: 0, text: 'January'},
+            {value: 1, text: 'February'},
+            {value: 2, text: 'March'},
+            {value: 3, text: 'April'},
+            {value: 4, text: 'May'},
+            {value: 5, text: 'June'},
+            {value: 6, text: 'July'},
+            {value: 7, text: 'August'},
+            {value: 8, text: 'September'},
+            {value: 9, text: 'October'},
+            {value: 10, text: 'November'},
+            {value: 11, text: 'December'},
+        ];
+
+        return (
+            <Form>
+                <Grid stackable columns={inlineButton ? null : 'equal'}>
+                    <Grid.Row>
+                        <Grid.Column width={inlineButton ? 7 : null}>
+                            <label>{monthLabel}</label>
+                            <Form.Dropdown
+                                options={monthDropdownOptions}
+                                fluid
+                                selection
+                                defaultValue={month}
+                                onChange={this.onMonthSelectionChange}
+                            />
+                        </Grid.Column>
+                        <Grid.Column width={inlineButton ? 6 : null}>
+                            <label>{yearLabel}</label>
+                            <Form.Input
+                                fluid
+                                required
+                                type="number"
+                                value={year}
+                                onChange={this.onYearChange}
+                            />
+                        </Grid.Column>
+                        {
+                            inlineButton && buttonRender
+                        }
+                    </Grid.Row>
+                    {
+                        !inlineButton &&
+                        <Grid.Row>
+                            {buttonRender}
+                        </Grid.Row>
+                    }
+                </Grid>
+            </Form>
+        );
+    }
+}
+
+export default MonthSelector;

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 DateRangePicker from '../../components/DateRangePicker';
+import MonthSelector from '../../components/MonthSelector';
 import MemberIncidentsTables from '../../components/MemberIncidentsTables';
 import GenerateFeesInORDButton from '../../components/GenerateFeesInORDButton';
 
@@ -38,7 +38,7 @@ class IncidentsReport extends Component {
                 <MainMenu/>
                 <h3>Incidents Report</h3>
                 <hr/>
-                <DateRangePicker buttonLabel="Show report" onDatesUpdate={this.onDatesUpdate} inlineButton />
+                <MonthSelector buttonLabel="Show report" onDatesUpdate={this.onDatesUpdate} inlineButton />
                 <br/>
                 <GenerateFeesInORDButton
                     memberIds={memberIds}

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

@@ -33,7 +33,7 @@ class MemberSelector extends Component {
 
         return (
             <Form>
-                <label>{'\u00A0'}</label>
+                <label>{'Member name'}</label>
                 <Dropdown
                     options={dropdownOptions}
                     placeholder="Select Member"

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 DateRangePicker from '../../components/DateRangePicker';
+import MonthSelector from '../../components/MonthSelector';
 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>
-                            <DateRangePicker inlineButton onDatesUpdate={this.onDateRangeUpdate.bind(this)}/>
+                            <MonthSelector inlineButton onDatesUpdate={this.onDateRangeUpdate.bind(this)}/>
                         </Grid.Column>
                     </Grid.Row>
                     <Grid.Row>