Merge branch 'redmine-issues/12483' into 'develop'

REDMINE_ISSUE-12483 | Création d'un type de signalement par import - Erreur 500 à l'import d'un fichier volumineux

See merge request !190

src/assets/js/utils.js

+export function fileConvertSize(aSize){
+	aSize = Math.abs(parseInt(aSize, 10));
+	const def = [[1, 'octets', 0], [1024, 'ko', 0], [1024*1024, 'Mo', 1], [1024*1024*1024, 'Go', 2], [1024*1024*1024*1024, 'To', 2]];
+	for (let i=0; i<def.length; i++) {
+		if (aSize<def[i][0]) return (aSize/def[i-1][0]).toFixed(def[i-1][2]) + ' ' + def[i-1][1];
+	}
+}
+
+export function fileConvertSizeToMo(aSize){
+	aSize = Math.abs(parseInt(aSize, 10));
+	const def = [1024*1024, 'Mo', 1];
+	return (aSize/def[0]).toFixed(def[2]);
+}

src/components/map-layers/SidebarLayers.vue

@@ -156,7 +156,6 @@ export default {
     },
 
     updateOpacity(event, layer) {
-      console.log(event.target.value, layer);
       mapUtil.updateOpacity(layer.id, event.target.value);
       layer.opacity = event.target.value;
     },
@@ -166,7 +165,6 @@ export default {
     },
 
     onQueryLayerChange(layer) {
-      console.log(layer);
       this.selectedQueryLayer = layer.name;
     },
 
@@ -175,8 +173,7 @@ export default {
       return queryableLayer.length > 0;
     },
 
-    onlayerMove(event) {
-      console.log(event);
+    onlayerMove() {
       // Get the names of the current layers in order.
       const currentLayersNamesInOrder = Array.from(
         document.getElementsByClassName("layer-item transition visible")
@@ -200,7 +197,6 @@ export default {
       });
       document.dispatchEvent(eventOrder);
       // Save the basemaps options into the localstorage
-      console.log(this.baseMaps);
       this.setLocalstorageMapOptions(this.baseMaps);
     },
 
@@ -307,7 +303,6 @@ export default {
     addLayers(baseMap) {
       baseMap.layers.forEach((layer) => {
         var layerOptions = this.availableLayers.find((l) => l.id === layer.id);
-        console.log(layerOptions);
         layer = Object.assign(layer, layerOptions);
         layer.options.basemapId = baseMap.id;
       });

src/views/feature_type/Feature_type_detail.vue

@@ -66,7 +66,11 @@
             Importer des signalements
           </div>
           <div :class="['content', { active: showImport }]">
-            <div id="form-import-features" class="ui form">
+            <div
+              id="form-import-features"
+              class="ui form"
+              :class="loadingImportFile ? 'loading' : ''"
+            >
               <div class="field">
                 <label class="ui icon button" for="json_file">
                   <i class="file icon"></i>
@@ -222,6 +226,8 @@ import { mapGetters, mapState } from "vuex";
 import ImportTask from "@/components/ImportTask";
 import featureAPI from "@/services/feature-api";
 
+import { fileConvertSizeToMo } from '@/assets/js/utils';
+
 export default {
   name: "Feature_type_detail",
   components: {
@@ -237,6 +243,7 @@ export default {
       },
       showImport: false,
       featuresLoading: true,
+      loadingImportFile: false
     };
   },
 
@@ -351,18 +358,31 @@ export default {
     },
 
     onFileChange(e) {
+      this.loadingImportFile = true;
       const files = e.target.files || e.dataTransfer.files;
-      if (!files.length) return;
+      if (!files.length) {
+        this.loadingImportFile = false;
+        return;
+      }
 
       let reader = new FileReader();
       reader.addEventListener("load", (e) => {
-        if (this.checkJsonValidity(JSON.parse(e.target.result))) {
+        // bypass json check for files larger then 10 Mo
+        let jsonValidity;
+        if (parseFloat(fileConvertSizeToMo(files[0])) <= 10) {
+          jsonValidity = this.checkJsonValidity(JSON.parse(e.target.result));
+        } else {
+          jsonValidity = true;
+        }
+
+        if (jsonValidity) {
           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
           );
         }
+        this.loadingImportFile = false;
       });
       reader.readAsText(files[0]);
     },

src/views/project/Project_detail.vue

@@ -561,6 +561,34 @@
         </div>
       </div>
     </div>
+    <div
+      :class="isFileSizeModalOpen ? 'active' : ''"
+      class="ui dimmer"
+    >
+      <div
+        :class="isFileSizeModalOpen ? 'active' : ''"
+        class="ui modal tiny"
+        style="top: 20%"
+      >
+        <div class="header">
+          Fichier trop grand!
+        </div>
+        <div class="content">
+          <p>
+            Impossible de créer un type de signalement à partir d'un fichier GeoJSON 
+            de plus de 10Mo (celui importé fait {{ fileSize }} Mo).
+          </p>
+        </div>
+        <div class="actions">
+          <div
+            class="ui button teal"
+            @click="closeFileSizeModal"
+          >
+            Fermer
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -573,6 +601,8 @@ import featureAPI from "@/services/feature-api";
 
 import axios from "@/axios-client.js";
 
+import { fileConvertSizeToMo } from '@/assets/js/utils';
+
 export default {
   name: "Project_details",
 
@@ -608,7 +638,8 @@ export default {
       tempMessage: null,
       featureTypeLoading: true,
       featureTypeImporting: false,
-      featuresLoading: true
+      featuresLoading: true,
+      isFileSizeModalOpen: false
     };
   },
 
@@ -634,6 +665,9 @@ export default {
     },
     API_BASE_URL() {
       return this.$store.state.configuration.VUE_APP_DJANGO_API_BASE;
+    },
+    fileSize() {
+      return fileConvertSizeToMo(this.fileToImport.size);
     }
   },
 
@@ -781,13 +815,13 @@ export default {
     onFileChange(e) {
       this.featureTypeImporting = true;
       var files = e.target.files || e.dataTransfer.files;
-      console.log(files);
       if (!files.length) return;
       this.fileToImport = files[0];
       // TODO : VALIDATION IF FILE IS JSON
-      if (this.fileToImport.size > 0) {
+      if (parseFloat(fileConvertSizeToMo(this.fileToImport.size)) > 10) {
+        this.isFileSizeModalOpen = true;
+      } else if (this.fileToImport.size > 0) {
         const fr = new FileReader();
-
         try {
           fr.onload = (e) => {
             this.geojsonImport = JSON.parse(e.target.result);
@@ -808,6 +842,12 @@ export default {
       }
     },
 
+    closeFileSizeModal() {
+      this.fileToImport = { name: "", size: 0 };
+      this.featureTypeImporting = false;
+      this.isFileSizeModalOpen = false;
+    },
+
     subscribeProject() {
       projectAPI
         .subscribeProject({