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 (