Revert "Merge pull request #4552 from tchak/champ-communes"

This reverts commit 4cec26f73a, reversing
changes made to 0ef25ef36c.

app/javascript/new_design/select2.js

@@ -1,158 +1,46 @@
 import $ from 'jquery';
 import 'select2';
 
-const { api_geo_url, api_adresse_url } = gon.autocomplete || {};
-
-const language = {
-  errorLoading: function() {
-    return 'Les résultats ne peuvent pas être chargés.';
-  },
-  inputTooLong: function(args) {
-    var overChars = args.input.length - args.maximum;
-
-    return 'Supprimez ' + overChars + ' caractère' + (overChars > 1 ? 's' : '');
-  },
-  inputTooShort: function(args) {
-    var remainingChars = args.minimum - args.input.length;
-
-    return (
-      'Saisissez au moins ' +
-      remainingChars +
-      ' caractère' +
-      (remainingChars > 1 ? 's' : '')
-    );
-  },
-  loadingMore: function() {
-    return 'Chargement de résultats supplémentaires…';
-  },
-  maximumSelected: function(args) {
-    return (
-      'Vous pouvez seulement sélectionner ' +
-      args.maximum +
-      ' élément' +
-      (args.maximum > 1 ? 's' : '')
-    );
-  },
-  noResults: function() {
-    return 'Aucun résultat trouvé';
-  },
-  searching: function() {
-    return 'Recherche en cours…';
-  },
-  removeAllItems: function() {
-    return 'Supprimer tous les éléments';
-  }
-};
-
-const baseOptions = {
-  language,
-  width: '100%'
-};
-
-const baseAjaxOptions = {
-  delay: 250,
-  cache: true,
-  data({ term: nom }) {
-    return {
-      nom,
-      fields: 'nom,code'
-    };
-  },
-  processResults(data) {
-    return {
-      results: data.map(({ nom }) => ({ id: nom, text: nom }))
-    };
-  }
-};
-
-const regionsOptions = {
-  ...baseOptions,
-  minimumInputLength: 2,
-  ajax: { url: `${api_geo_url}/regions`, ...baseAjaxOptions }
-};
-
-const communesOptions = {
-  ...baseOptions,
-  minimumInputLength: 2,
-  ajax: { url: `${api_geo_url}/communes`, ...baseAjaxOptions }
-};
-
-const etranger99 = { id: '99 - Étranger', text: '99 - Étranger' };
-const departementsOptions = {
-  ...baseOptions,
-  minimumInputLength: 2,
-  ajax: {
-    ...baseAjaxOptions,
-    url: `${api_geo_url}/departements`,
-    processResults(data) {
-      return {
-        results: data
-          .map(({ nom, code }) => ({
-            id: `${code} - ${nom}`,
-            text: `${code} - ${nom}`
-          }))
-          .concat([etranger99])
-      };
-    }
-  }
-};
-
-const adresseOptions = {
-  ...baseOptions,
-  minimumInputLength: 2,
-  ajax: {
-    ...baseAjaxOptions,
-    url: `${api_adresse_url}/search`,
-    data({ term: q }) {
-      return {
-        q,
-        limit: 5
-      };
-    },
-    processResults(data) {
-      return {
-        results: data.features.map(({ properties: { label }, geometry }) => ({
-          id: label,
-          text: label,
-          geometry
-        }))
-      };
-    }
-  }
-};
-
-const templateOption = ({ text }) =>
+const optionTemplate = email =>
   $(
-    `<span class="custom-select2-option"><span class="icon person"></span>${text}</span>`
+    '<span class="custom-select2-option"><span class="icon person"></span>' +
+      email.text +
+      '</span>'
   );
 
 addEventListener('ds:page:update', () => {
-  $('select.select2').select2(baseOptions);
-  $('select.select2.departements').select2(departementsOptions);
-  $('select.select2.regions').select2(regionsOptions);
-  $('select.select2.communes').select2(communesOptions);
-  $('select.select2.adresse').select2(adresseOptions);
+  $('select.select2').select2({
+    language: 'fr',
+    width: '100%'
+  });
 
   $('.columns-form select.select2-limited').select2({
-    width: '300px',
+    language: 'fr',
     placeholder: 'Sélectionnez des colonnes',
-    maximumSelectionLength: '5'
+    maximumSelectionLength: '5',
+    width: '300px'
   });
 
   $('.recipients-form select.select2-limited').select2({
-    language,
-    width: '300px',
+    language: 'fr',
     placeholder: 'Sélectionnez des instructeurs',
-    maximumSelectionLength: '30'
+    maximumSelectionLength: '30',
+    width: '300px'
   });
 
   $('select.select2-limited.select-instructeurs').select2({
-    language,
+    language: 'fr',
     dropdownParent: $('.instructeur-wrapper'),
     placeholder: 'Saisir l’adresse email de l’instructeur',
     tags: true,
     tokenSeparators: [',', ' '],
-    templateResult: templateOption,
-    templateSelection: templateOption
+    templateResult: optionTemplate,
+    templateSelection: function(email) {
+      return $(
+        '<span class="custom-select2-option"><span class="icon person"></span>' +
+          email.text +
+          '</span>'
+      );
+    }
   });
 });

app/javascript/packs/application-old.js

@@ -8,6 +8,7 @@ import '../shared/page-update-event';
 import '../shared/activestorage/ujs';
 import '../shared/rails-ujs-fix';
 import '../shared/safari-11-file-xhr-workaround';
+import '../shared/autocomplete';
 import '../shared/remote-input';
 import '../shared/franceconnect';
 

app/javascript/packs/application.js

@@ -13,6 +13,7 @@ import '../shared/activestorage/ujs';
 import '../shared/activestorage/attachment-checker';
 import '../shared/rails-ujs-fix';
 import '../shared/safari-11-file-xhr-workaround';
+import '../shared/autocomplete';
 import '../shared/remote-input';
 import '../shared/franceconnect';
 import '../shared/toggle-target';

app/javascript/shared/autocomplete.js

@@ -0,0 +1,51 @@
+import autocomplete from 'autocomplete.js';
+import { getJSON, fire } from '@utils';
+
+const sources = [
+  {
+    type: 'address',
+    url: '/address/suggestions'
+  }
+];
+
+const options = {
+  autoselect: true,
+  minLength: 1
+};
+
+function selector(type) {
+  return `[data-autocomplete=${type}]`;
+}
+
+function source(url) {
+  return {
+    source(query, callback) {
+      getJSON(url, { request: query }).then(callback);
+    },
+    templates: {
+      suggestion({ label, mine }) {
+        const mineClass = `path-mine-${mine ? 'true' : 'false'}`;
+        const openTag = `<div class="aa-suggestion ${mineClass}">`;
+        return autocomplete.escapeHighlightedString(label, openTag, '</div>');
+      }
+    },
+    debounce: 300
+  };
+}
+
+addEventListener('ds:page:update', function() {
+  for (let { type, url } of sources) {
+    for (let element of document.querySelectorAll(selector(type))) {
+      element.removeAttribute('data-autocomplete');
+      autocompleteInitializeElement(element, url);
+    }
+  }
+});
+
+function autocompleteInitializeElement(element, url) {
+  const select = autocomplete(element, options, [source(url)]);
+  select.on('autocomplete:selected', ({ target }, suggestion) => {
+    fire(target, 'autocomplete:select', suggestion);
+    select.autocomplete.setVal(suggestion.label);
+  });
+}

app/javascript/shared/carte.js

@@ -1,6 +1,5 @@
 /* globals FreeDraw L */
-import { fire, delegate } from '@utils';
-import $ from 'jquery';
+import { fire, getJSON, delegate } from '@utils';
 
 import polygonArea from './polygon_area';
 
@@ -114,6 +113,14 @@ function drawParcellesAgricoles(map, { parcellesAgricoles }, editable = false) {
   );
 }
 
+function geocodeAddress(map, query) {
+  getJSON('/address/geocode', { request: query }).then(data => {
+    if (data.lat !== null) {
+      map.setView(new L.LatLng(data.lat, data.lon), data.zoom);
+    }
+  });
+}
+
 function getCurrentMap(element) {
   if (!element.matches('.carte')) {
     const closestCarteElement = element.closest('.carte');
@@ -239,12 +246,10 @@ delegate('click', '.toolbar .new-area', event => {
   }
 });
 
-$(document).on('select2:select', 'select[data-address]', event => {
+delegate('autocomplete:select', '.toolbar [data-address]', event => {
   const map = getCurrentMap(event.target);
-  const { geometry } = event.params.data;
 
-  if (map && geometry && geometry.type === 'Point') {
-    const [lon, lat] = geometry.coordinates;
-    map.setView(new L.LatLng(lat, lon), 14);
+  if (map) {
+    geocodeAddress(map, event.detail.label);
   }
 });