🎨 Tableaux de somme imrbiqués

règles/rémunération-travail/entités/ok/CDD.yaml

@@ -79,6 +79,14 @@
     somme: #TODO à l'avenir, exprimer une somme par requête de type : obligation applicable au CDD
       - indemnités salarié CDD
       - cotisations employeur CDD
+  exemples:
+    - nom: "yo"
+      situation:
+        indemnités salarié CDD: 100
+        cotisations employeur CDD: 190
+        prime fin de contrat: 60.4
+        compensation congés payés: 39.6
+      valeur attendue: 290
 
 # Cette variable est le point de départ du simulateur "surcout CDD" :-D
 - espace: contrat salarié . CDD

source/components/rule/Rule.css

@@ -128,9 +128,10 @@
 
 /* mécanisme somme */
 .somme table {
+	width: 100%;
 	border-collapse: collapse;
 }
-.somme td.operator {
+.somme td.blank {
 	background: white;
 	border: 1px solid white;
 	border-right: 1px solid rgba(51, 51, 80, 0.15);
@@ -138,8 +139,10 @@
 .somme tr {
 	border: 1px solid rgba(51, 51, 80, 0.15);
 }
+.somme tr:hover {
+	background: rgba(51, 51, 80, 0.02)
+}
 .somme tr:nth-child(2n) {
-  background: rgba(51, 51, 80, 0.05);
 
 }
 .somme tr .element {
@@ -153,7 +156,9 @@
 	border: none;
 }
 .somme .operator {
-	padding: 0 .6em;
+	text-align: center;
+	width: 1em;
+	padding: 0 .4em;
 	font-weight: 600;
 	font-size: 120%;
 	color: black;
@@ -167,3 +172,17 @@
 }
 #rule-rules .somme table .situationValue span {
 }
+
+.somme .nested {
+  padding: 0;
+	border: none;
+}
+.somme .nested tr:first-child {
+	border-top: none;
+}
+.somme .noNest {
+	border-bottom: none;
+}
+.somme > table  {
+	border-bottom: 1px solid rgba(51, 51, 80, 0.15);
+}

source/engine/mecanisms.js

@@ -315,28 +315,37 @@ export let mecanismSum = (recurse,k,v) => {
 
 	let evaluate = evaluateArray(R.add,0)
 
+	let renderTable = explanation => <table>
+		<caption />
+		<tbody>
+			{explanation.map((v, i) => {
+				let rowFormula = R.path(['explanation', 'formule', 'explanation'], v),
+					isSomme = rowFormula && rowFormula.name == 'somme'
+
+				return [<tr key={v.name} className={isSomme ? '': 'noNest'}>
+					<td className="operator blank">{i != 0 && '+'}</td>
+					<td className="element">
+						{makeJsx(v)}
+					</td>
+					<td className="situationValue value">
+						<NodeValue data={v.nodeValue} />
+					</td>
+				</tr>,
+				... isSomme ? [ <tr className="nested">
+					<td className="blank" />
+					<td className="nested">{renderTable(rowFormula.explanation)}</td>
+				</tr>] : []]
+			})}
+		</tbody>
+	</table>
+
 	let jsx = (nodeValue, explanation) => (
 		<Node
 			classes="mecanism somme"
 			name="somme"
 			value={nodeValue}
 			child={
-				<table>
-					<caption />
-					<tbody>
-						{explanation.map((v, i) => (
-							<tr key={v.name}>
-								<td className="operator">{i != 0 && '+'}</td>
-								<td className="element">
-									{makeJsx(v)}
-								</td>
-								<td className="situationValue value">
-									<NodeValue data={v.nodeValue} />
-								</td>
-							</tr>
-						))}
-					</tbody>
-				</table>
+				renderTable(explanation)
 			}
 		/>
 	)