Skip to content

Commit

Permalink
fix: recurrence widget (#445)
Browse files Browse the repository at this point in the history
  • Loading branch information
@giuliaghisini
giuliaghisini authored Dec 21, 2023
1 parent ae70c9c commit 201a3ac
Show file tree
Hide file tree
Showing 2 changed files with 214 additions and 31 deletions.
133 changes: 133 additions & 0 deletions src/customizations/volto/components/manage/Widgets/RecurrenceWidget/EndField.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
/**
* EndField component.
* @module components/manage/Widgets/RecurrenceWidget/EndField
*
*
* * CUSTOMIZATIONS:
* - added customization to have this changes https://github.com/plone/volto/pull/5555/files
*/

import React from 'react';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import { Form, Grid, Input, Radio } from 'semantic-ui-react';
import DatetimeWidget from '../DatetimeWidget';

const messages = defineMessages({
recurrenceEnds: { id: 'Recurrence ends', defaultMessage: 'Ends' },
recurrenceEndsCount: { id: 'Recurrence ends after', defaultMessage: 'after' },
recurrenceEndsUntil: { id: 'Recurrence ends on', defaultMessage: 'on' },
occurrences: { id: 'Occurences', defaultMessage: 'occurrence(s)' },
});
/**
* EndField component class.
* @function EndField
* @returns {string} Markup of the component.
*/
const EndField = ({ value, count, until, onChange, intl }) => {
return (
<Form.Field inline className="text">
<Grid>
<Grid.Row stretched>
<Grid.Column width="4">
<div className="wrapper">
<label htmlFor="recurrenceEnds">
{intl.formatMessage(messages.recurrenceEnds)}
</label>
</div>
</Grid.Column>
<Grid.Column width="8">
<Form.Group inline>
<Form.Field>
<Radio
label=""
name="recurrenceEnds"
id="recurrenceEndsCount"
value="count"
checked={value === 'count'}
onChange={(e, { value }) => onChange('recurrenceEnds', value)}
/>
</Form.Field>
<Form.Field disabled={value !== 'count'}>
{intl.formatMessage(messages.recurrenceEndsCount)}
</Form.Field>
<Form.Field disabled={value !== 'count'}>
<Input
id="count"
name="count"
value={count || ''}
onChange={({ target }) => {
onChange(
target.id,
target.value === '' ? undefined : target.value,
);
}}
/>
</Form.Field>
<Form.Field disabled={value !== 'count'}>
{intl.formatMessage(messages.occurrences)}
</Form.Field>
</Form.Group>
<Form.Group inline>
<Form.Field>
<Radio
id="recurrenceEndsUntil"
label=""
name="recurrenceEnds"
value="until"
checked={value === 'until'}
onChange={(e, { value }) => onChange('recurrenceEnds', value)}
/>
</Form.Field>

<Form.Field disabled={value !== 'until'}>
<DatetimeWidget
id="until"
title={intl.formatMessage(messages.recurrenceEndsUntil)}
dateOnly={true}
value={
until
? typeof until === 'string'
? until
: until?.toISOString()
: ''
}
resettable={false}
onChange={(id, value) => {
onChange(id, value === '' ? undefined : value);
}}
/>
</Form.Field>
</Form.Group>
</Grid.Column>
</Grid.Row>
</Grid>
</Form.Field>
);
};

/**
* Property types.
* @property {Object} propTypes Property types.
* @static
*/
EndField.propTypes = {
value: PropTypes.string,
count: PropTypes.any,
until: PropTypes.any,
onChange: PropTypes.func,
};

/**
* Default properties.
* @property {Object} defaultProps Default properties.
* @static
*/
EndField.defaultProps = {
value: null,
count: null,
until: null,
onChange: null,
};

export default injectIntl(EndField);
112 changes: 81 additions & 31 deletions src/customizations/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
* CUSTOMIZATIONS:
* - add date field open calendar on top
* - fix all imports and rrulei18n use
* - added customization to have this changes https://github.com/plone/volto/pull/5555/files
*/

import React, { Component } from 'react';
Expand Down Expand Up @@ -216,26 +217,41 @@ class RecurrenceWidget extends Component {

componentDidUpdate(prevProps) {
if (this.props.value) {
if (prevProps.formData?.start !== this.props.formData?.start) {
let start = this.getUTCDate(this.props.formData?.start)
.startOf('day')
.toDate();

this.setState((prevState) => {
let rruleSet = prevState.rruleSet;

rruleSet = this.updateRruleSet(
rruleSet,
prevState.formValues,
'dtstart',
start,
);

return {
...prevState,
rruleSet,
};
});
const changedStart =
prevProps.formData?.start !== this.props.formData?.start;
const changedEnd = prevProps.formData?.end !== this.props.formData?.end;

if (changedStart || changedEnd) {
let start = this.getUTCDate(this.props.formData?.start).toDate();
// let end = this.getUTCDate(this.props.formData?.end).toDate();

let changeFormValues = {};
if (changedEnd) {
changeFormValues.until = this.getUTCDate(
this.props.formData?.end,
).toDate();
}
this.setState(
(prevState) => {
let rruleSet = prevState.rruleSet;

rruleSet = this.updateRruleSet(
rruleSet,
{ ...prevState.formValues, ...changeFormValues },
'dtstart',
start,
);

return {
...prevState,
rruleSet,
};
},
() => {
//then, after set state, set recurrence rrule value
this.saveRrule();
},
);
}
}
}
Expand All @@ -247,7 +263,7 @@ class RecurrenceWidget extends Component {
setRecurrenceStartEnd = () => {
const start = this.props.formData?.start;

let _start = this.getUTCDate(start).startOf('day').toDate();
const _start = new Date(start); //The date is already in utc from plone, so this is not necessary: this.getUTCDate(start).startOf('day').toDate();

this.setState((prevState) => {
let rruleSet = prevState.rruleSet;
Expand Down Expand Up @@ -336,7 +352,7 @@ class RecurrenceWidget extends Component {
case 'until':
if (value != null) {
formValues['recurrenceEnds'] = option;
formValues[option] = toISOString(value);
formValues[option] = value;
}
break;
case 'byweekday':
Expand Down Expand Up @@ -419,7 +435,24 @@ class RecurrenceWidget extends Component {
}
break;
case 'until':
value = value ? moment(new Date(value)).utc().toDate() : null;
let mDate = null;
if (value) {
mDate = this.moment(new Date(value));
if (typeof value === 'string') {
mDate = this.moment(new Date(value));
} else {
//object-->Date()
mDate = this.moment(value);
}

if (this.props.formData.end) {
//set time from formData.end
const mEnd = this.moment(new Date(this.props.formData.end));
mDate.set('hour', mEnd.get('hour'));
mDate.set('minute', mEnd.get('minute'));
}
}
value = value ? mDate.toDate() : null;
break;
default:
break;
Expand All @@ -443,8 +476,8 @@ class RecurrenceWidget extends Component {
field === 'dtstart'
? value
: rruleSet.dtstart()
? rruleSet.dtstart()
: moment().utc().toDate();
? rruleSet.dtstart()
: new Date();
var exdates =
field === 'exdates' ? value : Object.assign([], rruleSet.exdates());

Expand All @@ -465,12 +498,12 @@ class RecurrenceWidget extends Component {

getDefaultUntil = (freq) => {
var end = this.props.formData?.end
? toISOString(this.getUTCDate(this.props.formData.end).toDate())
? moment(new Date(this.props.formData.end))
: null;
var tomorrow = toISOString(moment().add(1, 'days').utc().toDate());
var nextWeek = toISOString(moment().add(7, 'days').utc().toDate());
var nextMonth = toISOString(moment().add(1, 'months').utc().toDate());
var nextYear = toISOString(moment().add(1, 'years').utc().toDate());
var tomorrow = moment().add(1, 'days');
var nextWeek = moment().add(7, 'days');
var nextMonth = moment().add(1, 'months');
var nextYear = moment().add(1, 'years');

var until = end;
switch (freq) {
Expand All @@ -495,6 +528,19 @@ class RecurrenceWidget extends Component {
default:
break;
}
if (this.props.formData.end) {
//set default end time
until.set('hour', end.get('hour'));
until.set('minute', end.get('minute'));
}

until = new Date(
until.get('year'),
until.get('month'),
until.get('date'),
until.get('hour'),
until.get('minute'),
);

return until;
};
Expand Down Expand Up @@ -708,9 +754,13 @@ class RecurrenceWidget extends Component {
}
};

save = () => {
saveRrule = () => {
var value = this.state.rruleSet.toString();
this.props.onChange(this.props.id, value);
};

save = () => {
this.saveRrule();
this.close();
};

Expand Down

0 comments on commit 201a3ac

Please sign in to comment.