2017-11-15 09:49:55 +00:00
|
|
|
import React, { Component } from 'react'
|
2017-11-22 14:31:29 +00:00
|
|
|
import { rules, findRuleByName } from 'Engine/rules'
|
2017-12-20 16:49:58 +00:00
|
|
|
import { reject, curry, pipe, equals, filter, contains, length } from 'ramda'
|
2017-11-15 09:49:55 +00:00
|
|
|
import { Link } from 'react-router-dom'
|
2017-11-16 17:11:42 +00:00
|
|
|
import './TargetSelection.css'
|
2017-11-15 09:49:55 +00:00
|
|
|
|
2017-12-19 16:09:17 +00:00
|
|
|
export let salaries = ['salaire net', 'salaire de base', 'salaire total']
|
2017-12-07 14:19:51 +00:00
|
|
|
|
2017-11-15 09:49:55 +00:00
|
|
|
export default class TargetSelection extends Component {
|
|
|
|
state = {
|
2017-11-16 09:29:11 +00:00
|
|
|
targets: []
|
2017-11-15 09:49:55 +00:00
|
|
|
}
|
|
|
|
render() {
|
|
|
|
let { targets } = this.state
|
|
|
|
|
|
|
|
return (
|
2017-11-16 17:11:42 +00:00
|
|
|
<section id="targetSelection">
|
2017-12-19 16:09:17 +00:00
|
|
|
<h1>Que voulez-vous calculer ?</h1>
|
2017-11-15 09:49:55 +00:00
|
|
|
{this.renderOutputList()}
|
2017-12-19 16:09:17 +00:00
|
|
|
<div
|
|
|
|
id="action"
|
|
|
|
style={{ visibility: !targets.length ? 'hidden' : 'visible' }}
|
|
|
|
>
|
|
|
|
<p>Vous pouvez faire plusieurs choix</p>
|
|
|
|
<Link to={'/simu/' + targets.join('+')}>
|
2017-12-19 19:01:42 +00:00
|
|
|
<button className="blueButton">Valider</button>
|
2017-12-19 16:09:17 +00:00
|
|
|
</Link>
|
|
|
|
</div>
|
2017-11-15 09:49:55 +00:00
|
|
|
</section>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
renderOutputList() {
|
2017-12-19 16:09:17 +00:00
|
|
|
let popularTargets = [...salaries, 'aides employeur différées'].map(
|
|
|
|
curry(findRuleByName)(rules)
|
|
|
|
),
|
2017-12-20 16:49:58 +00:00
|
|
|
{ targets } = this.state,
|
|
|
|
// You can't select 3 salaries, as one must be an input in the next step
|
|
|
|
optionDisabled = name => contains('salaire', name) && pipe(
|
|
|
|
reject(equals(name)),
|
|
|
|
filter(contains('salaire')),
|
|
|
|
length,
|
|
|
|
equals(2)
|
|
|
|
)(targets)
|
|
|
|
|
2017-11-15 09:49:55 +00:00
|
|
|
return (
|
2017-11-16 17:11:42 +00:00
|
|
|
<div>
|
2017-12-19 16:09:17 +00:00
|
|
|
<div id="targets">
|
|
|
|
{popularTargets.map(s => (
|
|
|
|
<div key={s.name}>
|
|
|
|
<input
|
|
|
|
id={s.name}
|
|
|
|
type="checkbox"
|
2017-12-20 16:49:58 +00:00
|
|
|
disabled={optionDisabled(s.name)}
|
2017-12-19 16:09:17 +00:00
|
|
|
checked={targets.includes(s.name)}
|
|
|
|
onChange={() =>
|
|
|
|
this.setState({
|
|
|
|
targets: targets.find(t => t === s.name)
|
|
|
|
? reject(t => t === s.name, targets)
|
|
|
|
: [...targets, s.name]
|
|
|
|
})
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
<label htmlFor={s.name} key={s.name}>
|
|
|
|
<i className="fa fa-square-o fa-2x" />
|
|
|
|
<i className="fa fa-check-square-o fa-2x" />
|
|
|
|
<div>
|
|
|
|
<span className="optionTitle">{s.title || s.name}</span>
|
|
|
|
<p>{s['résumé']}</p>
|
|
|
|
</div>
|
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
2017-11-16 17:11:42 +00:00
|
|
|
</div>
|
2017-11-15 09:49:55 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|