Add annuaire_education champ ui

app/javascript/components/ComboAnnuaireEducationSearch.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ReactQueryCacheProvider } from 'react-query';
+
+import ComboSearch from './ComboSearch';
+import { queryCache } from './shared/queryCache';
+
+function ComboAnnuaireEducationSearch(params) {
+  return (
+    <ReactQueryCacheProvider queryCache={queryCache}>
+      <ComboSearch
+        required={params.mandatory}
+        hiddenFieldId={params.hiddenFieldId}
+        scope="annuaire-education"
+        minimumInputLength={3}
+        transformResults={(_, { records }) => records}
+        transformResult={({
+          fields: {
+            identifiant_de_l_etablissement: id,
+            nom_etablissement,
+            nom_commune
+          }
+        }) => [id, `${nom_etablissement}, ${nom_commune} (${id})`]}
+      />
+    </ReactQueryCacheProvider>
+  );
+}
+
+export default ComboAnnuaireEducationSearch;

app/javascript/components/shared/queryCache.js

@@ -2,7 +2,8 @@ import { QueryCache } from 'react-query';
 import { isNumeric } from '@utils';
 import matchSorter from 'match-sorter';
 
-const { api_geo_url, api_adresse_url } = gon.autocomplete || {};
+const { api_geo_url, api_adresse_url, api_education_url } =
+  gon.autocomplete || {};
 
 export const queryCache = new QueryCache({
   defaultConfig: {
@@ -13,8 +14,11 @@ export const queryCache = new QueryCache({
 });
 
 function buildURL(scope, term) {
+  term = encodeURIComponent(term);
   if (scope === 'adresse') {
     return `${api_adresse_url}/search?q=${term}&limit=5`;
+  } else if (scope === 'annuaire-education') {
+    return `${api_education_url}/search?dataset=fr-en-annuaire-education&q=${term}&rows=5`;
   } else if (isNumeric(term)) {
     const code = term.padStart(2, '0');
     return `${api_geo_url}/${scope}?code=${code}&limit=5`;