diff --git a/src/projects/detail/components/CreatePhaseForm/CreatePhaseForm.jsx b/src/projects/detail/components/CreatePhaseForm/CreatePhaseForm.jsx index f8a6c0004..79b2901bb 100644 --- a/src/projects/detail/components/CreatePhaseForm/CreatePhaseForm.jsx +++ b/src/projects/detail/components/CreatePhaseForm/CreatePhaseForm.jsx @@ -6,7 +6,7 @@ import PT from 'prop-types' import moment from 'moment' import FormsyForm from 'appirio-tech-react-components/components/Formsy' import FormsySelect from '../../../../components/Select/FormsySelect' -import { MILESTONE_TYPE, MILESTONE_TYPE_OPTIONS } from '../../../../config/constants' +import { MILESTONE_TYPE, MILESTONE_TYPE_OPTIONS, MILESTONE_STATUS } from '../../../../config/constants' import GenericMenu from '../../../../components/GenericMenu' import TrashIcon from '../../../../assets/icons/icon-trash.svg' import styles from './CreatePhaseForm.scss' @@ -122,6 +122,7 @@ class CreatePhaseForm extends React.Component { }) if (publishClicked) { + milestones[0].status= MILESTONE_STATUS.ACTIVE onSubmit('active', phaseData, milestones) } else { onSubmit('draft', phaseData, milestones) @@ -139,23 +140,25 @@ class CreatePhaseForm extends React.Component { milestones } = this.state + + const newMilestones = _.cloneDeep(milestones) // omit phase fields _.forEach(_.keys(_.omit(change, ['title', 'startDate', 'endDate'])), (k) => { const arrs = k.match(/(\w+)_(\d+)/) const arrIndex = arrs[2] const objKey = arrs[1] - if(change[k] && change[k] !== milestones[arrIndex][objKey]) { + if(change[k] !== milestones[arrIndex][objKey]) { // set default title with option type - if (objKey === 'type' && !milestones[arrIndex]['type']) { - milestones[arrIndex]['title'] = this.getOptionType(change[k]) + if (objKey === 'type' && change[k] && !milestones[arrIndex]['title']) { + newMilestones[arrIndex]['title'] = this.getOptionType(change[k]) } - milestones[arrIndex][objKey] = change[k] + newMilestones[arrIndex][objKey] = change[k] } }) - this.setState({milestones}) + this.setState({milestones: newMilestones}) } getOptionType(val) { diff --git a/src/projects/detail/components/CreatePhaseForm/CreatePhaseForm.scss b/src/projects/detail/components/CreatePhaseForm/CreatePhaseForm.scss index d67fb8efe..b92c86416 100644 --- a/src/projects/detail/components/CreatePhaseForm/CreatePhaseForm.scss +++ b/src/projects/detail/components/CreatePhaseForm/CreatePhaseForm.scss @@ -184,9 +184,6 @@ float: initial; } } - div { - padding: 0!important; - } input { width: 100%!important; display: block; diff --git a/src/projects/detail/components/timeline/CreateMilestoneForm/CreateMilestoneForm.jsx b/src/projects/detail/components/timeline/CreateMilestoneForm/CreateMilestoneForm.jsx index 816dffeec..4296658a6 100644 --- a/src/projects/detail/components/timeline/CreateMilestoneForm/CreateMilestoneForm.jsx +++ b/src/projects/detail/components/timeline/CreateMilestoneForm/CreateMilestoneForm.jsx @@ -5,7 +5,7 @@ import React from 'react' import PT from 'prop-types' import moment from 'moment' -import { MILESTONE_TYPE, MILESTONE_TYPE_OPTIONS } from '../../../../../config/constants' +import { MILESTONE_TYPE_OPTIONS } from '../../../../../config/constants' import LoadingIndicator from '../../../../../components/LoadingIndicator/LoadingIndicator' import Form from '../Form' import './CreateMilestoneForm.scss' @@ -14,22 +14,29 @@ class CreateMilestoneForm extends React.Component { constructor(props) { super(props) + const {previousMilestone} = props this.state = { isEditing: false, - type: MILESTONE_TYPE.REPORTING, - title: 'Reporting', - startDate: moment.utc().format('YYYY-MM-DD'), - endDate: moment.utc().add(3, 'days').format('YYYY-MM-DD') + type: '', + title: '', + startDate: moment.utc(previousMilestone.endDate).format('YYYY-MM-DD'), + endDate: moment.utc(previousMilestone.endDate).add(3, 'days').format('YYYY-MM-DD') } this.submitForm = this.submitForm.bind(this) this.cancelEdit = this.cancelEdit.bind(this) this.onAddClick = this.onAddClick.bind(this) + this.changeForm = this.changeForm.bind(this) } cancelEdit() { + const {previousMilestone} = this.props this.setState({ - isEditing: false + isEditing: false, + type: '', + title: '', + startDate: moment.utc(previousMilestone.endDate).format('YYYY-MM-DD'), + endDate: moment.utc(previousMilestone.endDate).add(3, 'days').format('YYYY-MM-DD') }) } @@ -56,6 +63,35 @@ class CreateMilestoneForm extends React.Component { values.blockedText = 'blocked text' onSubmit(values) } + changeForm(values) { + const { type, title, startDate, endDate } = this.state + if (values['name'] !== title) { + this.setState({ + title: values['name'] + }) + } + if (values['startDate'] !== startDate) { + this.setState({ + startDate: values['startDate'] + }) + } + if (values['endDate'] !== endDate) { + this.setState({ + endDate: values['endDate'] + }) + } + // set title when select type and title is empty + if (values['type'] !== type) { + this.setState({ + type: values['type'] + }) + if (!title) { + this.setState({ + title: values['type'] + }) + } + } + } render() { const { isAdding, isEditing, type, title, startDate, endDate } = this.state @@ -76,7 +112,7 @@ class CreateMilestoneForm extends React.Component { fields={[ { label: 'Type', - placeholder: 'Type', + placeholder:'Select Type', options: MILESTONE_TYPE_OPTIONS, name: 'type', value: type, @@ -88,12 +124,7 @@ class CreateMilestoneForm extends React.Component { name: 'name', value: title, type: 'text', - validations: { - isRequired: true - }, - validationError: 'Name is required', }, - { label: 'Start Date', placeholder: 'start date', @@ -119,7 +150,9 @@ class CreateMilestoneForm extends React.Component { ]} onCancelClick={this.cancelEdit} onSubmit={this.submitForm} + onChange={this.changeForm} submitButtonTitle="Create Milestone" + disableSubmitButton={!type} /> ) @@ -133,6 +166,7 @@ class CreateMilestoneForm extends React.Component { CreateMilestoneForm.propTypes = { onSubmit: PT.func.isRequired, + previousMilestone: PT.object.isRequired } export default CreateMilestoneForm diff --git a/src/projects/detail/components/timeline/Timeline/Timeline.jsx b/src/projects/detail/components/timeline/Timeline/Timeline.jsx index 033766c76..d3eb08715 100644 --- a/src/projects/detail/components/timeline/Timeline/Timeline.jsx +++ b/src/projects/detail/components/timeline/Timeline/Timeline.jsx @@ -150,6 +150,7 @@ class Timeline extends React.Component { } else { //Ordering milestones wrt "order" before rendering const orderedMilestones = timeline.milestones ? _.orderBy(timeline.milestones, ['order']) : [] + const allShowMilestones = _.reject(orderedMilestones, { hidden: true }) return (
{ this.div = div } }> - {_.reject(orderedMilestones, { hidden: true }).map((milestone, index) => ( + {allShowMilestones.map((milestone, index) => ( ))}
diff --git a/src/projects/detail/components/timeline/createMilestoneForm/CreateMilestoneForm.jsx b/src/projects/detail/components/timeline/createMilestoneForm/CreateMilestoneForm.jsx index 816dffeec..4296658a6 100644 --- a/src/projects/detail/components/timeline/createMilestoneForm/CreateMilestoneForm.jsx +++ b/src/projects/detail/components/timeline/createMilestoneForm/CreateMilestoneForm.jsx @@ -5,7 +5,7 @@ import React from 'react' import PT from 'prop-types' import moment from 'moment' -import { MILESTONE_TYPE, MILESTONE_TYPE_OPTIONS } from '../../../../../config/constants' +import { MILESTONE_TYPE_OPTIONS } from '../../../../../config/constants' import LoadingIndicator from '../../../../../components/LoadingIndicator/LoadingIndicator' import Form from '../Form' import './CreateMilestoneForm.scss' @@ -14,22 +14,29 @@ class CreateMilestoneForm extends React.Component { constructor(props) { super(props) + const {previousMilestone} = props this.state = { isEditing: false, - type: MILESTONE_TYPE.REPORTING, - title: 'Reporting', - startDate: moment.utc().format('YYYY-MM-DD'), - endDate: moment.utc().add(3, 'days').format('YYYY-MM-DD') + type: '', + title: '', + startDate: moment.utc(previousMilestone.endDate).format('YYYY-MM-DD'), + endDate: moment.utc(previousMilestone.endDate).add(3, 'days').format('YYYY-MM-DD') } this.submitForm = this.submitForm.bind(this) this.cancelEdit = this.cancelEdit.bind(this) this.onAddClick = this.onAddClick.bind(this) + this.changeForm = this.changeForm.bind(this) } cancelEdit() { + const {previousMilestone} = this.props this.setState({ - isEditing: false + isEditing: false, + type: '', + title: '', + startDate: moment.utc(previousMilestone.endDate).format('YYYY-MM-DD'), + endDate: moment.utc(previousMilestone.endDate).add(3, 'days').format('YYYY-MM-DD') }) } @@ -56,6 +63,35 @@ class CreateMilestoneForm extends React.Component { values.blockedText = 'blocked text' onSubmit(values) } + changeForm(values) { + const { type, title, startDate, endDate } = this.state + if (values['name'] !== title) { + this.setState({ + title: values['name'] + }) + } + if (values['startDate'] !== startDate) { + this.setState({ + startDate: values['startDate'] + }) + } + if (values['endDate'] !== endDate) { + this.setState({ + endDate: values['endDate'] + }) + } + // set title when select type and title is empty + if (values['type'] !== type) { + this.setState({ + type: values['type'] + }) + if (!title) { + this.setState({ + title: values['type'] + }) + } + } + } render() { const { isAdding, isEditing, type, title, startDate, endDate } = this.state @@ -76,7 +112,7 @@ class CreateMilestoneForm extends React.Component { fields={[ { label: 'Type', - placeholder: 'Type', + placeholder:'Select Type', options: MILESTONE_TYPE_OPTIONS, name: 'type', value: type, @@ -88,12 +124,7 @@ class CreateMilestoneForm extends React.Component { name: 'name', value: title, type: 'text', - validations: { - isRequired: true - }, - validationError: 'Name is required', }, - { label: 'Start Date', placeholder: 'start date', @@ -119,7 +150,9 @@ class CreateMilestoneForm extends React.Component { ]} onCancelClick={this.cancelEdit} onSubmit={this.submitForm} + onChange={this.changeForm} submitButtonTitle="Create Milestone" + disableSubmitButton={!type} /> ) @@ -133,6 +166,7 @@ class CreateMilestoneForm extends React.Component { CreateMilestoneForm.propTypes = { onSubmit: PT.func.isRequired, + previousMilestone: PT.object.isRequired } export default CreateMilestoneForm diff --git a/src/projects/detail/containers/DashboardContainer.scss b/src/projects/detail/containers/DashboardContainer.scss index 5b72f2ab6..e69de29bb 100644 --- a/src/projects/detail/containers/DashboardContainer.scss +++ b/src/projects/detail/containers/DashboardContainer.scss @@ -1,318 +0,0 @@ -@import '../../../styles/includes'; -@import '~tc-ui/src/styles/tc-includes'; - -.add-button-container { - text-align: center; - margin-top: 10px; -} - - -.form { - > .title-label-layer { - padding: 0 10px; - - + div { - padding: 0 10px; - } - - } -} - -.label-layer:nth-child(4) > :global(.Tooltip) { - width: 50%; - float: left; - .input-row { - width: 100%; - } -} - - -.input-row { - display: inline-block; - width: 50%; - - :global { - - .dropdown-wrap { - width: auto; - margin-left: 0px; - } - - .error-message { - width:calc(100% - 170px)!important; - margin: -5px 0 10px; - float: right; - } - - } - input { - display: inline-block; - width:calc(100% - 170px)!important; - } - - - label { - float: left; - margin: 0px 10px 10px; - text-align: right; - height: 40px; - line-height: 40px; - white-space: nowrap; - display: block; - width: 150px; - - } - - input:not([type="checkbox"]):disabled { - padding: 0; - } - :global(.SelectDropdown:not(.dropdown-wrap)) { - position: relative; - top: 12px; - } - - .input { - &::-webkit-input-placeholder { - text-transform: initial; - color:$tc-gray-30; - font-size: 15px; - font-weight: 400; - } - &:-moz-placeholder { - text-transform: initial; - color:$tc-gray-30; - font-size: 15px; - font-weight: 400; - } - &::-moz-placeholder { - text-transform: initial; - color:$tc-gray-30; - font-size: 15px; - font-weight: 400; - } - &:-ms-input-placeholder { - text-transform: initial; - color:$tc-gray-30; - font-size: 15px; - font-weight: 400; - } - } -} - -.title-label-layer { - .input-row { - width: 100%; - input { - display: inline-block; - width:calc(100% - 170px); - } - label { - display: inline-block; - width: 150px; - } - } -} - -.group-bottom { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: center; - align-items: center; - margin-top: 20px; - padding-bottom: 20px; - - button { - margin: 0 5px 0 5px; - &.disable { - opacity: 0.5; - } - } -} - -.message { - background-color: $tc-red-10; - padding: 4 * $base-unit 4 * $base-unit 0 4 * $base-unit; - text-align: center; - - .message-title { - @include roboto-bold; - color: $tc-red-100; - font-size: 15px; - } - - .message-text { - @include roboto; - font-size: 13px; - line-height: 20px; - margin-top: 2 * $base-unit; - } -} - -// screen < 1024px -@media screen and (max-width: 1023px) { - .label-layer:nth-child(4) > :global(.Tooltip) { - width: 100%; - float: none; - .input-row { - width: 100%; - - } - } - .label-layer, - .input-row { - display: block; - width: 100%; - input:not([type="checkbox"]):disabled { - width: 100%; - } - :global(.SelectDropdown:not(.dropdown-wrap)) { - width: 100%; - position: relative; - top: 0; - } - :global { - .dropdown-wrap { - width: 100%; - margin-left: 0px; - height: 40px; - div { - padding: 0 5px!important; - } - } - - .error-message { - width: 100% !important; - float: initial; - } - } - div { - padding: 0!important; - } - input { - width: 100%!important; - display: block; - } - label { - width: 100%; - display: block; - text-align: left; - margin: 0; - float: none; - } - } - .title-label-layer { - display: block; - .input-row { - width: 100%; - display: block; - input { - width: 100%!important; - display: block; - } - label { - float: none; - width: 100%; - display: block; - margin: 0; - text-align: left; - } - } - } -} - -.tab-container { - border-top: 1px solid $tc-gray-10; - border-bottom: 1px solid $tc-gray-10; - - + div > div:first-child { - &::before { - visibility: hidden; - } - } -} - -.milestone-item { - position: relative; - margin: 0 10px; - - &::before { - content: ''; - height: 1px; - background-color: $tc-gray-10; - display: block; - margin: 0px -10px 10px; - } - - > div { - width: 90%; - } - - > i { - position: absolute; - top: 20px; - right: 17px; - cursor: pointer; - } -} - -.add-milestone-wrapper { - text-align: center; - padding: 10px 0 30px; - border-bottom: 1px solid #aaaaab; -} - -.add-phase-form { - margin-top: 10px; - padding-top: 10px; - background-color: $tc-white; - border-radius: 6px; - box-shadow: 0 1px 1px 0 $tc-gray-10; - - @media screen and (max-width: $screen-md - 1px) { - border-radius: 0; - } -} - -.add-milestone-form { - margin-top: 10px; - - .input-row { - width: 100%; - } - - > div > div:first-child { - margin-bottom: 10px; - > div { - display: initial; - >div:first-child { - float: left; - margin: 0px 10px 10px; - text-align: right; - height: 40px; - line-height: 40px; - white-space: nowrap; - display: block; - width: 150px; - - @media screen and (max-width: 1023px) { - margin: initial; - > div { - text-align:left; - } - } - } - >div:last-child { - display: inline-block; - width: calc(100% - 170px) !important; - - @media screen and (max-width: 1023px) { - width: 100% !important; - } - } - - } - - - } -}