From 46d35760885621b5cd47e930ff7588852f70a424 Mon Sep 17 00:00:00 2001
From: Florent <florent@MacBook-Air-de-neogeo.local>
Date: Thu, 2 Dec 2021 14:40:41 +0100
Subject: [PATCH] add loader while importing file to create feature type and
add message if features are importing
---
.../feature_type/Feature_type_detail.vue | 28 +++++---
src/views/feature_type/Feature_type_edit.vue | 27 ++++++--
src/views/project/Project_detail.vue | 67 ++++++++++++++++---
3 files changed, 99 insertions(+), 23 deletions(-)
diff --git a/src/views/feature_type/Feature_type_detail.vue b/src/views/feature_type/Feature_type_detail.vue
index b541bb17..431025cb 100644
--- a/src/views/feature_type/Feature_type_detail.vue
+++ b/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(
diff --git a/src/views/feature_type/Feature_type_edit.vue b/src/views/feature_type/Feature_type_edit.vue
index bb69a28b..8cbda5cf 100644
--- a/src/views/feature_type/Feature_type_edit.vue
+++ b/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;
+ });
}
},
diff --git a/src/views/project/Project_detail.vue b/src/views/project/Project_detail.vue
index 2e7066dd..b7ffc306 100644
--- a/src/views/project/Project_detail.vue
+++ b/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;
--
GitLab