|
| 1 | +import React, { Component, PropTypes } from 'react' |
| 2 | +import _ from 'lodash' |
| 3 | +import { HOC as hoc } from 'formsy-react' |
| 4 | +import cn from 'classnames' |
| 5 | + |
| 6 | +import TalentPickerRowV2 from '../TalentPickerRow/TalentPickerRowV2' |
| 7 | +import './TalentPickerQuestion.scss' |
| 8 | + |
| 9 | +class TalentPickerQuestionV2 extends Component { |
| 10 | + |
| 11 | + constructor(props) { |
| 12 | + super(props) |
| 13 | + |
| 14 | + this.state = { |
| 15 | + options: [] |
| 16 | + } |
| 17 | + |
| 18 | + this.getDefaultValue = this.getDefaultValue.bind(this) |
| 19 | + this.handleValueChange = this.handleValueChange.bind(this) |
| 20 | + |
| 21 | + this.insertRole = this.insertRole.bind(this) |
| 22 | + this.removeRole = this.removeRole.bind(this) |
| 23 | + this.canDeleteRole = this.canDeleteRole.bind(this) |
| 24 | + this.setValidator(props) |
| 25 | + } |
| 26 | + |
| 27 | + componentWillReceiveProps(nextProps) { |
| 28 | + this.setValidator(nextProps) |
| 29 | + |
| 30 | + |
| 31 | + if (!_.isEqual(this.props.options, nextProps.options)) { |
| 32 | + this.updateOptions(nextProps) |
| 33 | + } |
| 34 | + } |
| 35 | + |
| 36 | + componentDidMount() { |
| 37 | + this.updateOptions(this.props) |
| 38 | + } |
| 39 | + |
| 40 | + setValidator(props) { |
| 41 | + const { setValidations, required } = props |
| 42 | + const validations = { |
| 43 | + oneRowHaveValidValue: (formValues, value) => { |
| 44 | + if (!required) { |
| 45 | + return true |
| 46 | + } |
| 47 | + return _.some(value, (v) => { |
| 48 | + return v.people !== '0' && v.duration !== '0' && v.skills.length > 0 && v.workLoad.value !== null && v.jobDescription.length |
| 49 | + }) // validation body |
| 50 | + }, |
| 51 | + noPartialFillsExist: (formValues, value) => { |
| 52 | + return _.every(value, v => { |
| 53 | + |
| 54 | + const isOneValueFilled = v.people > 0 || v.duration > 0 || (v.skills && v.skills.length) || (v.jobDescription && v.jobDescription.length) || (v.workLoad && v.workLoad.value !== null) |
| 55 | + const isAllValuesFilled = v.people > 0 && v.duration > 0 && v.skills && v.skills.length && v.jobDescription.length && v.workLoad.value !== null |
| 56 | + // If one value is filled, all values should be filled to make this row valid. Partial fill is not valid |
| 57 | + const isRowValid = !isOneValueFilled || isAllValuesFilled |
| 58 | + return isRowValid |
| 59 | + }) |
| 60 | + } |
| 61 | + } |
| 62 | + setValidations(validations) |
| 63 | + } |
| 64 | + |
| 65 | + updateOptions(props) { |
| 66 | + const options = props.options.map(o => ({...o, skillsCategories: o.skillsCategory ? [ o.skillsCategory ] : null})) |
| 67 | + this.setState({ options }) |
| 68 | + } |
| 69 | + |
| 70 | + getDefaultValue() { |
| 71 | + const { options } = this.props |
| 72 | + return options.map((o) => ({ |
| 73 | + role: o.role, |
| 74 | + people: '0', |
| 75 | + duration: '0', |
| 76 | + skills: [], |
| 77 | + additionalSkills: [], |
| 78 | + workLoad: { value: null, title: 'Select Workload'}, |
| 79 | + jobDescription: '' |
| 80 | + })) |
| 81 | + } |
| 82 | + |
| 83 | + onChange(value) { |
| 84 | + const {setValue, name} = this.props |
| 85 | + |
| 86 | + setValue(value) |
| 87 | + this.props.onChange(name, value) |
| 88 | + } |
| 89 | + |
| 90 | + handleValueChange(index, field, value) { |
| 91 | + const { getValue } = this.props |
| 92 | + let values = getValue() || this.getDefaultValue() |
| 93 | + values = [...values.slice(0, index), { ...values[index], [field]: value }, ...values.slice(index + 1)] |
| 94 | + |
| 95 | + this.onChange(values) |
| 96 | + } |
| 97 | + |
| 98 | + insertRole(index, role) { |
| 99 | + const { getValue } = this.props |
| 100 | + let values = getValue() || this.getDefaultValue() |
| 101 | + |
| 102 | + values = [ |
| 103 | + ...values.slice(0, index), |
| 104 | + { |
| 105 | + role, |
| 106 | + people: '0', |
| 107 | + duration: '0', |
| 108 | + skills: [], |
| 109 | + additionalSkills: [], |
| 110 | + workLoad: { value: null, title: 'Select Workload'}, |
| 111 | + jobDescription: '', |
| 112 | + }, |
| 113 | + ...values.slice(index) |
| 114 | + ] |
| 115 | + this.onChange(values) |
| 116 | + } |
| 117 | + |
| 118 | + removeRole(index) { |
| 119 | + const { getValue } = this.props |
| 120 | + let values = getValue() || this.getDefaultValue() |
| 121 | + values = [...values.slice(0, index), ...values.slice(index + 1)] |
| 122 | + this.onChange(values) |
| 123 | + } |
| 124 | + |
| 125 | + canDeleteRole(role, index) { |
| 126 | + const { getValue } = this.props |
| 127 | + const values = getValue() || this.getDefaultValue() |
| 128 | + return _.findIndex(values, { role }) !== index |
| 129 | + } |
| 130 | + |
| 131 | + render() { |
| 132 | + const { wrapperClass, getValue } = this.props |
| 133 | + const { options } = this.state |
| 134 | + |
| 135 | + const errorMessage = |
| 136 | + this.props.getErrorMessage() || this.props.validationError |
| 137 | + const hasError = !this.props.isPristine() && !this.props.isValid() |
| 138 | + |
| 139 | + const values = getValue() || this.getDefaultValue() |
| 140 | + |
| 141 | + return ( |
| 142 | + <div className={cn(wrapperClass)}> |
| 143 | + <div styleName="container"> |
| 144 | + {options.length > 0 ? values.map((v, roleIndex) => { |
| 145 | + const roleSetting = _.find(options, { role: v.role }) |
| 146 | + return ( |
| 147 | + <TalentPickerRowV2 |
| 148 | + key={roleIndex} |
| 149 | + rowIndex={roleIndex} |
| 150 | + value={v} |
| 151 | + canBeDeleted={this.canDeleteRole} |
| 152 | + roleSetting={roleSetting} |
| 153 | + onChange={this.handleValueChange} |
| 154 | + onDeleteRow={this.removeRole} |
| 155 | + onAddRow={this.insertRole} |
| 156 | + /> |
| 157 | + ) |
| 158 | + }) : null} |
| 159 | + </div> |
| 160 | + {hasError ? <p className="error-message">{errorMessage}</p> : null} |
| 161 | + </div> |
| 162 | + ) |
| 163 | + } |
| 164 | +} |
| 165 | + |
| 166 | +TalentPickerQuestionV2.PropTypes = { |
| 167 | + options: PropTypes.arrayOf( |
| 168 | + PropTypes.shape({ |
| 169 | + role: PropTypes.string.isRequired, |
| 170 | + skillsCategory: PropTypes.string.isRequired, |
| 171 | + roleTitle: PropTypes.string.isRequired, |
| 172 | + disabled: PropTypes.bool, |
| 173 | + }) |
| 174 | + ).isRequired, |
| 175 | + onChange: PropTypes.func, |
| 176 | +} |
| 177 | + |
| 178 | +TalentPickerQuestionV2.defaultProps = { |
| 179 | + onChange: _.noop |
| 180 | +} |
| 181 | + |
| 182 | +export default hoc(TalentPickerQuestionV2) |
0 commit comments