Merge branch 'redmine-issues/14051' into 'develop'

REDMINE_ISSUE-14051|Changer la couleur en fonction de l'état d'une case à cocher

See merge request geocontrib/geocontrib-frontend!425

src/components/FeatureType/FeatureTypeCustomForm.vue

 <template>
-  <div class="ui teal segment pers-field">
+  <div
+    :id="`custom_form-${form.position.value}`"
+    class="ui teal segment pers-field"
+  >
     <h4>
       Champ personnalisé
       <button
@@ -95,7 +98,10 @@
           </ul>
         </div>
 
-        <div class="required field">
+        <div
+          id="field_type"
+          class="required field"
+        >
           <label :for="form.field_type.id_for_label">{{
             form.field_type.label
           }}</label>

src/components/FeatureType/SymbologySelector.vue

 <template>
   <div>
     <div class="three fields">
-      <h4 :class="['field', {'row-title' : title == 'Symbologie par défault :'}]">
+      <h4 :class="['field', {'row-title' : isDefault}]">
         {{ title }}
       </h4>
       <div class="required inline field">
@@ -14,7 +14,8 @@
           :name="form.color.html_name"
         >
       </div>
-      <div v-if="geomType === 'polygon' || title !== 'Symbologie par défault :'">
+
+      <div v-if="geomType === 'polygon' || !isDefault">
         <label>Opacité &nbsp;<span>(%)</span></label>
         <div class="range-container">
           <input
@@ -31,9 +32,11 @@
         </div>
       </div>
     </div>
+
     <div
+      v-if="isIconPickerModalOpen"
       ref="iconsPickerModal"
-      :class="['ui dimmer modal transition', { active: isIconPickerModalOpen }]"
+      class="ui dimmer modal transition active"
     >
       <div class="header">
         Sélectionnez le symbole pour ce type de signalement :
@@ -46,8 +49,7 @@
           @click="selectIcon(icon)"
         >
           <i
-            :class="`fa-${icon}`"
-            class="icon alt fas"
+            :class="`icon alt fas fa-${icon}`"
             aria-hidden="true"
           />
         </div>
@@ -84,8 +86,8 @@ export default {
       default: 'circle'
     },
     initOpacity: {
-      type: String,
-      default: '1'
+      type: [String, Number],
+      default: '0.5'
     },
     geomType: {
       type: String,
@@ -113,12 +115,18 @@ export default {
     };
   },
 
+  computed: {
+    isDefault() {
+      return this.title === 'Symbologie par défault :';
+    }
+  },
+
   watch: {
     form: {
       deep: true,
       handler(newValue) {
         this.$emit('set', {
-          name: this.title === 'Symbologie par défault :' ? null : this.title,
+          name: this.isDefault ? null : this.title,
           value: newValue
         });
       }

src/services/map-service.js

@@ -336,18 +336,22 @@ const mapService = {
       const fieldType = customfield_set.find((el) => el.name === colors_style.custom_field_name).field_type;
       const currentValue = properties[colors_style.custom_field_name];
 
-      if (currentValue) {
-        switch (fieldType) {
-        case 'list' :
+      switch (fieldType) {
+      case 'list' :
+        if (currentValue) {
           color = colors_style.colors[currentValue];
           opacity = colors_style.opacities[currentValue];
-          break;
-        case 'char': //* if the custom field is supposed to be a string
-          //* check if its current value is empty or not, to select a color | https://redmine.neogeo.fr/issues/14048
-          color = colors_style.value.colors[currentValue ? 'Non vide' : 'Vide'];
-          opacity = colors_style.value.opacities[currentValue ? 'Non vide' : 'Vide'];
-          break;
         }
+        break;
+      case 'char': //* if the custom field is supposed to be a string
+        //* check if its current value is empty or not, to select a color | https://redmine.neogeo.fr/issues/14048
+        color = colors_style.value.colors[currentValue ? 'Non vide' : 'Vide'];
+        opacity = colors_style.value.opacities[currentValue ? 'Non vide' : 'Vide'];
+        break;
+      case 'boolean':
+        color = colors_style.value.colors[currentValue ? 'Coché' : 'Décoché'];
+        opacity = colors_style.value.opacities[currentValue ? 'Coché' : 'Décoché'];
+        break;
       }
     }
     return { color, opacity };

src/views/FeatureType/FeatureTypeSymbology.vue

@@ -66,13 +66,13 @@
           >
             Champ de personnalisation de la symbologie:
           </label>
-          <span id="custom_types-dropdown">
+          <div id="custom_types-dropdown">
             <Dropdown
               :options="customizableFields"
               :selected="selectedCustomfield"
               :selection.sync="selectedCustomfield"
             />
-          </span>
+          </div>
         </div>
         <div
           v-if="selectedCustomfield"
@@ -83,6 +83,7 @@
             :key="option"
           >
             <SymbologySelector
+              :id="option"
               :title="option"
               :init-color="feature_type.colors_style.value ?
                 feature_type.colors_style.value.colors[option] ?
@@ -174,9 +175,9 @@ export default {
     ]),
     customizableFields() {
       if (this.feature_type) {
-        let options = this.feature_type.customfield_set.filter(el => el.field_type === 'list' || el.field_type === 'char');
+        let options = this.feature_type.customfield_set.filter(el => el.field_type === 'list' || el.field_type === 'char' || el.field_type === 'boolean');
         options = options.map((el) => {
-          return { name: [el.name, `(${el.field_type === 'list' ? 'Liste de valeurs' : 'Chaîne de caractères'})`], value: el };
+          return { name: [el.name, this.getFieldLabel(el.field_type)], value: el };
         });
         return options;
       }
@@ -189,6 +190,8 @@ export default {
           return customFieldSet.options;
         } else if (customFieldSet.field_type === 'char') {
           return ['Vide', 'Non vide'];
+        } else if (customFieldSet.field_type === 'boolean') {
+          return ['Décoché', 'Coché'];
         }
       }
       return [];
@@ -336,6 +339,17 @@ export default {
         return feature_type.colors_style.value.opacities[optionName];
       }
       return null;
+    },
+
+    getFieldLabel(fieldType) {
+      switch (fieldType) {
+      case 'list':
+        return'Liste de valeurs';
+      case 'char':
+        return 'Chaîne de caractères';
+      case 'boolean':
+        return 'Champs de types booléen';
+      }
     }
   }
 };
@@ -350,7 +364,6 @@ h1 {
 form {
   text-align: left;
   #customfield-select-label {
-    //cursor: pointer;
     font-weight: 600;
     font-size: 1.1em;
   }