read json, check properties correspond to feature_type custom_fields & prevent upload

src/views/feature_type/Feature_type_detail.vue

@@ -157,7 +157,8 @@
             [ Créé le {{ feature.created_on | formatDate }}
             <span v-if="$store.state.user">
               par {{ feature.display_creator }}</span
-            > ]
+            >
+            ]
           </div>
         </div>
       </div>
@@ -249,11 +250,95 @@ export default {
         this.$store.dispatch("feature_type/GET_IMPORTS", this.structure.slug);
       }
     },
+
+    transformProperties(prop) {
+      const type = typeof prop;
+      const date = new Date(prop);
+      console.log({ type, date });
+      if (type === "boolean") {
+        return "boolean";
+      } else if (Number.isSafeInteger(prop)) {
+        return "integer";
+      } else if (
+        type === "string" &&
+        date instanceof Date &&
+        !isNaN(date.valueOf())
+      ) {
+        return "date";
+      } else if (type === "number" && !isNaN(parseFloat(prop))) {
+        return "decimal";
+      }
+      console.log("Number.isSafeInteger(prop)", Number.isSafeInteger(prop));
+      console.log("!isNaN(parseFloat(prop))", !isNaN(parseFloat(prop)));
+      return "char"; //* string by default, most accepted type in database
+    },
+
+    checkJsonValidity(json) {
+      const fields = this.structure.customfield_set.map((el) => {
+        return {
+          name: el.name,
+          field_type: el.field_type,
+          options: el.options,
+        };
+      });
+      console.log({ json, fields });
+      for (const feature of json.features) {
+        console.log(feature.properties);
+        for (const { name, field_type, options } of fields) {
+          console.log("name", name, "field_type", field_type);
+          //* check if custom field is present
+          if (!(name in feature.properties)) {
+            console.log("NOT present");
+            return false;
+          }
+
+          const fieldInFeature = feature.properties[name];
+          const customType = this.transformProperties(fieldInFeature);
+          //* if custom field value is not null, then check validity of field
+          if (fieldInFeature !== null) {
+            //* if field type is list, it's not possible to guess from value type
+            if (field_type === "list") {
+              console.log("options.includes", options.includes(fieldInFeature));
+              console.log("options", options);
+              //*then check if the value is an available option
+              if (!options.includes(fieldInFeature)) {
+                console.log("not element of list");
+                return false;
+              }
+            } else if (customType !== field_type) {
+              //* check if custom field value match
+              console.log(
+                "NOT matched",
+                fieldInFeature,
+                " | ",
+                customType,
+                "===",
+                field_type,
+                " ?"
+              );
+              return false;
+            }
+          }
+        }
+      }
+      return true;
+    },
+
     onFileChange(e) {
       const files = e.target.files || e.dataTransfer.files;
       if (!files.length) return;
-      this.fileToImport = files[0]; // todo : remove this value from state as it stored (first attempt didn't work)
-      this.$store.commit("feature_type/SET_FILE_TO_IMPORT", this.fileToImport);
+
+      let reader = new FileReader();
+      reader.addEventListener("load", (e) => {
+        if (this.checkJsonValidity(JSON.parse(e.target.result))) {
+          this.fileToImport = files[0]; // todo : remove this value from state as it stored (first attempt didn't work)
+          this.$store.commit(
+            "feature_type/SET_FILE_TO_IMPORT",
+            this.fileToImport
+          );
+        }
+      });
+      reader.readAsText(files[0]);
     },
 
     importGeoJson() {
@@ -263,6 +348,7 @@ export default {
         fileToImport: this.fileToImport,
       });
     },
+
     exportFeatures() {
       const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature-type/${this.$route.params.feature_type_slug}/export/`;
       console.log(url);

src/views/feature_type/Feature_type_edit.vue

@@ -459,15 +459,16 @@ export default {
       const date = new Date(prop);
       if (type === "boolean") {
         return "boolean";
-      } else if (type === "number") {
+      } else if (Number.isSafeInteger(prop)) {
         return "integer";
-      } else if (type === "string") {
-        //* check if string is convertible to a number, then it should be a decimal
-        if (date instanceof Date && !isNaN(date.valueOf())) {
-          return "date";
-        } else if (!isNaN(parseFloat(prop))) {
-          return "decimal";
-        }
+      } else if (
+        type === "string" &&
+        date instanceof Date &&
+        !isNaN(date.valueOf())
+      ) {
+        return "date";
+      } else if (type === "number" && !isNaN(parseFloat(prop))) {
+        return "decimal";
       }
       return "char"; //* string by default, most accepted type in database
     },