🎨 Affichage des périodes sur les pages règle

source/components/AttachDictionary.js

@@ -1,8 +1,6 @@
 import marked from 'Engine/marked'
 import { path } from 'ramda'
-import React, {
-	Component
-} from 'react'
+import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
 import './Dictionary.css'
 import Overlay from './Overlay'
@@ -25,7 +23,7 @@ export let AttachDictionary = dictionary => Decorated =>
 			})
 		}
 		renderExplanationMarkdown(explanation, term) {
-			return marked(`### Mécanisme: ${term}\n\n${explanation}`)
+			return marked(`### Mécanisme : ${term}\n\n${explanation}`)
 		}
 		render() {
 			let { explanation, term } = this.state

source/components/rule/Algorithm.js

@@ -1,16 +1,13 @@
 import { makeJsx } from 'Engine/evaluation'
-import knownMecanisms from 'Engine/known-mecanisms.yaml'
 import classNames from 'classnames'
 import { path, values } from 'ramda'
 import React from 'react'
 import { Trans, translate } from 'react-i18next'
-import { AttachDictionary } from '../AttachDictionary'
 import './Algorithm.css'
 
 // The showValues prop is passed as a context. It used to be delt in CSS (not(.showValues) display: none), both coexist right now
 import { ShowValuesProvider } from './ShowValuesContext'
 
-@AttachDictionary(knownMecanisms)
 @translate()
 export default class Algorithm extends React.Component {
 	render() {

source/components/rule/Header.js

@@ -38,19 +38,28 @@ let RuleHeader = withColours(
 				<div id="ruleHeader__description">
 					{createMarkdownDiv(description || question)}
 				</div>
-				{(type || path([type, 'destinataire'])(flatRule)) && (
-					<div id="ruleHeader__infobox">
-						{type && (
-							<div className="infobox__item">
-								<h4>Type&nbsp;:</h4>
-								<Trans>{capitalise0(type)}</Trans>
+				<div id="ruleHeader__infobox">
+					{type && (
+						<div className="infobox__item">
+							<h4>Type&nbsp;:</h4>
+							<Trans>{capitalise0(type)}</Trans>
+						</div>
+					)}
+					{flatRule['période'] && (
+						<div className="infobox__item">
+							<h4>{emoji('⏱️')} Période :</h4>
+							<div className="inlineMecanism">
+								<span
+									className="name"
+									data-term-definition="période"
+									style={{ background: '#8e44ad' }}>
+									{flatRule['période']}
+								</span>
 							</div>
-						)}
-						<Destinataire
-							destinataire={path([type, 'destinataire'])(flatRule)}
-						/>
-					</div>
-				)}
+						</div>
+					)}
+					<Destinataire destinataire={path([type, 'destinataire'])(flatRule)} />
+				</div>
 			</div>
 		</section>
 	)

source/components/rule/Rule.js

@@ -25,7 +25,10 @@ import Examples from './Examples'
 import RuleHeader from './Header'
 import References from './References'
 import './Rule.css'
+import { AttachDictionary } from '../AttachDictionary'
+import knownMecanisms from 'Engine/known-mecanisms.yaml'
 
+@AttachDictionary(knownMecanisms)
 @connect((state, props) => ({
 	currentExample: state.currentExample,
 	flatRules: flatRulesSelector(state),

source/engine/known-mecanisms.yaml

@@ -163,3 +163,11 @@ synchronisation:
     Pour éviter trop de saisies à l'utilisateur, certaines informations sont récupérées à partir de ce que l'on appelle des API. Ce sont des services auxquels ont fait appel pour obtenir des informations sur un sujet précis. Par exemple, l'État français fournit gratuitement l'API géo, qui permet à partir du nom d'une ville, d'obtenir son code postal, son département, la population etc.
     Ce mécanismes `synchronisation` permet de faire le lien entre les règles de notre système et les réponses de ces API.
 
+
+période: 
+  description: |
+    Une régle qui a une période, c'est une règle qui ne peut être calculée que sur cette période. Une règle qui n'a pas de période peut-être calculée quelle que soit la période la situation. 
+
+    Ainsi, dans une simulation mensuelle (période: "mois"), si `indemnité kilométrique vélo` (de période neutre) appelle `distance annuelle` et que cette dernière est définie sur l'année (période: "année"), alors la valeur de cette dernière sera divisée par 12 avant d'être passée à cette première. L'inverse est également vrai, en multipliant par 12.
+
+    Par défaut, la période de la simulation est mensuelle.

source/règles/base.yaml

@@ -25,6 +25,7 @@
 
 - espace: contrat salarié . indemnité kilométrique vélo
   nom: distance annuelle
+  description: Une estimation basse de la distance parcourue à vélo par un salarié pour se rendre à son travail.
   période: année
   formule: 4 * 218
   note: 4 km par jour sur 218 jours.