diff --git a/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.jsx b/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.jsx index 610ecdb49..b6a25e5ee 100644 --- a/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.jsx +++ b/src/projects/detail/components/TalentPickerQuestion/TalentPickerQuestion.jsx @@ -48,6 +48,16 @@ class TalentPickerQuestion extends Component { return v.people !== '0' && v.duration !== '0' && v.skills.length > 0 }) // validation body }, + noPartialFillsExist: (formValues, value) => { + return _.every(value, v => { + const isOneValueFilled = v.people > 0 || v.duration > 0 || (v.skills && v.skills.length) + const isAllValuesFilled = v.people > 0 && v.duration > 0 && v.skills && v.skills.length + + // If one value is filled, all values should be filled to make this row valid. Partial fill is not valid + const isRowValid = !isOneValueFilled || isAllValuesFilled + return isRowValid + }) + } } setValidations(validations) } diff --git a/src/projects/detail/components/TalentPickerRow/TalentPickerRow.jsx b/src/projects/detail/components/TalentPickerRow/TalentPickerRow.jsx index de8ac2dfe..d6ab115be 100644 --- a/src/projects/detail/components/TalentPickerRow/TalentPickerRow.jsx +++ b/src/projects/detail/components/TalentPickerRow/TalentPickerRow.jsx @@ -1,5 +1,6 @@ import React from 'react' import PT from 'prop-types' +import cn from 'classnames' import IconX from '../../../../assets/icons/ui-16px-1_bold-remove.svg' import IconAdd from '../../../../assets/icons/ui-16px-1_bold-add.svg' @@ -21,6 +22,9 @@ class TalentPickerRow extends React.PureComponent { this.handleDurationChange = this.handleDurationChange.bind(this) this.handleSkillChange = this.handleSkillChange.bind(this) + this.resetPeople = this.resetPeople.bind(this) + this.resetDuration = this.resetDuration.bind(this) + this.onAddRow = this.onAddRow.bind(this) this.onDeleteRow = this.onDeleteRow.bind(this) } @@ -37,6 +41,20 @@ class TalentPickerRow extends React.PureComponent { this.props.onChange(this.props.rowIndex, 'skills', value) } + resetDuration() { + const { rowIndex, onChange, value } = this.props + if (!value.duration) { + onChange(rowIndex, 'duration', '0') + } + } + + resetPeople() { + const { rowIndex, onChange, value } = this.props + if (!value.people) { + onChange(rowIndex, 'people', '0') + } + } + onAddRow() { const { rowIndex, value, onAddRow: addRowHandler } = this.props addRowHandler(rowIndex + 1, value.role) @@ -49,6 +67,7 @@ class TalentPickerRow extends React.PureComponent { render() { const { value, canBeDeleted, roleSetting, rowIndex } = this.props + const isRowIncomplete = value.people > 0 || value.duration > 0 || (value.skills && value.skills.length) /* Different columns are defined here and used in componsing mobile/desktop views below */ const roleColumn = ( @@ -83,9 +102,10 @@ class TalentPickerRow extends React.PureComponent { ) @@ -98,9 +118,10 @@ class TalentPickerRow extends React.PureComponent { ) @@ -126,7 +147,7 @@ class TalentPickerRow extends React.PureComponent { setValue={this.handleSkillChange} getValue={() => value.skills} onChange={_.noop} - selectWrapperClass={styles.noMargin} + selectWrapperClass={cn(styles.noMargin, {[styles.skillHasError]: isRowIncomplete && !(value.skills && value.skills.length)})} /> ) diff --git a/src/projects/detail/components/TalentPickerRow/TalentPickerRow.scss b/src/projects/detail/components/TalentPickerRow/TalentPickerRow.scss index a9d868114..dc8d08899 100644 --- a/src/projects/detail/components/TalentPickerRow/TalentPickerRow.scss +++ b/src/projects/detail/components/TalentPickerRow/TalentPickerRow.scss @@ -110,3 +110,12 @@ overflow: hidden; text-overflow: ellipsis; } + + +.skillHasError { + :global { + .react-select__control { + border-color: $tc-red-70; + } + } +}