From 2a8db3569d6bb91d49bbd834e976c768bf2d810d Mon Sep 17 00:00:00 2001
From: florent <flavelle@neogeo.fr>
Date: Thu, 23 Dec 2021 09:58:31 +0100
Subject: [PATCH] remove limit on get project features and add loader on map
---
src/views/project/Project_detail.vue | 116 ++++++++++++++++-----------
1 file changed, 68 insertions(+), 48 deletions(-)
diff --git a/src/views/project/Project_detail.vue b/src/views/project/Project_detail.vue
index 37f31fe7..6427d261 100644
--- a/src/views/project/Project_detail.vue
+++ b/src/views/project/Project_detail.vue
@@ -345,7 +345,15 @@
</div>
</div>
<div class="seven wide column">
- <div id="map" ref="map"></div>
+ <div
+ :class="{ active: mapLoading }"
+ class="ui inverted dimmer"
+ >
+ <div class="ui text loader">
+ Chargement de a carte...
+ </div>
+ </div>
+ <div id="map" ref="map" />
</div>
</div>
@@ -366,7 +374,7 @@
</div>
<div class="ui relaxed list">
<div
- v-for="(item, index) in features"
+ v-for="(item, index) in features.slice(-5)"
:key="item.properties.title + index"
class="item"
>
@@ -643,7 +651,9 @@ export default {
projectInfoLoading: true,
featureTypeImporting: false,
featuresLoading: true,
- isFileSizeModalOpen: false
+ isFileSizeModalOpen: false,
+ mapLoading: true,
+ mapFeatures: null
};
},
@@ -681,7 +691,7 @@ export default {
watch: {
map(newValue) {
if (newValue && this.features && this.features.length) {
- mapUtil.addFeatures(
+ this.mapFeatures = mapUtil.addFeatures(
this.features,
{},
true,
@@ -693,7 +703,7 @@ export default {
deep: true,
handler(newValue, oldValue) {
if (newValue && newValue.length && newValue !== oldValue && this.map) {
- mapUtil.addFeatures(
+ this.mapFeatures = mapUtil.addFeatures(
newValue,
{},
true,
@@ -703,6 +713,15 @@ export default {
}
},
+ mapFeatures: {
+ deep: true,
+ handler(newValue, oldValue) {
+ if (newValue && newValue !== oldValue) {
+ this.mapLoading = false;
+ }
+ }
+ },
+
feature_types: {
deep: true,
handler(newValue, oldValue) {
@@ -731,6 +750,50 @@ export default {
}
},
+ created() {
+ if (this.user) {
+ projectAPI
+ .getProjectSubscription({ projectSlug: this.$route.params.slug })
+ .then((data) => (this.is_suscriber = data.is_suscriber));
+ }
+ this.$store.commit("feature_type/SET_FEATURE_TYPES", []); //* empty feature_types remaining from previous project
+ },
+
+ mounted() {
+ this.GET_PROJECT_INFO(this.slug)
+ .then(() => {
+ this.projectInfoLoading = false;
+ setTimeout(this.initMap, 1000);
+ })
+ .catch(() => {
+ this.projectInfoLoading = false;
+ });
+ this.GET_PROJECT_FEATURES({
+ project_slug: this.slug,
+ ordering: '-created_on',
+ limit: null,
+ geojson: true
+ })
+ .then(() => {
+ this.featuresLoading = false;
+ })
+ .catch(() => {
+ this.featuresLoading = false;
+ });
+
+ if (this.message) {
+ this.tempMessage = this.message;
+ document
+ .getElementById("message")
+ .scrollIntoView({ block: "end", inline: "nearest" });
+ setTimeout(() => (this.tempMessage = null), 5000); //* hide message after 5 seconds
+ }
+ },
+
+ destroyed() {
+ this.CLEAR_RELOAD_INTERVAL_ID();
+ },
+
methods: {
...mapMutations([
'SET_RELOAD_INTERVAL_ID',
@@ -937,49 +1000,6 @@ export default {
},
},
- created() {
- if (this.user) {
- projectAPI
- .getProjectSubscription({ projectSlug: this.$route.params.slug })
- .then((data) => (this.is_suscriber = data.is_suscriber));
- }
- this.$store.commit("feature_type/SET_FEATURE_TYPES", []); //* empty feature_types remaining from previous project
- },
-
- mounted() {
- this.GET_PROJECT_INFO(this.slug)
- .then(() => {
- this.projectInfoLoading = false;
- setTimeout(this.initMap, 1000);
- })
- .catch(() => {
- this.projectInfoLoading = false;
- });
- this.GET_PROJECT_FEATURES({
- project_slug: this.slug,
- ordering: '-created_on',
- limit: 5,
- geojson: true
- })
- .then(() => {
- this.featuresLoading = false;
- })
- .catch(() => {
- this.featuresLoading = false;
- });
-
- if (this.message) {
- this.tempMessage = this.message;
- document
- .getElementById("message")
- .scrollIntoView({ block: "end", inline: "nearest" });
- setTimeout(() => (this.tempMessage = null), 5000); //* hide message after 5 seconds
- }
- },
-
- destroyed() {
- this.CLEAR_RELOAD_INTERVAL_ID();
- },
};
</script>
--
GitLab