From 16c5fb1303c8a25531767049c96751692ea42910 Mon Sep 17 00:00:00 2001 From: Mael Thomas Date: Fri, 17 Mar 2017 12:37:55 +0100 Subject: [PATCH] =?UTF-8?q?Bouton=20qui=20injecte=20ou=20cache=20la=20situ?= =?UTF-8?q?ation=20dans=20les=20r=C3=A8gles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 8 ++++---- source/components/Results.js | 1 - source/components/Rule.css | 32 +++++++++++++++++++---------- source/components/Rule.js | 39 ++++++++++++++++++++++++++++++------ source/containers/Home.js | 3 ++- 5 files changed, 60 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index 56a4aee53..99e16db61 100644 --- a/package.json +++ b/package.json @@ -20,13 +20,13 @@ "nearley": "^2.7.14", "npm": "^4.4.1", "ramda": "^0.23.0", - "react": "^15.0.1", - "react-dom": "^15.0.1", + "react": "^15.4.2", + "react-dom": "^15.4.2", "react-json-tree": "^0.10.0", - "react-redux": "^5.0.2", + "react-redux": "^5.0.3", "react-router": "^3.0.2", "reduce-reducers": "^0.1.2", - "redux": "^3.5.2", + "redux": "^3.6.0", "redux-form": "^6.4.3", "redux-saga": "^0.14.3", "reselect": "^2.5.2", diff --git a/source/components/Results.js b/source/components/Results.js index 99c3f2a88..b66b82964 100644 --- a/source/components/Results.js +++ b/source/components/Results.js @@ -15,7 +15,6 @@ let humanFigure = decimalDigits => value => fmt(value.toFixed(decimalDigits)) export default class Results extends Component { render() { let {analysedSituation, pointedOutObjectives} = this.props - // On travaille sur un objectif qui est une somme de plusieurs variables, et c'est ces variables que nous affichons comme résultats let explanation = R.path(['formule', 'explanation', 'explanation'])(analysedSituation) diff --git a/source/components/Rule.css b/source/components/Rule.css index 10d0e513c..e3198f03e 100644 --- a/source/components/Rule.css +++ b/source/components/Rule.css @@ -61,9 +61,29 @@ color: #333350 } #rule-rules { - display: flex; + display: inline-flex; justify-content: start; min-height: 5em; + width: 80%; +} + +#rule-rules .situationValue { + display: none; + padding-left: 1em; + font-weight: 600; + color: #333350; +} + +#rule-rules.showValues .situationValue { + display: inline; +} + +#showValues { + background: rgb(74, 137, 220); + color: white; + border: none; + font-size: 120%; + padding: .5em; } #rule-rules section { @@ -121,12 +141,6 @@ padding-left: .3em; } -#rule-rules .situationValue { - padding-left: 1em; - font-weight: 600; - color: #333350; -} - .maximum .description { font-style: italic; font-weight: 600; @@ -134,10 +148,6 @@ margin-left: 1em; } -.situationValue { - opacity: .6 -} - .condition { margin-bottom: .6em; } diff --git a/source/components/Rule.js b/source/components/Rule.js index 571684a26..124495eb9 100644 --- a/source/components/Rule.js +++ b/source/components/Rule.js @@ -8,22 +8,39 @@ import PageTypeIcon from './PageTypeIcon' import {connect} from 'react-redux' import {formValueSelector} from 'redux-form' import mockSituation from '../engine/mockSituation.yaml' +import {START_CONVERSATION} from '../actions' +import classNames from 'classnames' // situationGate function useful for testing : let testingSituationGate = v => // eslint-disable-line no-unused-vars R.path(v.split('.'))(mockSituation) -@connect(state => ({ - // situationGate: name => formValueSelector('conversation')(state, name), - analysedSituation: state.analysedSituation -})) +@connect( + state => ({ + // situationGate: name => formValueSelector('conversation')(state, name), + analysedSituation: state.analysedSituation, + form: state.form + }), + dispatch => ({ + startConversation: () => dispatch({type: START_CONVERSATION}), + }) +) export default class Rule extends Component { + state = { + showValues: false + } + componentDidMount() { + // C'est ici que la génération du formulaire, et donc la traversée des variables commence + this.props.startConversation() + } render() { let { params: {name}, - analysedSituation + analysedSituation, + form } = this.props, objectives = R.path(['formule', 'explanation', 'explanation'])(analysedSituation) + if (!objectives) return null let rule = objectives.find(R.pathEq(['explanation', 'name'], name)).explanation @@ -33,6 +50,10 @@ export default class Rule extends Component { return null } + let + situationExists = !R.isEmpty(form), + showValues = situationExists && this.state.showValues + return (
@@ -57,7 +78,7 @@ export default class Rule extends Component {

Pourquoi cette règle me concerne ? Comment est-elle calculée ? C'est pas très lisible pour l'instant, mais ça le deviendra

-
+
{ do { let [,cond] = R.toPairs(rule).find(([,v]) => v.rulePropType == 'cond') || [] @@ -71,8 +92,14 @@ export default class Rule extends Component {

Calcul

{rule['formule'].jsx}
+ {situationExists && + + }
+ {/*
*/} diff --git a/source/containers/Home.js b/source/containers/Home.js index 9797df610..381e1f3bf 100644 --- a/source/containers/Home.js +++ b/source/containers/Home.js @@ -3,6 +3,7 @@ import './Home.css' import {searchRules} from '../engine/rules.js' import {Link} from 'react-router' import '../components/Rule.css' +import R from 'ramda' export default class Home extends Component { state = { @@ -41,7 +42,7 @@ export default class Home extends Component {