From 95b0ccd11196949f54c5e2399270fe23d895ed0a Mon Sep 17 00:00:00 2001 From: Bilal Catic Date: Mon, 26 Aug 2019 06:36:57 +0200 Subject: [PATCH 1/3] Rename date range selector component to the month selector --- .../components/{DateRangePicker => MonthSelector}/index.js | 4 ++-- client/src/scenes/IncidentsReport/index.js | 4 ++-- client/src/scenes/SpecificMemberIncidentsReport/index.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) rename client/src/components/{DateRangePicker => MonthSelector}/index.js (98%) diff --git a/client/src/components/DateRangePicker/index.js b/client/src/components/MonthSelector/index.js similarity index 98% rename from client/src/components/DateRangePicker/index.js rename to client/src/components/MonthSelector/index.js index 304ed83..c2b9e59 100644 --- a/client/src/components/DateRangePicker/index.js +++ b/client/src/components/MonthSelector/index.js @@ -5,7 +5,7 @@ import { Form, Message, Grid } from 'semantic-ui-react'; import { defaultDateFormat } from '../../constants/constants'; -class DateRangePicker extends Component { +class MonthSelector extends Component { constructor(props) { super(props); @@ -137,4 +137,4 @@ class DateRangePicker extends Component { } } -export default DateRangePicker; +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

- +
- + -- 2.47.3 From 5db509c8a4c0ffc23c5911a24cb27a53bd27a3f2 Mon Sep 17 00:00:00 2001 From: Bilal Catic Date: Mon, 26 Aug 2019 06:37:18 +0200 Subject: [PATCH 2/3] add label for the member selector component --- .../SpecificMemberIncidentsReport/components/MemberSelector.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/scenes/SpecificMemberIncidentsReport/components/MemberSelector.js b/client/src/scenes/SpecificMemberIncidentsReport/components/MemberSelector.js index d22ebe7..589e47b 100644 --- a/client/src/scenes/SpecificMemberIncidentsReport/components/MemberSelector.js +++ b/client/src/scenes/SpecificMemberIncidentsReport/components/MemberSelector.js @@ -33,7 +33,7 @@ class MemberSelector extends Component { return (
- + Date: Mon, 26 Aug 2019 09:28:07 +0200 Subject: [PATCH 3/3] implement month and year selection instead of date range --- client/src/components/MonthSelector/index.js | 114 ++++++++----------- 1 file changed, 47 insertions(+), 67 deletions(-) diff --git a/client/src/components/MonthSelector/index.js b/client/src/components/MonthSelector/index.js index c2b9e59..d4f295c 100644 --- a/client/src/components/MonthSelector/index.js +++ b/client/src/components/MonthSelector/index.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import moment from 'moment'; -import { Form, Message, Grid } from 'semantic-ui-react'; +import { Form, Grid } from 'semantic-ui-react'; import { defaultDateFormat } from '../../constants/constants'; @@ -9,60 +9,38 @@ class MonthSelector 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'); - } + const initialDateTime = moment(); + const initialMonth = (initialDateTime.month() === 0) ? 11 : initialDateTime.month() - 1; + const initialYear = (initialDateTime.month() === 0) ? initialDateTime.year() - 1 : initialDateTime.year(); this.state = { - startDate: initialStartDate, - endDate: initialEndDate, - error: null, - startDateLabel: props.startDateLabel || 'Start date', - endDateLabel: props.endDateLabel || 'End date', + month: initialMonth, + year: initialYear, + monthLabel: props.monthLabel || 'Month', + yearLabel: props.yearLabel || 'Year', }; } - onStartDateChange(event) { - const { endDate, startDateLabel, endDateLabel } = this.state; + onMonthSelectionChange = (event, data) => { + const newMonthValue = data.value; + this.setState({month: newMonthValue}); + }; - 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}); - } + onYearChange = (event) => { + const newYearValue = event.target.value ? parseInt(event.target.value) : this.state.year; + this.setState({year: newYearValue}); + }; onButtonClick() { const { onDatesUpdate } = this.props; - const { startDate, endDate } = this.state; + const { month, year } = this.state; + + const monthYearMoment = moment().month(month).year(year); if (onDatesUpdate){ onDatesUpdate({ - startDate: startDate.format(defaultDateFormat), - endDate: endDate.format(defaultDateFormat), + startDate: monthYearMoment.clone().startOf('month').format(defaultDateFormat), + endDate: monthYearMoment.clone().endOf('month').format(defaultDateFormat), }); } } @@ -72,14 +50,11 @@ class MonthSelector extends Component { } render() { - const { startDate, endDate, error, startDateLabel, endDateLabel } = this.state; + const { month, year, monthLabel, yearLabel } = 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 && } @@ -87,44 +62,49 @@ class MonthSelector extends Component { ); + 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 ( - - {monthLabel} + - + { inlineButton && buttonRender } - { error && - - - - Wrong date -

{startDateLabel} has to be before {endDateLabel}

- - - - } { !inlineButton && -- 2.47.3