Anom/redmine ticket 11807 basemap opacity

Répartir les erreurs dans les différents composants était compliqué, j'ai donc fait en sorte que la valeur d'opacité soit toujours valide pour faire plus rapide et tout de même reporter le message générique d'échec de geocontrib-django.

src/components/project/ProjectMappingContextLayer.vue

@@ -24,7 +24,14 @@
           class="field three wide {% if form.opacity.errors %} error{% endif %}"
         >
           <label for="opacity">Opacité</label>
-          <input type="number" v-model.number="layerOpacity" step="0.01" />
+          <input
+            type="number"
+            v-model.number="layerOpacity"
+            oninput="validity.valid||(value='');"
+            step="0.01"
+            min="0"
+            max="1"
+          />
           <!-- {{ form.opacity.errors }} -->
         </div>
         <div class="field three wide">
@@ -68,23 +75,23 @@ export default {
     selectedLayer: {
       get() {
         const matchingLayer = this.retrieveLayer(this.layer.title);
-        if (matchingLayer != undefined){
+        if (matchingLayer != undefined) {
           return {
             name: matchingLayer != undefined ? matchingLayer.service : "",
             value: this.layer ? this.layer.title : "",
           };
         }
-        return []
+        return [];
       },
 
       set(newValue) {
         const matchingLayer = this.retrieveLayer(newValue.title);
-        if (matchingLayer != undefined){
+        if (matchingLayer != undefined) {
           this.updateLayer({
             ...this.layer,
             service: newValue.name,
             title: newValue.value,
-            id:  matchingLayer.id,
+            id: matchingLayer.id,
           });
         }
       },
@@ -95,13 +102,21 @@ export default {
         return this.layer.opacity;
       },
       set(newValue) {
-        this.updateLayer({ ...this.layer, opacity: newValue });
+        if (newValue) {
+          //* check if value was filled
+          this.updateLayer({ ...this.layer, opacity: newValue });
+        }
       },
     },
 
     availableLayers: function () {
       return this.layers.map((el) => {
-        return { id: el.id, name: el.service, value: el.title, title: el.title };
+        return {
+          id: el.id,
+          name: el.service,
+          value: el.title,
+          title: el.title,
+        };
       });
     },
 
@@ -135,7 +150,7 @@ export default {
 
   mounted() {
     const matchingLayer = this.retrieveLayer(this.layer.title);
-    if (matchingLayer != undefined){
+    if (matchingLayer != undefined) {
       this.updateLayer({
         ...this.layer,
         service: matchingLayer.service,