Issue #1319: add phases

src/components/ChallengeEditor/ChallengeSchedule-Field/index.js

@@ -6,7 +6,7 @@ import $ from 'jquery'
 import styles from './ChallengeSchedule-Field.module.scss'
 import cn from 'classnames'
 import jstz from 'jstimezonedetect'
-import PhaseInput from '../../PhaseInput'
+import StartDateInput from '../../StartDateInput'
 import Chart from 'react-google-charts'
 import Select from '../../Select'
 import { parseSVG } from '../../../util/svg'
@@ -183,7 +183,7 @@ class ChallengeScheduleField extends Component {
     return (
       _.map(challenge.phases, (p, index) => (
         <div className={styles.PhaseRow} key={index}>
-          <PhaseInput
+          <StartDateInput
             phase={this.getPhaseTemplate(p)}
             withDuration
             onUpdateSelect={onUpdateSelect}
@@ -345,7 +345,7 @@ class ChallengeScheduleField extends Component {
           </div>
         </div> }
         <div className={styles.PhaseRow}>
-          <PhaseInput
+          <StartDateInput
             withDates
             phase={{
               name: 'Start Date',

src/components/ChallengeEditor/ChallengeView/index.js

@@ -16,12 +16,13 @@ import ChallengePrizesField from '../ChallengePrizes-Field'
 import CopilotFeeField from '../CopilotFee-Field'
 import ChallengeTotalField from '../ChallengeTotal-Field'
 import Loader from '../../Loader'
-import PhaseInput from '../../PhaseInput'
 import AssignedMemberField from '../AssignedMember-Field'
 import { getResourceRoleByName } from '../../../util/tc'
 import { isBetaMode } from '../../../util/cookie'
 import { loadGroupDetails } from '../../../actions/challenges'
 import { REVIEW_TYPES, CONNECT_APP_URL, PHASE_PRODUCT_CHALLENGE_ID_FIELD } from '../../../config/constants'
+import PhaseInput from '../../PhaseInput'
+import { v4 as uuidv4 } from 'uuid'
 
 const ChallengeView = ({
   projectDetail,
@@ -90,6 +91,7 @@ const ChallengeView = ({
   if (isLoading || _.isEmpty(metadata.challengePhases) || challenge.id !== challengeId) return <Loader />
   const showTimeline = false // disables the timeline for time being https://github.com/topcoder-platform/challenge-engine-ui/issues/706
   const isTask = _.get(challenge, 'task.isTask', false)
+  const phases = _.get(challenge, 'phases', [])
 
   return (
     <div className={styles.wrapper}>
@@ -188,16 +190,13 @@ const ChallengeView = ({
               </>
             )}
             {
-              <div className={styles.PhaseRow}>
+              phases.map((phase) => (
                 <PhaseInput
-                  withDates
-                  phase={{
-                    name: 'Start Date',
-                    date: challenge.startDate
-                  }}
+                  phase={phase}
+                  phaseIndex={uuidv4()}
                   readOnly
                 />
-              </div>
+              ))
             }
             {showTimeline && (
               <ChallengeScheduleField

src/components/ChallengeEditor/index.js

@@ -4,11 +4,12 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Helmet } from 'react-helmet'
 import cn from 'classnames'
-import moment from 'moment'
+import moment from 'moment-timezone'
 import { pick } from 'lodash/fp'
 import { withRouter } from 'react-router-dom'
 import { toastr } from 'react-redux-toastr'
 import xss from 'xss'
+import { v4 as uuidv4 } from 'uuid'
 
 import {
   VALIDATION_VALUE_TYPE,
@@ -810,6 +811,15 @@ class ChallengeEditor extends Component {
     this.setState({ challenge: newChallenge })
   }
 
+  onUpdatePhaseDate (phase, index) {
+    let newChallenge = _.cloneDeep(this.state.challenge)
+    const hourToSecond = 60 * 60
+    newChallenge.phases[index]['duration'] = phase.duration / hourToSecond
+    newChallenge.phases[index]['scheduledStartDate'] = phase.scheduledStartDate
+    newChallenge.phases[index]['scheduledEndDate'] = phase.scheduledEndDate
+    this.setState({ challenge: newChallenge })
+  }
+
   collectChallengeData (status) {
     const { attachments, metadata } = this.props
     const challenge = pick([
@@ -1280,7 +1290,7 @@ class ChallengeEditor extends Component {
     let closeTaskModal = null
     let draftModal = null
 
-    let { type } = challenge
+    let { type, phases = [] } = challenge
     if (!type) {
       const { typeId } = challenge
       if (typeId && metadata.challengeTypes) {
@@ -1561,20 +1571,24 @@ class ChallengeEditor extends Component {
               </React.Fragment>
             )}
             {!isTask && (
-              <div className={styles.PhaseRow}>
-                <PhaseInput
-                  withDates
-                  phase={{
-                    name: 'Start Date',
-                    date: challenge.startDate
-                  }}
-                  onUpdatePhase={newValue => this.onUpdateOthers({
-                    field: 'startDate',
-                    value: newValue.format()
-                  })}
-                  readOnly={false}
-                />
-              </div>
+                <>
+                  {
+                    phases.map((phase, index) => (
+                      <PhaseInput
+                        phase={phase}
+                        phaseIndex={uuidv4()}
+                        readOnly={false}
+                        onUpdatePhase={(item) => {
+                          if ((item.startDate && !moment(item.startDate).isSame(phase.scheduledStartDate)) ||
+                          (item.endDate && !moment(item.endDate).isSame(phase.scheduledEndDate))
+                          ) {
+                            this.onUpdatePhaseDate(item, index)
+                          }
+                        }}
+                      />
+                    ))
+                  }
+                </>
             )}
             {
               this.state.isDeleteLaunch && !this.state.isConfirm && (

src/components/PhaseInput/PhaseInput.module.scss

@@ -8,16 +8,26 @@
 
 .container {
   display: flex;
+  margin-bottom: 10px;
 }
 
 .row {
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
-  margin: 30px 30px 0 30px;
+  margin: 20px 30px 0 30px;
   align-content: space-between;
   justify-content: flex-start;
 
+  .title {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    margin-right: 10px;
+    font-size: 14px;
+    font-weight: 300;
+  }
+
   .field {
     @include upto-sm {
       display: block;
@@ -47,6 +57,7 @@
     &.phaseName {
       flex-direction: column;
       align-items: flex-start;
+      font-weight: bold;
 
       .previewDates {
         font-size: 13px;
@@ -73,7 +84,7 @@
       }
 
       .dayPicker {
-        width: 180px;
+        width: 200px;
         margin-right: 30px;
 
         :global {
@@ -90,6 +101,15 @@
         }
       }
 
+      .inputField {
+        margin-right: 30px;
+        width: 80px;
+
+        input {
+          padding: 0 0 0 10px;
+        }
+      }
+
       .timePicker {
         width: 90px;