+ const getEndDate = (startDate, duration) => moment(startDate).add(duration, 'hours').format(dateFormat)
+
+ const onStartDateChange = (e) => {
+ let startDate = moment(e).format(dateFormat)
+ let endDate = getEndDate(startDate, duration)
+ onUpdatePhase({
+ startDate,
+ endDate,
+ duration
+ })
+ }
+
+ const onDurationChange = (e, isBlur = false) => {
+ if (e.length > MAX_LENGTH) return null
+
+ let duration = parseInt(e || 0)
+ let endDate = getEndDate(startDate, duration)
+ onUpdatePhase({
+ startDate,
+ endDate,
+ duration,
+ isBlur
+ })
+ }
+
+ return (
+
+
+
+
+
+
+
Start Date:
+
{
- withDates && (
-
- {readOnly ? (
- {date}
- ) : ( onUpdatePhase(moment(`${moment(selectedDay).format(dateFormat)} ${time.format(timeFormat)}`, `${dateFormat} ${timeFormat}`))} format={dateFormat} />)}
-
+ readOnly || !isStartTimeActive ? (
+
{moment(startDate).format(dateFormat)}
)
- }
- {
- withDates && (
-
- {readOnly ? (
- {time.format(timeFormat)}
- ) : ( onUpdatePhase(value)}
+ : (
+ {
+ const yesterday = subDays(new Date(), 1)
+ return isAfter(current, yesterday)
+ }}
+ dateFormat={inputDateFormat}
+ timeFormat={inputTimeFormat}
/>)}
-
- )
- }
- {
- withDuration && (
-
- {readOnly ? (
- {phase.duration}
- ) : ( onUpdatePhase(e.target.value)} min={1} placeholder='Duration (hours)' />)}
-
- )
- }
- {
- !_.isEmpty(phase.scorecards) && (
-
-
- )
- }
+
+
+
+
End Date:
+
+ {moment(endDate).format(dateFormat)}
+
+
+
+
Duration:
+
+ {readOnly ? (
+ {duration}
+ ) : (
+
+ )}
- )
- }
+
+ )
}
PhaseInput.defaultProps = {
- withDates: false,
- withDuration: false,
endDate: null,
readOnly: false
}
PhaseInput.propTypes = {
phase: PropTypes.shape().isRequired,
- onUpdateSelect: PropTypes.func,
- onUpdatePhase: PropTypes.func.isRequired,
- withDates: PropTypes.bool,
- withDuration: PropTypes.bool,
- endDate: PropTypes.shape(),
- readOnly: PropTypes.bool
+ onUpdatePhase: PropTypes.func,
+ readOnly: PropTypes.bool,
+ phaseIndex: PropTypes.number.isRequired
}
export default PhaseInput
diff --git a/src/components/StartDateInput/StartDateInput.module.scss b/src/components/StartDateInput/StartDateInput.module.scss
new file mode 100644
index 00000000..e16fc96b
--- /dev/null
+++ b/src/components/StartDateInput/StartDateInput.module.scss
@@ -0,0 +1,129 @@
+@import "../../styles/includes";
+
+:global {
+ div[data-reach-popover] {
+ z-index: 10;
+ }
+}
+
+.container {
+ display: flex;
+}
+
+.row {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ margin: 30px 30px 0 30px;
+ align-content: space-between;
+ justify-content: flex-start;
+
+ .field {
+ @include upto-sm {
+ display: block;
+ padding-bottom: 10px;
+ }
+
+ label {
+ @include roboto-bold();
+
+ font-size: 16px;
+ line-height: 19px;
+ font-weight: 500;
+ color: $tc-gray-80;
+ }
+
+ &.col1 {
+ max-width: 185px;
+ min-width: 185px;
+ margin-right: 14px;
+ margin-bottom: auto;
+ margin-top: auto;
+ white-space: nowrap;
+ display: flex;
+ align-items: center;
+ }
+
+ &.phaseName {
+ flex-direction: column;
+ align-items: flex-start;
+
+ .previewDates {
+ font-size: 13px;
+ display: flex;
+ color: $red;
+ font-weight: 300;
+
+ span {
+ color: $dark-gray;
+ margin-right: 10px;
+ }
+ }
+ }
+
+ &.col2 {
+ align-self: flex-end;
+ margin-bottom: auto;
+ margin-top: auto;
+ display: flex;
+ flex-direction: row;
+
+ input {
+ border-radius: 2px;
+ }
+
+ .dayPicker {
+ width: 180px;
+ margin-right: 30px;
+
+ :global {
+ .DayPickerInput {
+ width: 100%;
+ }
+ .DayPickerInput-OverlayWrapper {
+ z-index: 10;
+ }
+ }
+
+ input {
+ width: 100%;
+ }
+ }
+
+ .timePicker {
+ width: 90px;
+
+ input {
+ width: 100%;
+ }
+
+ :global {
+ .rc-time-picker-clear {
+ top: 9px;
+ }
+ }
+ }
+
+ .durationPicker {
+ width: 180px;
+ }
+
+ .scorecards {
+ width: 190px;
+ margin-left: 30px;
+ }
+
+ :global{
+ .rc-time-picker-clear{
+ display: none;
+ }
+ }
+ }
+ }
+}
+
+.readOnlyValue {
+ color: black;
+}
+
+
diff --git a/src/components/StartDateInput/index.js b/src/components/StartDateInput/index.js
new file mode 100644
index 00000000..82c3d6fd
--- /dev/null
+++ b/src/components/StartDateInput/index.js
@@ -0,0 +1,141 @@
+import _ from 'lodash'
+import moment from 'moment-timezone'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import styles from './StartDateInput.module.scss'
+import cn from 'classnames'
+import 'react-day-picker/lib/style.css'
+import 'rc-time-picker/assets/index.css'
+import Select from '../Select'
+import DateTime from '@nateradebaugh/react-datetime'
+import isAfter from 'date-fns/isAfter'
+import subDays from 'date-fns/subDays'
+import '@nateradebaugh/react-datetime/scss/styles.scss'
+
+const dateFormat = 'MM/DD/YYYY HH:mm'
+// const tcTimeZone = 'America/New_York'
+
+class StartDateInput extends Component {
+ constructor (props) {
+ super(props)
+
+ this.onDateChange = this.onDateChange.bind(this)
+ }
+
+ onDateChange (e) {
+ const { onUpdatePhase } = this.props
+
+ onUpdatePhase(moment(e, dateFormat))
+ }
+
+ render () {
+ const { phase, onUpdateSelect, onUpdatePhase, withDates, withDuration, endDate, readOnly } = this.props
+ if (_.isEmpty(phase)) return null
+
+ const date = moment(phase.date).format(dateFormat)
+
+ return (
+
+
+
+
+ {
+ withDuration && endDate && (
+
+ Ends:
+ {moment(endDate).local().format(`${dateFormat}`)}
+
+ )
+ }
+
+
+ {
+ withDates && (
+
+ {
+ readOnly ? (
+ {date}
+ )
+ : (
+ {
+ const yesterday = subDays(new Date(), 1)
+ return isAfter(current, yesterday)
+ }}
+ />)}
+
+ )
+ }
+ {/* {
+ withDates && (
+
+ {readOnly ? (
+ {date}
+ ) : ( onUpdatePhase(moment(`${moment(selectedDay).format(dateFormat)} ${time.format(timeFormat)}`, `${dateFormat} ${timeFormat}`))} format={dateFormat} />)}
+
+ )
+ }
+ {
+ withDates && (
+
+ {readOnly ? (
+ {time.format(timeFormat)}
+ ) : ( onUpdatePhase(value)}
+ />)}
+
+ )
+ } */}
+ {
+ withDuration && (
+
+ {readOnly ? (
+ {phase.duration}
+ ) : ( onUpdatePhase(e.target.value)} min={1} placeholder='Duration (hours)' />)}
+
+ )
+ }
+ {
+ !_.isEmpty(phase.scorecards) && (
+
+
+ )
+ }
+
+
+
+ )
+ }
+}
+
+StartDateInput.defaultProps = {
+ withDates: false,
+ withDuration: false,
+ endDate: null,
+ readOnly: false
+}
+
+StartDateInput.propTypes = {
+ phase: PropTypes.shape().isRequired,
+ onUpdateSelect: PropTypes.func,
+ onUpdatePhase: PropTypes.func.isRequired,
+ withDates: PropTypes.bool,
+ withDuration: PropTypes.bool,
+ endDate: PropTypes.shape(),
+ readOnly: PropTypes.bool
+}
+export default StartDateInput
diff --git a/src/util/date.js b/src/util/date.js
index b5017f29..32e2733c 100644
--- a/src/util/date.js
+++ b/src/util/date.js
@@ -109,6 +109,11 @@ export const updateChallengePhaseBeforeSendRequest = (challengeDetail) => {
const hourToSecond = 60 * 60
if (challengeDetail.phases) {
const challengeDetailTmp = _.cloneDeep(challengeDetail)
+ challengeDetailTmp.startDate = moment(challengeDetail.phases[0].scheduledStartDate)
+ // challengeDetailTmp.registrationStartDate = moment(challengeDetail.phases[0].scheduledStartDate)
+ // challengeDetailTmp.registrationEndDate = moment(challengeDetail.phases[0].scheduledEndDate)
+ // challengeDetailTmp.submissionStartDate = moment(challengeDetail.phases[1].scheduledStartDate)
+ // challengeDetailTmp.submissionEndDate = moment(challengeDetail.phases[1].scheduledEndDate)
challengeDetailTmp.phases = challengeDetailTmp.phases.map((p) => ({
duration: p.duration * hourToSecond,
phaseId: p.phaseId