From fef9d9726b9087f11ec03e6360b3880d3bf55b1c Mon Sep 17 00:00:00 2001
From: mama <mael.thomas@data.gouv.fr>
Date: Thu, 25 Jan 2018 17:24:53 +0100
Subject: [PATCH] =?UTF-8?q?Mise=20en=20valeur=20des=20mots=20s=C3=A9lectio?=
 =?UTF-8?q?nn=C3=A9s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                          |  1 +
 source/components/pages/RulesList.css |  6 ++-
 source/components/pages/RulesList.js  | 55 +++++++++++++++++----------
 source/règles/base.yaml               |  4 +-
 4 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index ce3ad20cb..28048110f 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
 		"react-color": "^2.13.8",
 		"react-dom": "^16.2.0",
 		"react-helmet": "^5.2.0",
+		"react-highlight-words": "^0.10.0",
 		"react-redux": "^5.0.6",
 		"react-router": "^4.2.0",
 		"react-router-dom": "^4.2.2",
diff --git a/source/components/pages/RulesList.css b/source/components/pages/RulesList.css
index ac54b3c4a..5bed7ab75 100644
--- a/source/components/pages/RulesList.css
+++ b/source/components/pages/RulesList.css
@@ -1,4 +1,8 @@
 #RulesList ul {
-	margin: 0 auto;
+	margin: 1em auto;
 	max-width: 860px;
+	padding: 0;
+}
+#RulesList li {
+	list-style: none;
 }
diff --git a/source/components/pages/RulesList.js b/source/components/pages/RulesList.js
index 7354ac8c4..7dcccf977 100644
--- a/source/components/pages/RulesList.js
+++ b/source/components/pages/RulesList.js
@@ -8,6 +8,7 @@ import Select from 'react-select'
 import 'react-select/dist/react-select.css'
 import Fuse from 'fuse.js'
 import { Redirect } from 'react-router-dom'
+import Highlighter from 'react-highlight-words'
 
 export default class RulesList extends Component {
 	render() {
@@ -41,37 +42,51 @@ class SearchBar extends React.Component {
 		this.fuse = new Fuse(rules, options)
 	}
 	state = {
-		selectedOption: null
+		selectedOption: null,
+		inputValue: null
 	}
 	handleChange = selectedOption => {
 		this.setState({ selectedOption })
 	}
-
+	renderOption = option => (
+		<Highlighter
+			searchWords={[this.state.inputValue]}
+			textToHighlight={option.title}
+		/>
+	)
 	filterOptions = (options, filter) => this.fuse.search(filter)
 	render() {
 		let { selectedOption } = this.state
 
 		if (selectedOption != null)
 			return <Redirect to={'règle/' + selectedOption.dottedName} />
+
 		return (
-			<Select
-				name="form-field-name"
-				value={selectedOption && selectedOption.dottedName}
-				onChange={this.handleChange}
-				valueKey="dottedName"
-				labelKey="title"
-				filterOptions={this.filterOptions}
-			/>
+			<>
+				<Select
+					value={selectedOption && selectedOption.dottedName}
+					onChange={this.handleChange}
+					onInputChange={inputValue => this.setState({ inputValue })}
+					valueKey="dottedName"
+					labelKey="title"
+					options={rules}
+					filterOptions={this.filterOptions}
+					optionRenderer={this.renderOption}
+					searchPromptText="Entrez des mots clefs ici"
+					noResultsText="Nous n'avons rien trouvé..."
+				/>
+				{!this.state.inputValue && (
+					<ul>
+						{rules.map(rule => (
+							<li key={rule.dottedName}>
+								<Link to={'/règle/' + encodeRuleName(rule.name)}>
+									{capitalise0(rule.name)}
+								</Link>
+							</li>
+						))}
+					</ul>
+				)}
+			</>
 		)
 	}
 }
-
-// <ul>
-// 	{rules.map(rule => (
-// 		<li key={rule.name}>
-// 			<Link to={'/règle/' + encodeRuleName(rule.name)}>
-// 				{capitalise0(rule.name)}
-// 			</Link>
-// 		</li>
-// 	))}
-// </ul>
diff --git a/source/règles/base.yaml b/source/règles/base.yaml
index e75f943c8..9c437f1c5 100644
--- a/source/règles/base.yaml
+++ b/source/règles/base.yaml
@@ -1,5 +1,3 @@
-- nom: contrat salarié
-  description: Le contrat qui lie une entreprise (via son établissement) à un individu, qui est alors son salarié.
 
 - espace: contrat salarié . CDD
   nom: CIF
@@ -631,7 +629,7 @@
       contrat salarié . type de contrat: CDD
 - nom: contrat salarié
   description: |
-    Activité encadrée par un contrat de travail de droit privé.
+    Le contrat qui lie une entreprise (via son établissement) à un individu, qui est alors son salarié.
 
     Le contrat n'est en fait pas nécessaire dans le droit français, il est possible d'employer quelqu'un sans contrat par exemple dans ces cas:
       - particuliers employeurs : plus de 8 heures par semaine ou de plus de 4 semaines consécutives dans l'année.