From e8d6edaf8d4d43ddadcbdf14c7cbc2d56754b5be Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Wed, 17 Oct 2018 15:23:48 +0000
Subject: [PATCH] =?UTF-8?q?:art:=20Affichage=20des=20p=C3=A9riodes=20sur?=
 =?UTF-8?q?=20les=20pages=20r=C3=A8gle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/AttachDictionary.js |  6 ++---
 source/components/rule/Algorithm.js   |  3 ---
 source/components/rule/Header.js      | 33 +++++++++++++++++----------
 source/components/rule/Rule.js        |  3 +++
 source/engine/known-mecanisms.yaml    |  8 +++++++
 source/règles/base.yaml               |  1 +
 6 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/source/components/AttachDictionary.js b/source/components/AttachDictionary.js
index 6e5d60bcb..2b61c34d6 100644
--- a/source/components/AttachDictionary.js
+++ b/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
diff --git a/source/components/rule/Algorithm.js b/source/components/rule/Algorithm.js
index 207ea2f3a..1f1b4aff7 100644
--- a/source/components/rule/Algorithm.js
+++ b/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() {
diff --git a/source/components/rule/Header.js b/source/components/rule/Header.js
index c376522f2..df29016a5 100644
--- a/source/components/rule/Header.js
+++ b/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>
 	)
diff --git a/source/components/rule/Rule.js b/source/components/rule/Rule.js
index bd405c3fa..a7c7c492d 100644
--- a/source/components/rule/Rule.js
+++ b/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),
diff --git a/source/engine/known-mecanisms.yaml b/source/engine/known-mecanisms.yaml
index b0609c8b0..d9fb735c9 100644
--- a/source/engine/known-mecanisms.yaml
+++ b/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.
diff --git a/source/règles/base.yaml b/source/règles/base.yaml
index 9e2091a72..be4f2434e 100644
--- a/source/règles/base.yaml
+++ b/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.