diff --git a/client/src/components/DateRangePicker/index.js b/client/src/components/DateRangePicker/index.js deleted file mode 100644 index 304ed83..0000000 --- a/client/src/components/DateRangePicker/index.js +++ /dev/null @@ -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 = ( - - { inlineButton && } - {buttonLabel} - - ); - - return ( -
- - - - - - - - - - - { - inlineButton && buttonRender - } - - { error && - - - - Wrong date -

{startDateLabel} has to be before {endDateLabel}

-
-
-
- } - { - !inlineButton && - - {buttonRender} - - } -
-
- ); - } -} - -export default DateRangePicker; diff --git a/client/src/components/MonthSelector/index.js b/client/src/components/MonthSelector/index.js new file mode 100644 index 0000000..d4f295c --- /dev/null +++ b/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 = ( + + { inlineButton && } + {buttonLabel} + + ); + + 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 ( +
+ + + + + + + + + + + { + inlineButton && buttonRender + } + + { + !inlineButton && + + {buttonRender} + + } + +
+ ); + } +} + +export default MonthSelector; diff --git a/client/src/scenes/IncidentsReport/index.js b/client/src/scenes/IncidentsReport/index.js index 40dad4b..2a2ebc6 100644 --- a/client/src/scenes/IncidentsReport/index.js +++ b/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 {

Incidents Report


- +
- + - +