adapt colorsStyleList to seperate label and value in dropdown

src/components/feature_type/FeatureTypeCustomForm.vue

@@ -241,9 +241,6 @@ export default {
         options: this.form.options.value,
       };
       this.$store.commit("feature_type/UPDATE_CUSTOM_FORM", data);
-      /* if (this.form.field_type.value === "list") {
-        this.$emit("newlistvalue");
-      } */
     },
     trimWhiteSpace(string) {
       // TODO : supprimer les espaces pour chaque option au début et à la fin QUE à la validation
@@ -256,6 +253,7 @@ export default {
   },
 
   mounted() {
+    //* add datas from store to state to avoid mutating directly store with v-model (not good practice), could have used computed with getter and setter as well
     this.fillCustomFormData(this.customForm);
   },
 };

src/store/modules/feature_type.js

@@ -38,8 +38,11 @@ const feature_type = {
       const index = state.customForms.findIndex((el) => el.dataKey === payload.dataKey);
       if (index !== -1) {
         state.customForms[index] = payload;
-         //* trigger update of available options for colors style in feature_type_edit
-        state.colorsStyleList = state.customForms.filter(cust => cust.options && cust.options.length)
+        //* trigger update of available options for colors style in feature_type_edit
+        state.colorsStyleList = state.customForms.filter(cust => cust.options && cust.options.length).map(el => {
+          //* in dropdown, value is the name and name is the label to be displayed, could be changed...
+          return { value: el.name, name: el.label, options: el.options }
+        })
       }
     },
     REMOVE_CUSTOM_FORM(state, payload) {
@@ -59,8 +62,6 @@ const feature_type = {
     feature_type: state => state.feature_types.find(
       (el) => el.slug === state.current_feature_type_slug
     ),
-    //* filter options of special field that is of type list to select a color
-    // colorsStyleList: (state) => state.customForms.filter(cust => cust.options && cust.options.length),
   },
   actions: {
     GET_PROJECT_FEATURE_TYPES({ commit }, project_slug) {
@@ -139,7 +140,6 @@ const feature_type = {
           .then((response) => {
             if (response && response.status === 200) {
               dispatch("GET_IMPORTS", feature_type_slug);
-              // TODO : reload dernier signalements
             }
             return response
           })
@@ -161,8 +161,8 @@ const feature_type = {
             commit("SET_IMPORT_FEATURE_TYPES_DATA", response.data);
           }
         })
-        .catch((/* err */) => {
-          //console.log(err);
+        .catch((error) => {
+          throw (error);
         });
     }
   }

src/views/feature_type/Feature_type_edit.vue

@@ -172,7 +172,6 @@ export default {
       action: "create",
       dataKey: 0,
       error: null,
-      //colorsStyleOptions: [],
       geomTypeChoices: [
         { value: "linestring", name: "Ligne" },
         { value: "point", name: "Point" },
@@ -180,8 +179,6 @@ export default {
       ],
       form: {
         colors_style: {
-          //value: null,
-          // options: [],
           fields: [],
           value: {
             colors: {},
@@ -234,7 +231,7 @@ export default {
   computed: {
     ...mapGetters(["project"]),
     ...mapState("feature_type", ["customForms", "colorsStyleList"]),
-    ...mapGetters("feature_type", ["feature_type" /* "colorsStyleList" */]),
+    ...mapGetters("feature_type", ["feature_type"]),
     selectedGeomType: {
       get() {
         const currentGeomType = this.geomTypeChoices.find(
@@ -258,11 +255,13 @@ export default {
       set(newValue) {
         console.log("selectedColorsStyle", newValue);
         const newColorsStyle = {
-          colors: { [newValue.options[0]]: "#000000", [newValue.options[1]]: "#000000" },
-          custom_field_name: newValue.name,
+          colors: {
+            [newValue.options[0]]: "#000000",
+            [newValue.options[1]]: "#000000",
+          },
+          custom_field_name: newValue.value,
         };
         this.form.colors_style.value = newColorsStyle;
-        //this.updateColorsFields();
         this.updateStore();
       },
     },
@@ -272,10 +271,6 @@ export default {
     feature_type(newValue) {
       if (newValue) {
         this.fillFormData(newValue);
-        /* this.$store.commit( // ? could be erased ?
-          "feature_type/SET_CUSTOM_FORMS",
-          newValue.customfield_set
-        ); */
       }
     },
   },
@@ -316,15 +311,6 @@ export default {
       this.updateStore();
     },
 
-    /* updateColorsFields() {
-      console.log("updateColorsFields");
-      const colorsStyleValue = {
-        colors: { Boon: "#008f51", Poolvoerde: "#935100" },
-        custom_field_name: "source",
-      };
-      // this.form.colors_style.value.colors = colorsStyleValue;
-    }, */
-
     setColorStyles(event) {
       const { name, value } = event.target;
       this.form.colors_style.value.colors[name] = value;
@@ -422,7 +408,7 @@ export default {
         .scrollIntoView({ block: "end", inline: "nearest" });
     },
 
-    // * Methodes for geojson import * //
+    // ****** Methodes for geojson import ****** //
     toNewFeatureType() {
       this.$router.push({
         name: "ajouter-type-signalement",
@@ -499,6 +485,7 @@ export default {
   mounted() {
     if (this.action === "edit" || this.action === "duplicate") {
       if (this.feature_type) {
+        //* add datas from store to state to avoid mutating directly store with v-model (not good practice), could have used computed with getter and setter as well
         this.fillFormData(this.feature_type);
       }
       if (this.action === "duplicate") {
@@ -514,7 +501,7 @@ export default {
     if (this.geojson) {
       this.importGeoJson();
       if (this.$store.state.feature_type.fileToImport.name) {
-        this.form.title.value = // * give the filename as title by default
+        this.form.title.value = // * use the filename as title by default
           this.$store.state.feature_type.fileToImport.name.split(".")[0];
       }
     }