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

REDMINE_ISSUE-12341 | Import de signalements - Prévenir l'utilisateur que l'import continue en arrière plan

See merge request geocontrib/geocontrib-frontend!172

src/views/feature_type/Feature_type_detail.vue

@@ -126,14 +126,25 @@
     </div>
     <div class="nine wide column">
       <h3 class="ui header">Derniers signalements</h3>
-        <div
-          :class="{ active: featuresLoading }"
-          class="ui inverted dimmer"
-        >
-          <div class="ui text loader">
-            Récupération des signalements en cours...
-          </div>
+      <div
+        :class="{ active: featuresLoading }"
+        class="ui inverted dimmer"
+      >
+        <div class="ui text loader">
+          Récupération des signalements en cours...
         </div>
+      </div>
+      <div
+        v-if="
+          importFeatureTypeData && importFeatureTypeData.length && importFeatureTypeData.some(el => el.status === 'pending')
+        "
+        class="ui message info"
+      >
+        <p>
+          Des signalements sont en cours d'import.
+          Pour suivre le statut de l'import, cliquez sur "Importer des Signalements".
+        </p>
+      </div>
       <div
         v-for="(feature, index) in lastFeatures"
         :key="feature.feature_id + index"
@@ -390,7 +401,8 @@ export default {
     if (!this.project) {
       this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug);
     }
-   this.setCurrentFeatureTypeSlug();
+    this.$store.dispatch("feature_type/GET_IMPORTS", this.structure.slug);
+    this.setCurrentFeatureTypeSlug();
     // .then(res => resolve(res))
     // .catch(err => reject(err));
     this.$store.commit(

src/views/feature_type/Feature_type_edit.vue

@@ -6,6 +6,12 @@
       </div>
     </div>
     <div class="fourteen wide column">
+      <div
+        :class="{ active: loading }"
+        class="ui inverted dimmer"
+      >
+       <div class="ui loader" />
+      </div>
       <form
         id="form-type-edit"
         action=""
@@ -183,6 +189,7 @@ export default {
 
   data() {
     return {
+      loading: false,
       action: "create",
       dataKey: 0,
       error: null,
@@ -482,19 +489,29 @@ export default {
                 response.data.detail
             );
           }
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
         });
     },
 
     async postFeatureTypeThenFeatures() {
+      this.loading = true;
       const requestType = this.action === "edit" ? "put" : "post";
       if (this.checkForms()) {
         await this.$store
           .dispatch("feature_type/SEND_FEATURE_TYPE", requestType)
-          .then(({ feature_type_slug }) => {
-            if (feature_type_slug) {
-              this.postFeatures(feature_type_slug);
-            }
-          });
+            .then(({ feature_type_slug }) => {
+              if (feature_type_slug) {
+                this.postFeatures(feature_type_slug);
+              } else {
+                this.loading = false;
+              }
+            })
+            .catch(() => {
+              this.loading = false;
+            });
       }
     },
 

src/views/project/Project_detail.vue

@@ -115,17 +115,26 @@
                 Récupération des types de signalements en cours...
               </div>
             </div>
+            <div
+              :class="{ active: featureTypeImporting }"
+              class="ui inverted dimmer"
+            >
+              <div class="ui text loader">
+                Traitement du fichier en cours ...
+              </div>
+            </div>
             <div
               v-for="(type, index) in feature_types"
               :key="type.title + '-' + index"
               class="item"
             >
-              <div class="middle aligned content">
+              <div class="feature-type-container">
                 <router-link
                   :to="{
                     name: 'details-type-signalement',
                     params: { feature_type_slug: type.slug },
                   }"
+                  class="feature-type-title"
                 >
                   <img
                     v-if="type.geom_type === 'point'"
@@ -152,6 +161,7 @@
                     permissions.can_create_feature &&
                     type.is_editable
                   " -->
+                <div class="middle aligned content">
                 <router-link
                   v-if="
                     project && permissions && permissions.can_create_feature
@@ -256,6 +266,7 @@
                 >
                   <i class="inverted grey paint brush alternate icon"></i>
                 </router-link>
+                </div>
               </div>
             </div>
             <div v-if="feature_types.length === 0">
@@ -580,6 +591,7 @@ export default {
       is_suscriber: false,
       tempMessage: null,
       featureTypeLoading: true,
+      featureTypeImporting: false,
       featuresLoading: true
     };
   },
@@ -680,6 +692,8 @@ export default {
     },
 
     toNewFeatureType() {
+      console.log('prout');
+      this.featureTypeImporting = true;
       this.$router.push({
         name: "ajouter-type-signalement",
         params: {
@@ -687,25 +701,36 @@ export default {
           fileToImport: this.fileToImport,
         },
       });
+      this.featureTypeImporting = false;
     },
 
     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) {
         const fr = new FileReader();
 
-        fr.onload = (e) => {
-          this.geojsonImport = JSON.parse(e.target.result);
-        };
-        fr.readAsText(this.fileToImport);
-        //* stock filename to import features afterward
-        this.$store.commit(
-          "feature_type/SET_FILE_TO_IMPORT",
-          this.fileToImport
-        );
+        try {
+          fr.onload = (e) => {
+            this.geojsonImport = JSON.parse(e.target.result);
+            this.featureTypeImporting = false;
+          };
+          fr.readAsText(this.fileToImport);
+          //* stock filename to import features afterward
+          this.$store.commit(
+            "feature_type/SET_FILE_TO_IMPORT",
+            this.fileToImport
+          );
+        } catch (err) {
+          console.error(err);
+          this.featureTypeImporting = false
+        }
+      } else {
+        this.featureTypeImporting = false;
       }
     },
 
@@ -822,9 +847,31 @@ export default {
   float: right;
   margin: 0 0 0 1em;
 }
+
+.feature-type-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.feature-type-container > .middle.aligned.content {
+  width: 50%;
+}
+
+.feature-type-title {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 1.5em;
+}
+
 .nouveau-type-signalement {
+  cursor: pointer;
   padding-top: 1em;
 }
+.nouveau-type-signalement > a > .ui > .label{
+  cursor: pointer;
+}
 
 #button-import {
   padding-top: 0.5em;