[cdd] meilleures boîtes de résultat

règles/entités/salariat/Salariat.CDD.yaml

@@ -5,6 +5,7 @@
   alias: CDD
   description: Contrat de travail pour lequel un employeur (société, entreprise) peut recruter directement un salarié pour une durée déterminée, car la cause de cette détermination, de la date ou échéance de fin de contrat est prévue explicitement par le Code du travail.
   référence: https://fr.wikipedia.org/wiki/Contrat_de_travail_%C3%A0_dur%C3%A9e_d%C3%A9termin%C3%A9e_en_France
+  # TODO: règle de type : il faut q'un motif et une durée soient sélectionnés pour qu'un contrat soit un CDD. Cela revient à dire que les variables CDD et motif sont obligatoires *dans le contexte* de leur attache
 
 - Variable: durée
   attache: Salariat . CDD

source/.eslintrc

@@ -2,9 +2,6 @@ rules:
   indent:
     - 1
     - tab
-  quotes:
-    - 2
-    - single
   linebreak-style:
     - 2
     - unix

source/components/CDD.css

@@ -36,14 +36,14 @@
 #sim #help {
 	border: 1px solid;
 	border-radius: 2px;
-	border-color: #ccc
+	border-color: #ccc;
 	font-style: italic;
 	margin: 3em;
 	padding-left: 3em;
 	min-width: 30%;
 	color: #444;
 	transition: opacity .4s;
-	opacity: 0
+	opacity: 0;
 }
 
 #sim #help.active {
@@ -84,19 +84,23 @@
 }
 
 #results h2 {
-	width: 8%;
+	width: 5em;
 	display: inline-block;
-	line-height: 1.2em;
+	float: left;
+	line-height: 1.4em;
 	margin: 0;
+	margin-left: 1.5em;
 	padding: .5em;
 	font-weight: 400;
-	font-size: 250%;
+	font-size: 280%;
 }
 
 
 #results ul {
-	display: inline-block;
-	width: 80%;
+	display: inline-flex;
+	justify-content: space-around;
+	height: 100%;
+	width: 70%;
 	list-style: none;
 }
 
@@ -105,24 +109,36 @@
 	background: white;
 	display: inline-block;
 	margin: 0 2em;
-	border-radius: 2px;
+	border-radius: 8px;
 	padding: .6em 2em;
 	text-align: center;
+	border: 3px dashed white;
 }
+#results li.unsatisfied {
+	border: 3px dashed #4a89dc;
+}
+
 #results li h3 {
 	font-size: 130%;
-	width: 80%;
+	/*width: 80%;*/
 	border-bottom: 1px solid #aaa;
 	margin: .1em;
+	margin-bottom: 1em;
 	padding-bottom: .2em;
 }
 
-
-#results p {
-	margin: .6em;
-}
-
-
-#results .value {
+#results li p {
+	margin-top: 0;
 	font-size: 150%;
 }
+
+#results li.unsatisfied p{
+	font-style: italic;
+}
+#results li.number p {
+	font-size: 300%;
+}
+
+#results .value {
+
+}

source/components/Results.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import classNames from 'classnames'
 
 export default class Results extends Component {
 	render() {
@@ -8,17 +9,22 @@ export default class Results extends Component {
 				<h2>Vos obligations</h2>
 				<ul>
 					{analysedSituation.map(({name, type, derived: {missingVariables, computedValue}}) =>
-						<li key={name}>
-							<h3>{type} {name}</h3>
-							<p className="value">
-							{missingVariables && missingVariables.length ?
-								'Répondez aux questions !'
-								: computedValue != null ?
-									computedValue + '€'
-									: 'Non applicable'
-							}
-							</p>
-						</li>
+						do {
+							let
+								unsatisfied = missingVariables && missingVariables.length,
+								irrelevant = !unsatisfied && computedValue == null;
+							<li key={name} className={classNames({unsatisfied, number: !unsatisfied && !irrelevant})}>
+								<h3>{type} {name}</h3>
+								<p>
+								{unsatisfied ?
+									'En attente de vos réponses...'
+									: irrelevant ?
+										"Vous n'êtes pas concernés"
+										:computedValue + '€'
+								}
+								</p>
+							</li>
+						}
 					)}
 				</ul>
 			</section>

source/reducers.js

@@ -130,8 +130,8 @@ export default reduceReducers(
 													value: rule.name,
 													label: rule && rule.titre || name
 												}
-											}),
-											defaultValue: 'Non',
+											}).concat([{value: 'aucun', label: 'Aucun'}]),
+											// defaultValue: 'Non',
 											helpText: 'Choisissez une réponse'
 										}
 									)]