dev import geojson

src/store/modules/feature_type.js

@@ -5,7 +5,42 @@ import store from '@/store';
 const feature_type = {
   namespaced: true,
   state: {
-    form: null,
+    form: {
+      colors_style: {
+        value: null,
+        options: [],
+        fields: [],
+      },
+      color: {
+        id_for_label: "couleur",
+        label: "Couleur",
+        field: {
+          max_length: 128, // ! Vérifier la valeur dans django
+        },
+        html_name: "couleur",
+        value: "#000000",
+      },
+      title: {
+        errors: [],
+        id_for_label: "title",
+        label: "Titre",
+        field: {
+          max_length: 128, // ! Vérifier la valeur dans django
+        },
+        html_name: "title",
+        value: null,
+      },
+      geom_type: {
+        id_for_label: "geom_type",
+        label: "Type de géométrie",
+        field: {
+          choices: ["Ligne", "Point", "Polygone"],
+          max_length: 128, // ! Vérifier la valeur dans django
+        },
+        html_name: "geom_type",
+        value: "Point",
+      },
+    },
     colorsStyleList: [],
     customForms: [],
     current_feature_type_slug: null,

src/views/feature_type/Feature_type_edit.vue

@@ -144,48 +144,12 @@ export default {
     return {
       action: "create",
       dataKey: 0,
-      form: {
-        colors_style: {
-          value: null,
-          options: [],
-          fields: [],
-        },
-        color: {
-          id_for_label: "couleur",
-          label: "Couleur",
-          field: {
-            max_length: 128, // ! Vérifier la valeur dans django
-          },
-          html_name: "couleur",
-          value: "#000000",
-        },
-        title: {
-          errors: [],
-          id_for_label: "title",
-          label: "Titre",
-          field: {
-            max_length: 128, // ! Vérifier la valeur dans django
-          },
-          html_name: "title",
-          value: null,
-        },
-        geom_type: {
-          id_for_label: "geom_type",
-          label: "Type de géométrie",
-          field: {
-            choices: ["Ligne", "Point", "Polygone"],
-            max_length: 128, // ! Vérifier la valeur dans django
-          },
-          html_name: "geom_type",
-          value: "Point",
-        },
-      },
     };
   },
 
   computed: {
     ...mapGetters(["project"]),
-    ...mapState("feature_type", ["customForms", "colorsStyleList"]),
+    ...mapState("feature_type", ["form", "customForms", "colorsStyleList"]),
     ...mapGetters("feature_type", ["feature_type"]),
     selected_geom_type: {
       get() {

src/views/project/Project_detail.vue

@@ -453,7 +453,7 @@
 </template>
 
 <script>
-import axios from 'axios';
+// import axios from 'axios';
 import frag from "vue-frag";
 import { mapGetters, mapState } from "vuex";
 
@@ -466,6 +466,18 @@ export default {
 
   data() {
     return {
+      labelCustomForm: [
+        'title',
+        'description',
+        'status',
+        'created_on',
+        'updated_on',
+        'archived_on',
+        'deletion_on',
+        'feature_type',
+      ],
+      jsonStr: '',
+      jsonDict: [],
       filenameToImport: {name: '', size: 0},
       slug: this.$route.params.slug,
       isModalOpen: false,
@@ -479,7 +491,7 @@ export default {
   },
   computed: {
     ...mapGetters(["project"]),
-    ...mapState("feature_type", ["feature_types"]),
+    ...mapState("feature_type", ["form", "customForms", "feature_types"]),
     BASE_URL: () => process.env.VUE_APP_BASE_URL,
     last_features: function () {
       return this.$store.state.feature.features;
@@ -496,29 +508,73 @@ export default {
   },
 
   methods: {
+    updateStore() {
+      // FIRST : TEST AVEC FORM
+      this.$store.commit("feature_type/UPDATE_FORM", {
+        title: this.form.title.value,
+        geom_type: this.form.geom_type.value,
+      });
+      // AFTER : AND CUSTOM FORM
+    },
+    toNewFeatureType(){
+         this.$router.push({
+        name: 'ajouter-type-signalement', 
+        });
+    },
+    toFormatGeom(value){
+      if (value == 'LineString'){
+        console.log('LineString', value)
+        return 'Ligne';
+      }
+      else if(value == 'Polygon'){
+        return 'Polygone'
+      }
+      return value;
+    },
+    isLabelProperties(value){
+      return this.labelCustomForm.includes(value)
+    },
     importGeoJson() {
-      if (this.filenameToImport.size > 0){
-        var formData = new FormData();
-        formData.append("json_file", this.filenameToImport);
-        let url = process.env.VUE_APP_URL_BASE + 'projet/' + this.$route.params.slug + '/importer-geojson/' ;
-        axios.post(url, formData, { headers: {
-            'Content-Type': 'multipart/form-data'
-            }
-          })
-          .then((response) => {
-            if (response.status == 200){
-              console.log(response.data)
-              // TODO : Router :to="{
-              //                    name: 'ajouter-type-signalement',
-              //                    params: { slug: project.slug },
-              //                    }"
+      if (Object.entries(this.jsonDict).length){
+        // TODO : VALIDATION IF A JSONDICT HAS NOT FEATURES
+        for (const [key, value] of Object.entries(this.jsonDict['features'])) {
+          console.log('key', key)
+          this.form.title.value = value['properties']['feature_type']
+          this.form.geom_type.value= this.toFormatGeom(value['geometry']['type'])
 
+          // TODO : FILL A ARRAY CUSTOMFORM -> VOIR AVEC TIM
+          let customForm = {
+              label : { value : ''},
+              name : { value : ''},
+              field_type : { value : '', field : {choices : ''}},
+            }
+          // FOR 
+          for (const [k, val] of Object.entries(value['properties'])) {
+            
+            // console.log('k', k)
+            // console.log('val', val)
+            // console.log('customForm label', customForm['label'])
+            if (k=='title'){
+              console.log('title', val)
+              customForm['label']['value'] = val
+              customForm['name']['value'] = val
+              console.log(customForm)
             }
-          })
-          .catch(err => {
-            // TODO : HANDLER ERROR
-            console.log(err)
-          });
+            if (! this.isLabelProperties(k)){
+              customForm['field_type']['value'] = val
+              customForm['field_type']['field']['choices'] = typeof(val)
+            }
+          //ENDFOR 
+          }
+          console.log(customForm)
+          this.customForms.push(customForm)
+          console.log(this.customForms)
+        }
+        // GO TO NEW FORM
+        this.toNewFeatureType()
+
+            
+         
       }
     },
     onFileChange(e) {
@@ -526,6 +582,17 @@ export default {
       if (!files.length)
         return;
       this.filenameToImport = files[0]
+      // TODO : VALIDATION IF FILE IS JSON
+      if (this.filenameToImport.size > 0){
+        
+        const fr = new FileReader();
+
+        fr.onload = e => {
+            this.jsonDict = JSON.parse(e.target.result);
+            this.jsonStr = JSON.stringify(this.jsonDict, null, 2);
+          }
+        fr.readAsText(this.filenameToImport);
+      }
     },
     subsribeProject() {
       console.log("Subsribe to project");