diff --git a/src/components/ChallengeEditor/index.js b/src/components/ChallengeEditor/index.js index 735c7267..0d174e47 100644 --- a/src/components/ChallengeEditor/index.js +++ b/src/components/ChallengeEditor/index.js @@ -139,6 +139,7 @@ class ChallengeEditor extends Component { this.onDeleteChallenge = this.onDeleteChallenge.bind(this) this.deleteModalLaunch = this.deleteModalLaunch.bind(this) this.toggleForumOnCreate = this.toggleForumOnCreate.bind(this) + this.isPhaseEditable = this.isPhaseEditable.bind(this) } componentDidMount () { @@ -1216,6 +1217,22 @@ class ChallengeEditor extends Component { return _.filter(timelineTemplates, tt => availableTemplateIds.indexOf(tt.id) !== -1) } + /** + * Check if current phase is active for edit + */ + isPhaseEditable (phaseIndex) { + const { challenge } = this.state + const { phases, currentPhaseNames } = challenge + + let currentIndex = phases.findIndex((item) => { + return item.name !== 'Registration' && currentPhaseNames.includes(item.name) && item.isOpen + }) + + if (currentIndex === -1 || currentIndex > phaseIndex) return false + + return true + } + render () { const { isLaunch, @@ -1577,15 +1594,17 @@ class ChallengeEditor extends Component { phase={phase} phaseIndex={uuidv4()} readOnly={false} + isActive={this.isPhaseEditable(index)} onUpdatePhase={(item) => { if ((item.startDate && !moment(item.startDate).isSame(phase.scheduledStartDate)) || - (item.endDate && !moment(item.endDate).isSame(phase.scheduledEndDate)) + (item.endDate && !moment(item.endDate).isSame(phase.scheduledEndDate)) ) { this.onUpdatePhaseDate(item, index) } }} /> - )) + ) + ) } )} diff --git a/src/components/DurationInput/DurationInput.module.scss b/src/components/DurationInput/DurationInput.module.scss new file mode 100644 index 00000000..ae127eb2 --- /dev/null +++ b/src/components/DurationInput/DurationInput.module.scss @@ -0,0 +1,8 @@ +@import "../../styles/includes"; + +.durationInput { + &:disabled { + cursor: not-allowed !important; + background-color: $inactive !important; + } +} \ No newline at end of file diff --git a/src/components/DurationInput/index.js b/src/components/DurationInput/index.js index 2a637fd2..ca5d9e63 100644 --- a/src/components/DurationInput/index.js +++ b/src/components/DurationInput/index.js @@ -1,12 +1,14 @@ import React, { useRef } from 'react' import PropTypes from 'prop-types' +import styles from './DurationInput.module.scss' -const DurationInput = ({ duration, onDurationChange, index }) => { +const DurationInput = ({ duration, onDurationChange, index, isActive }) => { const inputRef = useRef(null) return (
{ value={Number(duration).toString()} onChange={e => onDurationChange(e.target.value)} autoFocus={inputRef.current === document.activeElement} + disabled={!isActive} />
) @@ -23,7 +26,8 @@ const DurationInput = ({ duration, onDurationChange, index }) => { DurationInput.propTypes = { duration: PropTypes.string, onDurationChange: PropTypes.func.isRequired, - index: PropTypes.string.isRequired + index: PropTypes.string.isRequired, + isActive: PropTypes.bool.isRequired } export default DurationInput diff --git a/src/components/PhaseInput/PhaseInput.module.scss b/src/components/PhaseInput/PhaseInput.module.scss index c1cf43f1..12ea4720 100644 --- a/src/components/PhaseInput/PhaseInput.module.scss +++ b/src/components/PhaseInput/PhaseInput.module.scss @@ -146,4 +146,9 @@ color: black; } - +.dateTimeInput { + &:disabled { + cursor: not-allowed !important; + background-color: $inactive !important; + } +} diff --git a/src/components/PhaseInput/index.js b/src/components/PhaseInput/index.js index 8e0220d6..ad985f79 100644 --- a/src/components/PhaseInput/index.js +++ b/src/components/PhaseInput/index.js @@ -14,7 +14,7 @@ import DurationInput from '../DurationInput' const dateFormat = 'MM/DD/YYYY HH:mm' const MAX_LENGTH = 5 -const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex }) => { +const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex, isActive }) => { const [startDate, setStartDate] = useState() const [endDate, setEndDate] = useState() const [duration, setDuration] = useState() @@ -86,12 +86,14 @@ const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex }) => { ) : ( { const yesterday = subDays(new Date(), 1) return isAfter(current, yesterday) }} + disabled={!isActive} />)} @@ -104,11 +106,13 @@ const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex }) => { ) : ( { return isAfter(current, new Date(startDate)) }} + disabled={!isActive} />)} @@ -124,6 +128,7 @@ const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex }) => { name={phase.name} onDurationChange={onDurationChange} index={phaseIndex} + isActive={isActive} />} @@ -134,13 +139,15 @@ const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex }) => { PhaseInput.defaultProps = { endDate: null, - readOnly: false + readOnly: false, + isActive: false } PhaseInput.propTypes = { phase: PropTypes.shape().isRequired, onUpdatePhase: PropTypes.func.isRequired, readOnly: PropTypes.bool, - phaseIndex: PropTypes.string.isRequired + phaseIndex: PropTypes.string.isRequired, + isActive: PropTypes.bool } export default PhaseInput