Implement carte champ editor

app/assets/stylesheets/new_design/forms.scss

@@ -228,8 +228,14 @@
     // scss-lint:enable
   }
 
-  .algolia-autocomplete {
-    margin-bottom: 2 * $default-padding;
+  .editable-champ {
+    &:not(.editable-champ-carte) .algolia-autocomplete {
+      margin-bottom: 2 * $default-padding;
+    }
+
+    .geo-areas {
+      margin-bottom: 2 * $default-padding;
+    }
   }
 
   input.aa-input,

app/assets/stylesheets/new_design/map.scss

@@ -1,4 +1,77 @@
-#map {
+#map,
+.carte {
   height: 400px;
   margin-bottom: 16px;
+  z-index: 0;
+}
+
+.leaflet-container path {
+  cursor: url("/assets/edit.png"), default !important;
+}
+
+.carte {
+  &.edit {
+    g path.leaflet-polygon {
+      transition: all 0.25s;
+      stroke-width: 4px;
+      stroke-opacity: 1;
+      stroke: #D7217E;
+      position: absolute;
+      z-index: 100;
+      fill: #D7217E;
+      fill-opacity: 0.75;
+    }
+
+    div.leaflet-edge {
+      box-shadow: 0 0 0 2px #FFFFFF, 0 0 10px rgba(0, 0, 0, 0.35);
+      border: 5px solid #D7217E;
+      border-radius: 10px;
+      transition: opacity 0.25s;
+      cursor: move;
+      opacity: 0;
+      pointer-events: none;
+      box-sizing: border-box;
+      width: 0 !important;
+      height: 0 !important;
+    }
+  }
+
+  &.mode-create {
+    cursor: url("/assets/pencil.png"), crosshair !important;
+  }
+
+  &.mode-edit div.leaflet-edge {
+    opacity: 1;
+    pointer-events: all;
+  }
+
+  &.mode-delete path.leaflet-polygon {
+    cursor: no-drop !important;
+
+    &:hover {
+      fill: #4D4D4D !important;
+    }
+  }
+}
+
+.editable-champ-carte {
+  .toolbar {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+
+    .button {
+      width: 200px;
+      margin-right: 10px;
+    }
+  }
+}
+
+.areas-title {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.areas {
+  margin-bottom: 10px;
 }

app/javascript/new_design/champs/carte.js

@@ -0,0 +1,62 @@
+import { CREATE } from 'leaflet-freedraw';
+import { delegate } from '@utils';
+import {
+  initMap,
+  getCurrentMap,
+  geocodeAddress,
+  drawCadastre,
+  drawQuartiersPrioritaires,
+  drawUserSelection,
+  addFreeDrawEvents
+} from '../../shared/carte';
+
+function initialize() {
+  for (let element of document.querySelectorAll('.carte')) {
+    diplayMap(element, null, true);
+  }
+
+  window.DS.drawMapData = (selector, data) => {
+    let element = document.querySelector(selector);
+    diplayMap(element, data);
+  };
+}
+
+function diplayMap(element, data, initial = false) {
+  data = data || JSON.parse(element.dataset.geo);
+  let editable = element.classList.contains('edit');
+
+  let map = initMap(element, data.position, editable);
+
+  // draw external polygons
+  drawCadastre(map, data, editable);
+  drawQuartiersPrioritaires(map, data, editable);
+
+  // draw user polygon
+  if (initial) {
+    drawUserSelection(map, data, editable);
+
+    if (editable) {
+      let input = element.parentElement.querySelector('input[data-remote]');
+      addFreeDrawEvents(map, input);
+    }
+  }
+}
+
+addEventListener('turbolinks:load', initialize);
+
+delegate('click', '.toolbar .new-area', event => {
+  event.preventDefault();
+  let map = getCurrentMap(event.target);
+
+  if (map) {
+    map.freeDraw.mode(CREATE);
+  }
+});
+
+delegate('autocomplete:select', '.toolbar [data-address]', event => {
+  let map = getCurrentMap(event.target);
+
+  if (map) {
+    geocodeAddress(map, event.detail.label);
+  }
+});

app/javascript/packs/application.js

@@ -18,6 +18,7 @@ import '../new_design/form-validation';
 import '../new_design/carto';
 import '../new_design/select2';
 
+import '../new_design/champs/carte';
 import '../new_design/champs/linked-drop-down-list';
 
 import { toggleCondidentielExplanation } from '../new_design/avis';

app/views/shared/dossiers/editable_champs/_carte.html.haml

@@ -0,0 +1,11 @@
+.toolbar
+  %button.button.primary.new-area Ajouter une zone
+  %input.address{ data: { address: true, autocomplete: 'address' }, placeholder: 'Saissisez une adresse ou positionner la carte' }
+
+.carte.edit{ data: { geo: geo_data(champ) }, class: "carte-#{form.index}" }
+
+.geo-areas
+  = render partial: 'shared/champs/carte/geo_areas', locals: { champ: champ, error: false }
+
+= form.hidden_field :value,
+  data: { remote: true, url: champs_carte_path(form.index), params: { champ_id: champ&.id }.to_query, method: 'post' }