app/assets/javascripts/components/course_creator/course_dates.jsx
import React from 'react';
import DatePicker from '../common/date_picker.jsx';
import CourseUtils from '../../utils/course_utils.js';
import CourseDateUtils from '../../utils/course_date_utils.js';
const CourseDates = (props) => {
const updateCourseDates = (key, value) => {
const updatedCourse = CourseDateUtils.updateCourseDates(props.course, key, value);
props.updateCourseProps(updatedCourse);
};
const dateProps = CourseDateUtils.dateProps(props.course);
const timeZoneMessage = (
<p className="form-help-text">
{I18n.t('courses.time_zone_message')}
</p>
);
let timelineStart;
let timelineEnd;
let timelineText;
if (props.enableTimeline) {
timelineText = (
<div>
<hr />
<p><strong>{CourseUtils.i18n('creator.separate_event_dates')}</strong></p>
<p>{CourseUtils.i18n('creator.separate_event_dates_info')}</p>
</div>
);
timelineStart = (
<DatePicker
id="course_timeline_start"
onChange={updateCourseDates}
value={props.course.timeline_start}
value_key="timeline_start"
editable
label={CourseUtils.i18n('creator.assignment_start', props.stringPrefix)}
placeholder={I18n.t('courses.creator.assignment_start_placeholder')}
blank
isClearable={true}
showTime={props.showTimeValues}
/>
);
timelineEnd = (
<DatePicker
id="course_timeline_end"
onChange={updateCourseDates}
value={props.course.timeline_end}
value_key="timeline_end"
editable
label={CourseUtils.i18n('creator.assignment_end', props.stringPrefix)}
placeholder={I18n.t('courses.creator.assignment_end_placeholder')}
blank
date_props={dateProps.timeline_end}
enabled={!!props.course.timeline_start}
isClearable={true}
showTime={props.showTimeValues}
/>
);
}
return (
<div className={props.courseDateClass}>
<p>{CourseUtils.i18n('creator.course_dates_info', props.stringPrefix)}</p>
<DatePicker
id="course_start"
onChange={updateCourseDates}
value={props.course.start}
value_key="start"
required
editable
label={CourseUtils.i18n('creator.start_date', props.stringPrefix)}
placeholder={I18n.t('courses.creator.start_date_placeholder')}
blank
isClearable={false}
showTime={props.showTimeValues}
/>
<DatePicker
id="course_end"
onChange={updateCourseDates}
value={props.course.end}
value_key="end"
required
editable
label={CourseUtils.i18n('creator.end_date', props.stringPrefix)}
placeholder={I18n.t('courses.creator.end_date_placeholder')}
blank
date_props={dateProps.end}
enabled={!!props.course.start}
isClearable={false}
showTime={props.showTimeValues}
/>
{timelineText}
{timelineStart}
{timelineEnd}
{props.showTimeValues ? timeZoneMessage : null}
{/* these are only shown when the user has chosen program type as article scoped */}
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: '1em',
}}
>
{props.back && (
<button
onClick={props.back}
id="back"
className="dark button button__submit next"
>
Back
</button>
)}
{props.firstErrorMessage && (
<span
className="red"
style={{
marginLeft: 'auto',
}}
>
{props.firstErrorMessage}
</span>
)}
{props.next && (
<button
onClick={props.next}
id="next"
className="dark button button__submit next"
>
Next
</button>
)}
</div>
</div>
);
};
export default CourseDates;