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;
+ }
+ }
+}