From 9884fc8ea83b14f7d717343c11227e5f413f28f2 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Fri, 23 Nov 2018 13:19:05 +0000
Subject: [PATCH] =?UTF-8?q?Int=C3=A9gration=20du=20module=20de=20changemen?=
 =?UTF-8?q?t=20de=20p=C3=A9riode=20sur=20/r=C3=A8gle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A la place des "période : flexible", un peu compliqué à comprendre.
---
 source/components/rule/Header.css |  7 +++++++
 source/components/rule/Header.js  | 35 +++++++++++++++++++------------
 source/components/rule/Rule.js    |  3 ++-
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/source/components/rule/Header.css b/source/components/rule/Header.css
index a15c820c8..4ceef28dc 100644
--- a/source/components/rule/Header.css
+++ b/source/components/rule/Header.css
@@ -51,3 +51,10 @@
 #rule pre {
 	padding: 1em 2em;
 }
+
+#ruleHeader #PeriodSwitch {
+	margin: 0.3em 1em;
+}
+#ruleHeader #PeriodSwitch img {
+	display: none;
+}
diff --git a/source/components/rule/Header.js b/source/components/rule/Header.js
index df29016a5..e386f68af 100644
--- a/source/components/rule/Header.js
+++ b/source/components/rule/Header.js
@@ -8,6 +8,7 @@ import { capitalise0 } from '../../utils'
 import Destinataire from './Destinataire'
 import './Header.css'
 import Namespace from './Namespace'
+import PeriodSwitch from 'Components/PeriodSwitch'
 
 let RuleHeader = withColours(
 	({
@@ -20,7 +21,8 @@ let RuleHeader = withColours(
 		name,
 		title,
 		icon,
-		colours
+		colours,
+		valuesToShow
 	}) => (
 		<section id="ruleHeader">
 			<header style={{ background: colours.colour }}>
@@ -45,19 +47,26 @@ let RuleHeader = withColours(
 							<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>
+					{do {
+						let period = flatRule['période']
+						period && (
+							<div className="infobox__item">
+								<h4>Période :</h4>
+								{valuesToShow && period === 'flexible' ? (
+									<PeriodSwitch />
+								) : (
+									<div className="inlineMecanism">
+										<span
+											className="name"
+											data-term-definition="période"
+											style={{ background: '#8e44ad' }}>
+											{period}
+										</span>
+									</div>
+								)}
 							</div>
-						</div>
-					)}
+						)
+					}}
 					<Destinataire destinataire={path([type, 'destinataire'])(flatRule)} />
 				</div>
 			</div>
diff --git a/source/components/rule/Rule.js b/source/components/rule/Rule.js
index 0d1228606..6a7e59c4f 100644
--- a/source/components/rule/Rule.js
+++ b/source/components/rule/Rule.js
@@ -87,7 +87,8 @@ export default compose(
 									flatRules,
 									name,
 									title,
-									icon
+									icon,
+									valuesToShow
 								}}
 							/>