retrieve color and opacity according to empty string

src/services/map-service.js

@@ -328,44 +328,23 @@ const mapService = {
     this.addLayers(layers);
   },
 
-  retrieveFeatureColor: function (featureType, properties) {
-    const colorsStyle = featureType.colors_style;
-    console.log('colorsStyle.colors', colorsStyle.colors);
-    //console.log('featureType.title', featureType.title);
-    //console.log('featureType.customfield_set', featureType.customfield_set);
-    //console.log('featureType', featureType);
-    //console.log('properties', properties);
-    if (featureType && colorsStyle && colorsStyle.custom_field_name) {
-      const fieldType = featureType.customfield_set.find((el) => el.name === colorsStyle.custom_field_name).field_type;
-      console.log('fieldType', fieldType);
-      const currentValue = properties[colorsStyle.custom_field_name];
-      console.log('currentValue', currentValue);
-      let colorStyle;
-      if (Object.entries(colorsStyle.colors).length > 0) {
-        colorStyle = colorsStyle.colors[currentValue];
-      } else {
-        //colorStyle = { Vide: , 'Non vide': }
-        colorStyle = colorsStyle.colors[currentValue];
-      }
-      return colorStyle ? colorStyle : featureType.color;
-    } else {
-      return featureType.color;
-    }
-  },
-
-  retrieveFeatureOpacity: function (featureType, properties) {
-    const colorsStyle = featureType.colors_style;
-    if (featureType && colorsStyle && colorsStyle.custom_field_name) {
-      const currentValue = properties[colorsStyle.custom_field_name];
-      //console.log('currentValue', currentValue);
-      if (currentValue && colorsStyle.opacities) {
-        const colorStyle = colorsStyle.opacities[currentValue];
-        //console.log('colorsStyle', colorsStyle);
-        return parseFloat(colorStyle ? colorStyle : featureType.opacity);
+  retrieveFeatureStyle: function (featureType, properties) {
+    const { colors_style, customfield_set } = featureType;
+    let { color, opacity } = featureType;
+
+    if (colors_style && colors_style.custom_field_name && customfield_set) {
+      const fieldType = customfield_set.find((el) => el.name === colors_style.custom_field_name).field_type;
+      const currentValue = properties[colors_style.custom_field_name];
+      if (fieldType === 'list') {
+        color = colors_style.colors[currentValue];
+        opacity = colors_style.opacities[currentValue];
+      } else if (fieldType === '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'];
       }
     }
-    //* parseFloat is not necessary but used for precaution
-    return parseFloat(featureType.opacity);
+    return { color, opacity };
   },
 
   addVectorTileLayer: function (url, projectId, featureTypes, formFilters) {
@@ -403,15 +382,14 @@ const mapService = {
     }
 
     if (featureType) {
-      const color = this.retrieveFeatureColor(featureType, properties);
+      const { color, opacity } = this.retrieveFeatureStyle(featureType, properties);
       const colorValue =
       color.value && color.value.length ?
         color.value : typeof color === 'string' && color.length ?
           color : '#000000';
 
       const rgbaColor = asArray(colorValue);
-      //* set opacity from feature-type colors_style
-      rgbaColor[3] = this.retrieveFeatureOpacity(featureType, properties) || 0.5;//opacity
+      rgbaColor[3] = opacity || 0.5;//opacity
 
       const defaultStyle = new Style(
         {

src/views/FeatureType/FeatureTypeSymbology.vue

@@ -73,19 +73,6 @@
               :selection.sync="selectedCustomfield"
             />
           </span>
-         <!--  <select
-            id="customfield-select"
-            v-model="selectedCustomfield"
-            class="ui dropdown"
-          >
-            <option
-              v-for="customfieldList of customizableFields"
-              :key="customfieldList.name"
-              :value="customfieldList.name"
-            >
-              <span>{{ customfieldList.label }}</span> <span>{{ customfieldList.field_type }}</span>
-            </option>
-          </select> -->
         </div>
         <div
           v-if="selectedCustomfield"
@@ -153,7 +140,6 @@ export default {
       loading: false,
       error: null,
       success: null,
-      //selectedCustomfield: null,
       form: {
         color: '#000000',
         icon: 'circle',
@@ -189,7 +175,6 @@ export default {
       if (this.feature_type) {
         let options = this.feature_type.customfield_set.filter(el => el.field_type === 'list' || el.field_type === 'char');
         options = options.map((el) => {
-          console.log(el);
           return { name: [el.name, `(${el.field_type === 'list' ? 'Liste de valeurs' : 'Chaîne de caractères'})`], value: el };
         });
         return options;
@@ -199,23 +184,14 @@ export default {
     selectedFieldOptions() {
       if (this.selectedCustomfield) {
         const customFieldSet = this.feature_type.customfield_set.find(el => el.name === this.selectedCustomfield);
-        console.log('customFieldSet', customFieldSet);
         if (customFieldSet.options.length > 0) {
           return customFieldSet.options;
         } else if (customFieldSet.field_type === 'char') {
           return ['Vide', 'Non vide'];
         }
-        /* const customfield_set = this.feature_type.customfield_set.find(
-          el => el.name === this.selectedCustomfield).options;
-        if (customfield_set.options) {
-          return customfield_set.options.length > 0 ? customfield_set.options : ['Vide', 'Non vide'];
-        } */
       }
       return [];
     },
-    /* selectedGetterSetter() {
-
-    } */
     selectedCustomfield: {
       get() {
         return this.form.colors_style.custom_field_name;
@@ -229,13 +205,6 @@ export default {
   },
 
   watch: {
-    /* selectedCustomfield(newValue, oldValue) {
-      console.log(newValue);
-      if (newValue && newValue !== oldValue) {
-        this.selectedCustomfield = newValue.value.name;
-        this.form.colors_style.custom_field_name = newValue.value;
-      } 
-    }, */
     feature_type(newValue) {
       if (newValue) {
         // Init form
@@ -384,10 +353,7 @@ form {
     font-weight: 600;
     font-size: 1.1em;
   }
-  // TODO : à supprimer après remplacement par dropdown
-  #customfield-select {
-    width: 50% !important;
-  }
+
   #custom_types-dropdown > .dropdown {
     width: 50%;
   }