👽 Traduit les mécanismes et les noms de variables dans le calcul

source/engine/mecanismViews/common.js

@@ -1,8 +1,10 @@
-import React from 'react'
-import { contains } from 'ramda'
+import React, { Component } from 'react'
+import { Trans, translate } from 'react-i18next'
+import { pick, contains } from 'ramda'
 import classNames from 'classnames'
 import { Link } from 'react-router-dom'
-import { encodeRuleName } from '../rules'
+import { connect } from 'react-redux'
+import { encodeRuleName, findRuleByDottedName } from '../rules'
 import { capitalise0 } from '../../utils'
 
 let treatValue = data =>
@@ -22,7 +24,7 @@ let NodeValuePointer = ({ data }) => (
 )
 
 // Un élément du graphe de calcul qui a une valeur interprétée (à afficher)
-export class Node extends React.Component {
+export class Node extends Component {
 	render() {
 		let { classes, name, value, child } = this.props,
 			termDefinition = contains('mecanism', classes) && name
@@ -32,7 +34,7 @@ export class Node extends React.Component {
 				{name && (
 					<span className="nodeHead">
 						<span className="name" data-term-definition={termDefinition}>
-							{name}
+							<Trans>{name}</Trans>
 						</span>
 						<NodeValuePointer data={value} />
 					</span>
@@ -45,17 +47,25 @@ export class Node extends React.Component {
 }
 
 // Un élément du graphe de calcul qui a une valeur interprétée (à afficher)
-export let Leaf = ({ classes, dottedName, name, value }) => (
-	<span className={classNames(classes, 'leaf')}>
-		{dottedName && (
-			<span className="nodeHead">
-				<Link to={'/règle/' + encodeRuleName(dottedName)}>
-					<span className="name">
-						{capitalise0(name)}
-						<NodeValuePointer data={value} />
-					</span>
-				</Link>
-			</span>
-		)}
-	</span>
+@connect(
+	pick(['flatRules'])
 )
+export class Leaf extends Component {
+	render () {
+		let { classes, dottedName, name, value, flatRules } = this.props,
+			rule = findRuleByDottedName(flatRules, dottedName)
+
+		return <span className={classNames(classes, 'leaf')}>
+			{dottedName && (
+				<span className="nodeHead">
+					<Link to={'/règle/' + encodeRuleName(dottedName)}>
+						<span className="name">
+							{rule.title || capitalise0(name)}
+							<NodeValuePointer data={value} />
+						</span>
+					</Link>
+				</span>
+			)}
+		</span>
+	}
+}

source/engine/mecanisms.js

@@ -36,6 +36,7 @@ import {
 	last
 } from 'ramda'
 import React from 'react'
+import { Trans } from 'react-i18next'
 import { anyNull, val } from './traverse-common-functions'
 import { Node } from './mecanismViews/common'
 import {
@@ -92,8 +93,8 @@ let decompose = (recurse, k, v) => {
 							<ul className="composanteAttributes">
 								{toPairs(c.composante).map(([k, v]) => (
 									<li key={k}>
-										<span>{k}: </span>
-										<span>{v}</span>
+										<span><Trans>{k}</Trans>: </span>
+										<span><Trans>{v}</Trans></span>
 									</li>
 								))}
 							</ul>
@@ -625,26 +626,26 @@ export let mecanismProduct = (recurse, k, v) => {
 			child={
 				<ul className="properties">
 					<li key="assiette">
-						<span className="key">assiette: </span>
+						<span className="key"><Trans>assiette</Trans>: </span>
 						<span className="value">{makeJsx(explanation.assiette)}</span>
 					</li>
 					{(explanation.taux.nodeValue != 1 ||
 						explanation.taux.category == 'calcExpression') && (
 						<li key="taux">
-							<span className="key">taux: </span>
+							<span className="key"><Trans>taux</Trans>: </span>
 							<span className="value">{makeJsx(explanation.taux)}</span>
 						</li>
 					)}
 					{(explanation.facteur.nodeValue != 1 ||
 						explanation.taux.category == 'calcExpression') && (
 						<li key="facteur">
-							<span className="key">facteur: </span>
+							<span className="key"><Trans>facteur</Trans>: </span>
 							<span className="value">{makeJsx(explanation.facteur)}</span>
 						</li>
 					)}
 					{explanation.plafond.nodeValue != Infinity && (
 						<li key="plafond">
-							<span className="key">plafond: </span>
+							<span className="key"><Trans>plafond</Trans>: </span>
 							<span className="value">{makeJsx(explanation.plafond)}</span>
 						</li>
 					)}
@@ -744,11 +745,11 @@ export let mecanismScale = (recurse, k, v) => {
 			child={
 				<ul className="properties">
 					<li key="assiette">
-						<span className="key">assiette: </span>
+						<span className="key"><Trans>assiette</Trans>: </span>
 						<span className="value">{makeJsx(explanation.assiette)}</span>
 					</li>
 					<li key="multiplicateur">
-						<span className="key">multiplicateur des tranches: </span>
+						<span className="key"><Trans>multiplicateur des tranches</Trans>: </span>
 						<span className="value">
 							{makeJsx(explanation['multiplicateur des tranches'])}
 						</span>
@@ -756,8 +757,8 @@ export let mecanismScale = (recurse, k, v) => {
 					<table className="tranches">
 						<thead>
 							<tr>
-								<th>Tranches de l'assiette</th>
-								<th>Taux</th>
+								<th><Trans>Tranches de l'assiette</Trans></th>
+								<th><Trans>Taux</Trans></th>
 							</tr>
 							{explanation.tranches.map(
 								({
@@ -780,10 +781,10 @@ export let mecanismScale = (recurse, k, v) => {
 									>
 										<td key="tranche">
 											{maxOnly
-												? 'En dessous de ' + maxOnly
+												? '< ' + maxOnly
 												: minOnly
-													? 'Au dessus de ' + minOnly
-													: `De ${min} à ${max}`}
+													? '> ' + minOnly
+													: `${min} - ${max}`}
 										</td>
 										<td key="taux"> {makeJsx(taux)} </td>
 									</tr>
@@ -900,11 +901,11 @@ export let mecanismComplement = (recurse, k, v) => {
 				child={
 					<ul className="properties">
 						<li key="cible">
-							<span className="key">cible: </span>
+							<span className="key"><Trans>cible</Trans>: </span>
 							<span className="value">{makeJsx(explanation.cible)}</span>
 						</li>
 						<li key="mini">
-							<span className="key">montant à atteindre: </span>
+							<span className="key"><Trans>montant à atteindre</Trans>: </span>
 							<span className="value">{makeJsx(explanation.montant)}</span>
 						</li>
 					</ul>

source/locales/en.yaml

@@ -50,7 +50,7 @@ Quel est le salaire mensuel ?: What is the monthly salary?
 back: Back to your simulation
 ambiguous: More than one rule with this name found. Which one are you looking for ?
 reportError: Report an error
-Références: Relevant legal information
+Références: Relevant legal information (fr)
 Règles attachées: Linked rules
 inspace: These rules are in category
 Pas de sources officielles: No official information
@@ -83,3 +83,21 @@ clickexample: Click on a situation to see the result
 fail: This test failed
 expected: the expected result was
 cancelExample: Back to your situation
+non applicable si: not applicable if
+applicable si: applicable if
+une de ces conditions: one of these applies
+toutes ces conditions: all of these apply
+assiette: base
+taux: rate
+facteur: multiplier
+plafond: ceiling
+barème: scale
+composantes: components
+multiplicateur des tranches: bracket amount
+Tranches de l'assiette: Scale brackets
+Taux: Rates
+cible: target
+montant à atteindre: minimum value
+dû par: owed by
+employeur: employer
+salarié: employee