betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

Conciliation de "tout effacer" avec "affiner votre situation" 

Au passage, externatilsation de <Conversation/> de <Simulateur/>
pull/55/head
mama 2017-09-28 14:59:10 +02:00
parent beceb42654
commit ee2c817d86
3 changed files with 99 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
source/components/Simulateur.js
View File

@ -1,24 +1,23 @@
import R from 'ramda'
import React, {Component} from 'react'
import Helmet from 'react-helmet'
import {reduxForm, formValueSelector, reset} from 'redux-form'
import {formValueSelector, reset} from 'redux-form'
import {connect} from 'react-redux'
import {Redirect, Link, withRouter} from 'react-router-dom'
import classNames from 'classnames'
import {START_CONVERSATION} from '../actions'
import Aide from './Aide'
import {createMarkdownDiv} from 'Engine/marked'
import {rules, findRuleByName, decodeRuleName} from 'Engine/rules'
import './conversation/conversation.css'
import './Simulateur.css'
import {capitalise0} from '../utils'
import Satisfaction from './Satisfaction'
import Conversation from './conversation/Conversation'
let situationSelector = formValueSelector('conversation')
@withRouter
@reduxForm({form: 'conversation', destroyOnUnmount: false})
@connect(
state => ({
situation: variableName => situationSelector(state, variableName),
@ -27,6 +26,7 @@ let situationSelector = formValueSelector('conversation')
extraSteps: state.extraSteps,
themeColours: state.themeColours,
analysedSituation: state.analysedSituation,
situationGate: state.situationGate,
}),
dispatch => ({
startConversation: rootVariable => dispatch({type: START_CONVERSATION, rootVariable}),
@ -58,7 +58,7 @@ export default class extends React.Component {
let
started = !this.props.match.params.intro,
{foldedSteps, extraSteps, unfoldedSteps, situation} = this.props,
{foldedSteps, extraSteps, unfoldedSteps, situation, situationGate} = this.props,
sim = path =>
R.path(R.unless(R.is(Array), R.of)(path))(this.rule.simulateur || {}),
reinitalise = () => {
@ -67,7 +67,6 @@ export default class extends React.Component {
},
title = sim('titre') || capitalise0(this.rule['titre'] || this.rule['nom'])
return (
<div id="sim" className={classNames({started})}>
<Helmet>
@ -109,85 +108,9 @@ export default class extends React.Component {
</p>
</div>
</div>
: (
<div>
<div id="conversation">
<div id="questions-answers">
{ !R.isEmpty(foldedSteps) &&
<div id="foldedSteps">
<div className="header" >
<h3>Vos réponses</h3>
<button onClick={reinitalise}>
<i className="fa fa-trash" aria-hidden="true"></i>
Tout effacer
</button>
</div>
{foldedSteps
.map(step => (
<step.component
key={step.name}
{...step}
step={step}
answer={situation(step.name)}
/>
))}
</div>
}
{ !R.isEmpty(extraSteps) &&
<div id="foldedSteps">
<div className="header" >
<h3>Affiner votre situation</h3>
</div>
{extraSteps
.map(step => (
<step.component
key={step.name}
{...step}
step={step}
answer={situation(step.name)}
/>
))}
</div>
}
<div id="unfoldedSteps">
{ !R.isEmpty(unfoldedSteps) && do {
let step = R.head(unfoldedSteps)
;<step.component
key={step.name}
step={R.dissoc('component', step)}
unfolded={true}
answer={situation(step.name)}
/>
}}
</div>
{unfoldedSteps.length == 0 &&
<Conclusion simu={this.name}/>}
</div>
<Aide />
</div>
</div>
)}
: <Conversation initialValues={ R.pathOr({},['simulateur','par défaut'], sim) } {...{foldedSteps, unfoldedSteps, extraSteps, reinitalise, situation, situationGate}}/>}
</div>
)
}
}
class Conclusion extends Component {
render() {
return (
<div id="fin">
<img src={require('../images/fin.png')} />
<div id="fin-text">
<p>
Votre simulation est terminée !
</p>
<p>
N'hésitez pas à modifier vos réponses, ou cliquez sur vos résultats pour comprendre le calcul.
</p>
<Satisfaction simu={this.props.simu}/>
</div>
</div>
)
}
}

91
source/components/conversation/Conversation.js Normal file
View File

@ -0,0 +1,91 @@
import React, { Component } from 'react'
import R from 'ramda'
import Aide from '../Aide'
import Satisfaction from '../Satisfaction'
import {reduxForm} from 'redux-form'
@reduxForm({
form: "conversation",
destroyOnUnmount: false
})
export default class Conversation extends Component {
render() {
let {foldedSteps, unfoldedSteps, extraSteps, reinitalise, situation, situationGate} = this.props
return (
<div id="conversation">
<div id="questions-answers">
{ !R.isEmpty(foldedSteps) &&
<div id="foldedSteps">
<div className="header" >
<h3>Vos réponses</h3>
<button onClick={reinitalise}>
<i className="fa fa-trash" aria-hidden="true"></i>
Tout effacer
</button>
</div>
{foldedSteps
.map(step => (
<step.component
key={step.name}
{...step}
step={step}
answer={situation(step.name)}
/>
))}
</div>
}
{ !R.isEmpty(extraSteps) &&
<div id="foldedSteps">
<div className="header" >
<h3>Affiner votre situation</h3>
</div>
{extraSteps
.map(step => (
<step.component
key={step.name}
{...step}
step={step}
answer={situationGate(step.name)}
/>
))}
</div>
}
<div id="unfoldedSteps">
{ !R.isEmpty(unfoldedSteps) && do {
let step = R.head(unfoldedSteps)
;<step.component
key={step.name}
step={R.dissoc('component', step)}
unfolded={true}
answer={situation(step.name)}
/>
}}
</div>
{unfoldedSteps.length == 0 &&
<Conclusion simu={this.name}/>}
</div>
<Aide />
</div>
)
}
}
class Conclusion extends Component {
render() {
return (
<div id="fin">
<img src={require('../../images/fin.png')} />
<div id="fin-text">
<p>
Votre simulation est terminée !
</p>
<p>
N'hésitez pas à modifier vos réponses, ou cliquez sur vos résultats pour comprendre le calcul.
</p>
<Satisfaction simu={this.props.simu}/>
</div>
</div>
)
}
}

3
source/reducers.js
View File

@ -45,7 +45,8 @@ export let reduceSteps = (state, action) => {
let newState = {
...state,
analysedSituation,
situationGate: situationGate
situationGate: situationGate,
extraSteps: []
}
if (action.type == START_CONVERSATION) {