fix issue 1329

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)
                           }
                         }}
                       />
-                    ))
+                    )
+                    )
                   }
                 </>
             )}

src/components/DurationInput/DurationInput.module.scss

@@ -0,0 +1,8 @@
+@import "../../styles/includes";
+
+.durationInput {
+  &:disabled {
+    cursor: not-allowed !important;
+    background-color: $inactive !important;
+  }
+}

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 (
     <div key={`duration-${index}-edit`}>
       <input
+        className={styles.durationInput}
         id={`duration-${index}`}
         key={`duration-${index}`}
         ref={inputRef}
@@ -15,6 +17,7 @@ const DurationInput = ({ duration, onDurationChange, index }) => {
         value={Number(duration).toString()}
         onChange={e => onDurationChange(e.target.value)}
         autoFocus={inputRef.current === document.activeElement}
+        disabled={!isActive}
       />
     </div>
   )
@@ -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

src/components/PhaseInput/PhaseInput.module.scss

@@ -146,4 +146,9 @@
   color: black;
 }
 
-
+.dateTimeInput {
+  &:disabled {
+    cursor: not-allowed !important;
+    background-color: $inactive !important;
+  }
+}

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 }) => {
               )
                 : (
                   <DateTime
+                    className={styles.dateTimeInput}
                     value={moment(startDate).format(dateFormat)}
                     onChange={onStartDateChange}
                     isValidDate={(current) => {
                       const yesterday = subDays(new Date(), 1)
                       return isAfter(current, yesterday)
                     }}
+                    disabled={!isActive}
                   />)}
           </div>
         </div>
@@ -104,11 +106,13 @@ const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex }) => {
               )
                 : (
                   <DateTime
+                    className={styles.dateTimeInput}
                     value={moment(endDate).format(dateFormat)}
                     onChange={onEndDateChange}
                     isValidDate={(current) => {
                       return isAfter(current, new Date(startDate))
                     }}
+                    disabled={!isActive}
                   />)}
           </div>
         </div>
@@ -124,6 +128,7 @@ const PhaseInput = ({ onUpdatePhase, phase, readOnly, phaseIndex }) => {
                   name={phase.name}
                   onDurationChange={onDurationChange}
                   index={phaseIndex}
+                  isActive={isActive}
                 />}
           </div>
         </div>
@@ -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