From 3d091207f03d004c9848a53c79ced19740c667d5 Mon Sep 17 00:00:00 2001
From: mama <mael.thomas@data.gouv.fr>
Date: Mon, 18 Dec 2017 18:20:55 +0100
Subject: [PATCH] =?UTF-8?q?Les=20d=C3=A9tails=20de=20la=20visu=20niveau=20?=
 =?UTF-8?q?2=20sont=20cliquables?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/ResultsGrid.js      | 57 +++++++++++++++------------
 source/engine/mecanismViews/Somme.css |  5 +++
 2 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/source/components/ResultsGrid.js b/source/components/ResultsGrid.js
index 4e384575c..aa389b5ae 100644
--- a/source/components/ResultsGrid.js
+++ b/source/components/ResultsGrid.js
@@ -2,13 +2,14 @@ import R from "ramda"
 import React, { Component } from "react"
 import { connect } from "react-redux"
 import { withRouter } from "react-router"
+import { Link } from "react-router-dom"
 import { formValueSelector } from "redux-form"
 import "./Results.css"
 import "../engine/mecanismViews/Somme.css"
 import { humanFigure } from "./rule/RuleValueVignette"
 
 import { capitalise0 } from "../utils"
-import { nameLeaf } from "Engine/rules"
+import { nameLeaf, encodeRuleName } from "Engine/rules"
 
 
 // Filtered variables and rules can't be filtered in a uniform way, for now
@@ -196,7 +197,9 @@ class Row extends Component {
 			? []
 			: R.keys(detail).map(subCellName => (
 					<tr key={"detailsRow" + subCellName} className="detailsRow">
-						<td className="element name">&nbsp;{title(subCellName)}</td>
+						<td className="element name"><Link to={'/regle/' + encodeRuleName(nameLeaf(subCellName))} >
+							{title(subCellName)}
+						</Link></td>
 						{relevantSalaries.has("salaire net") && (
 							<>
 								<td key="operator1" className="operator">
@@ -279,29 +282,33 @@ class ReductionRow extends Component {
 		let detailRow = this.state.folded
 			? null
 			:
-					<tr key="detailsRowRéductions" className="detailsRow">
-						<td className="element name">&nbsp;Réductions de cotisations</td>
-						{relevantSalaries.has("salaire net") && (
-							<>
-								<td key="operator1" className="operator">
-									+
-								</td>
-								<td key="value1" className="element value">
-									{humanFigure(2)(0)}
-								</td>
-							</>
-						)}
-						{relevantSalaries.has("salaire total") && (
-							<>
-								<td key="operator2" className="operator">
-									-
-								</td>
-								<td key="value2" className="element value">
-									{humanFigure(2)(value)}
-								</td>
-							</>
-						)}
-					</tr>
+			<tr key="detailsRowRéductions" className="detailsRow">
+				<td className="element name">
+					<Link to={'/regle/' + encodeRuleName('réductions de cotisations')} >
+						Réductions de cotisations
+					</Link>
+				</td>
+				{relevantSalaries.has("salaire net") && (
+					<>
+						<td key="operator1" className="operator">
+							+
+						</td>
+						<td key="value1" className="element value">
+							{humanFigure(2)(0)}
+						</td>
+					</>
+				)}
+				{relevantSalaries.has("salaire total") && (
+					<>
+						<td key="operator2" className="operator">
+							-
+						</td>
+						<td key="value2" className="element value">
+							{humanFigure(2)(value)}
+						</td>
+					</>
+				)}
+			</tr>
 
 		// returns an array of <tr>
 		return [aggregateRow, detailRow]
diff --git a/source/engine/mecanismViews/Somme.css b/source/engine/mecanismViews/Somme.css
index 2aad506bb..6f4c23fe6 100644
--- a/source/engine/mecanismViews/Somme.css
+++ b/source/engine/mecanismViews/Somme.css
@@ -89,6 +89,11 @@
 .resultsGrid .detailsRow .name {
 	padding-left: 1.2em;
 }
+.resultsGrid .detailsRow .name:hover {
+	color: #2975D1;
+	text-decoration: underline;
+}
+
 .resultsGrid .name {
 	font-size: 90%;
 }