fix feature_style colors_style data from api

src/components/feature_type/FeatureTypeCustomForm.vue

@@ -215,10 +215,12 @@ export default {
 
   methods: {
     fillCustomFormData(customFormData) {
-      this.f
       for (let el in customFormData) {
         if (el && this.form[el] && customFormData[el]) {
-          this.form[el].value = customFormData[el];
+          //* check if is an object, because data from api is a string, while import from django is an object
+          this.form[el].value = customFormData[el].value
+            ? customFormData[el].value
+            : customFormData[el];
         }
       }
       this.updateStore();
@@ -237,7 +239,7 @@ export default {
         position: this.form.position.value,
         field_type: this.form.field_type.value,
         options: this.form.options.value,
-      }
+      };
       this.$store.commit("feature_type/UPDATE_CUSTOM_FORM", data);
     },
     updateOptions() {

src/store/modules/feature_type.js

@@ -7,7 +7,7 @@ const feature_type = {
     customForms: [],
     current_feature_type_slug: null,
     feature_types: [],
-    filenameToImport: null,
+    fileToImport: null,
     importFeatureTypeData: [],
   },
 
@@ -43,8 +43,8 @@ const feature_type = {
     SET_IMPORT_FEATURE_TYPES_DATA(state, payload) {
       state.importFeatureTypeData = payload;
     },
-    SET_FILE_NAME_TO_IMPORT(state, payload) {
-      state.filenameToImport = payload;
+    SET_FILE_TO_IMPORT(state, payload) {
+      state.fileToImport = payload;
     },
   },
   getters: {
@@ -73,25 +73,30 @@ const feature_type = {
         }),
         //'is_editable': true,
       }
+      console.log("requestType", requestType)
 
       if (requestType === "post") {
         return axios
           .post(`${process.env.VUE_APP_DJANGO_API_BASE}feature-types/`, data)
           .then((response) => {
-            const feature_type_slug = response.data.slug;
-            const status = response.status;
-            return { feature_type_slug, status };
+            if (response) {
+              const feature_type_slug = response.data.slug;
+              const status = response.status;
+              return { feature_type_slug, status };
+            }
           })
           .catch((/* error */) => {
             //console.error(error);
           });
-      } else {
+      } else if (requestType === "put") {
         return axios
           .put(`${process.env.VUE_APP_DJANGO_API_BASE}feature-types/${getters.feature_type.slug}/`, data)
           .then((response) => {
-            const feature_type_slug = response.data.slug;
-            const status = response.status;
-            return { feature_type_slug, status };
+            if (response) {
+              const feature_type_slug = response.data.slug;
+              const status = response.status;
+              return { feature_type_slug, status };
+            }
           })
           .catch((/* error */) => {
             //console.error(error);
@@ -102,9 +107,9 @@ const feature_type = {
     POST_FEATURES_FROM_GEOJSON({ state, dispatch }, payload) {
       const { feature_type_slug } = payload
 
-      if (state.filenameToImport.size > 0) {
+      if (state.fileToImport.size > 0) {
         var formData = new FormData();
-        formData.append("json_file", state.filenameToImport);
+        formData.append("json_file", state.fileToImport);
         formData.append("feature_type_slug", feature_type_slug);
         let url =
           process.env.VUE_APP_DJANGO_API_BASE +
@@ -116,7 +121,7 @@ const feature_type = {
             },
           })
           .then((response) => {
-            if (response.status === 200) {
+            if (response && response.status === 200) {
               dispatch("GET_IMPORTS", feature_type_slug);
               // TODO : RELOAD DERNIER SIGNALEMENTS
             }
@@ -137,7 +142,9 @@ const feature_type = {
       axios
         .get(url)
         .then((response) => {
-          commit("SET_IMPORT_FEATURE_TYPES_DATA", response.data);
+          if (response) {
+            commit("SET_IMPORT_FEATURE_TYPES_DATA", response.data);
+          }
         })
         .catch((/* err */) => {
           //console.log(err);

src/views/feature_type/Feature_type_detail.vue

@@ -68,7 +68,7 @@
               <div class="field">
                 <label class="ui icon button" for="json_file">
                   <i class="file icon"></i>
-                  <span class="label">{{ filenameToImport.name }}</span>
+                  <span class="label">{{ fileToImport.name }}</span>
                 </label>
                 <input
                   type="file"
@@ -80,7 +80,7 @@
                 />
               </div>
               <button
-                :disabled="filenameToImport.size == 0"
+                :disabled="fileToImport.size == 0"
                 @click="importGeoJson"
                 class="ui fluid teal icon button"
               >
@@ -226,11 +226,10 @@ export default {
 
   data() {
     return {
-      filenameToImport: {
+      fileToImport: {
         name: "Sélectionner un fichier GeoJSON ...",
         size: 0,
       },
-      fileToImport: {},
       showImport: false,
       showExport: true,
     };
@@ -240,19 +239,19 @@ export default {
     onFileChange(e) {
       var files = e.target.files || e.dataTransfer.files;
       if (!files.length) return;
-      this.filenameToImport = files[0]; // todo : remove this value from state as it stored
+      this.fileToImport = files[0]; // todo : remove this value from state as it stored
       this.$store.commit(
-        "feature_type/SET_FILE_NAME_TO_IMPORT",
-        this.filenameToImport
+        "feature_type/SET_FILE_TO_IMPORT",
+        this.fileToImport
       );
-      //console.log(this.filenameToImport)
+      //console.log(this.fileToImport)
     },
 
     importGeoJson() {
       this.$store.dispatch("feature_type/POST_FEATURES_FROM_GEOJSON", {
         slug: this.$route.params.slug,
         feature_type_slug: this.$route.params.feature_type_slug,
-        filenameToImport: this.filenameToImport,
+        fileToImport: this.fileToImport,
       });
     },
     exportFeatures() {

src/views/feature_type/Feature_type_edit.vue

@@ -160,7 +160,7 @@ export default {
     FeatureTypeCustomForm,
   },
 
-  props: ["geojson", "filenameToImport"],
+  props: ["geojson", "fileToImport"],
 
   data() {
     return {
@@ -174,9 +174,13 @@ export default {
       ],
       form: {
         colors_style: {
-          value: null,
+          //value: null,
           options: [],
           fields: [],
+          value: {
+            colors: { premier: "#8df900", deuxième: "#fefb00" },
+            custom_field_name: "list",
+          },
         },
         color: {
           id_for_label: "couleur",
@@ -243,10 +247,11 @@ export default {
     },
     selected_colors_style: {
       get() {
-        return this.form.colors_style.value;
+        return this.form.colors_style.value.custom_field_name;
       },
       set(newValue) {
-        this.form.colors_style.value = newValue;
+        console.log(newValue)
+        this.form.colors_style.value.custom_field_name = newValue;
         this.iniateColorsStyleFields();
         this.updateStore();
       },
@@ -365,6 +370,7 @@ export default {
     sendFeatureType() {
       // * si édition d'une feature_type déja existante, faire un put
       const requestType = this.action === "edit" ? "put" : "post";
+      console.log;
       if (this.checkForm()) {
         this.$store
           .dispatch("feature_type/SEND_FEATURE_TYPE", requestType)
@@ -401,9 +407,10 @@ export default {
     },
 
     async postFeatureTypeThenFeatures() {
+      const requestType = this.action === "edit" ? "put" : "post";
       if (this.checkForm()) {
         await this.$store
-          .dispatch("feature_type/POST_FEATURE_TYPE")
+          .dispatch("feature_type/SEND_FEATURE_TYPE", requestType)
           .then(({ feature_type_slug }) => {
             if (feature_type_slug) {
               this.postFeatures(feature_type_slug);
@@ -510,9 +517,9 @@ export default {
       // }
     } else if (this.geojson) {
       this.importGeoJson();
-      if (this.$store.state.feature_type.filenameToImport.name) {
+      if (this.$store.state.feature_type.fileToImport.name) {
         this.form.title.value = // * give the filename as title by default
-          this.$store.state.feature_type.filenameToImport.name.split(".")[0];
+          this.$store.state.feature_type.fileToImport.name.split(".")[0];
       }
     }
   },

src/views/project/Project_detail.vue

@@ -217,14 +217,14 @@
               </div>
             </div>
             <br />
-            <div id="button-import" v-if="filenameToImport.size > 0">
+            <div id="button-import" v-if="fileToImport.size > 0">
               <button
-                :disabled="filenameToImport.size == 0"
+                :disabled="fileToImport.size == 0"
                 @click="toNewFeatureType"
                 class="ui fluid teal icon button"
               >
                 <i class="upload icon"></i> Lancer l'import avec le fichier
-                {{ filenameToImport.name }}
+                {{ fileToImport.name }}
               </button>
             </div>
           </div>
@@ -476,7 +476,7 @@ export default {
   data() {
     return {
       geojsonImport: [],
-      filenameToImport: { name: "", size: 0 },
+      fileToImport: { name: "", size: 0 },
       slug: this.$route.params.slug,
       isModalOpen: false,
       is_suscriber: false,
@@ -505,26 +505,26 @@ export default {
         name: "ajouter-type-signalement",
         params: {
           geojson: this.geojsonImport,
-          filenameToImport: this.filenameToImport,
+          fileToImport: this.fileToImport,
         },
       });
     },
     onFileChange(e) {
       var files = e.target.files || e.dataTransfer.files;
       if (!files.length) return;
-      this.filenameToImport = files[0];
+      this.fileToImport = files[0];
       // TODO : VALIDATION IF FILE IS JSON
-      if (this.filenameToImport.size > 0) {
+      if (this.fileToImport.size > 0) {
         const fr = new FileReader();
 
         fr.onload = (e) => {
           this.geojsonImport = JSON.parse(e.target.result);
         };
-        fr.readAsText(this.filenameToImport);
+        fr.readAsText(this.fileToImport);
         //* stock filename to import features afterward
         this.$store.commit(
-          "feature_type/SET_FILE_NAME_TO_IMPORT",
-          this.filenameToImport
+          "feature_type/SET_FILE_TO_IMPORT",
+          this.fileToImport
         );
       }
     },