Display geo areas descriptions

app/assets/stylesheets/new_design/carte.scss

@@ -0,0 +1,13 @@
+.areas-title {
+  font-weight: bold;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+.areas {
+  margin-bottom: 10px;
+
+  input {
+    margin-top: 5px;
+  }
+}

app/assets/stylesheets/new_design/map.scss

@@ -1,80 +0,0 @@
-.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;
-    }
-
-    .select2-container {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.areas-title {
-  font-weight: bold;
-  margin-bottom: 5px;
-}
-
-.areas {
-  margin-bottom: 10px;
-}

app/assets/stylesheets/new_design/utils.scss

@@ -53,3 +53,7 @@
 .mt-2 {
   margin-top: 2 * $default-spacer;
 }
+
+.mb-2 {
+  margin-bottom: 2 * $default-spacer;
+}

app/views/shared/champs/carte/_geo_areas.html.haml

@@ -3,7 +3,17 @@
   .areas
     %ul
       - champ.selections_utilisateur.each do |geo_area|
-        %li= geo_area_label(geo_area)
+        %li{ class: editing ? '' : 'flex column mb-2' }
+          - if editing
+            = link_to '#', data: { geo_area: geo_area.id } do
+              = geo_area_label(geo_area)
+            = text_field_tag :description, geo_area.description, data: { geo_area: geo_area.id }, placeholder: 'Description de la sélection'
+          - else
+            = link_to '#', data: { geo_area: geo_area.id } do
+              = geo_area_label(geo_area)
+            - if geo_area.description.present?
+              %span
+                = geo_area.description
 
 - if champ.quartiers_prioritaires?
   .areas-title Quartiers prioritaires
@@ -27,7 +37,9 @@
     - else
       %ul
         - champ.cadastres.each do |geo_area|
-          %li= geo_area_label(geo_area)
+          %li.flex.column.mb-2
+            = link_to '#', data: { geo_area: geo_area.id } do
+              = geo_area_label(geo_area)
 
 - if champ.parcelles_agricoles?
   .areas-title Parcelles agricoles (RPG)