From a705aa0d778be16ab1f387a03bad41c5017f0786 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Poussard?= <tpoussard@neogeo.fr>
Date: Thu, 25 Nov 2021 18:36:47 +0100
Subject: [PATCH] WIP
---
src/views/feature/Feature_list.vue | 90 +++++++++++++++++-------------
1 file changed, 51 insertions(+), 39 deletions(-)
diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index 2263ae1e..bbd1e01b 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -30,9 +30,7 @@
></a>
<div class="item">
<h4>
- {{ filteredFeatures.length }} signalement{{
- filteredFeatures.length > 1 ? "s" : ""
- }}
+ {{ featuresCount }} signalement{{ featuresCount > 1 ? "s" : "" }}
</h4>
</div>
@@ -139,11 +137,11 @@
<div v-show="showMap" class="ui tab active map-container" data-tab="map">
<div id="map" ref="map"></div>
- <SidebarLayers v-if="baseMaps && map" />
+ <SidebarLayers v-if="basemaps && map" />
</div>
<FeatureListTable
v-show="!showMap"
- :filteredFeatures="filteredFeatures"
+ :filteredFeatures="geojsonFeatures"
:checkedFeatures.sync="checkedFeatures"
/>
@@ -188,11 +186,11 @@ import FeatureListTable from "@/components/feature/FeatureListTable";
import Dropdown from "@/components/Dropdown.vue";
const axios = require("axios");
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
+axios.defaults.headers.common["X-CSRFToken"] = ((name) => {
var re = new RegExp(name + "=([^;]+)");
var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
+ return value !== null ? unescape(value[1]) : null;
+})("csrftoken");
export default {
name: "Feature_list",
@@ -239,6 +237,9 @@ export default {
},
geojsonFeatures: [],
+ featuresCount: 0,
+ previous: null,
+ next: null,
filterStatus: null,
filterType: null,
baseUrl: this.$store.state.configuration.BASE_URL,
@@ -246,6 +247,8 @@ export default {
zoom: null,
lat: null,
lng: null,
+ limit: 15,
+ offset: 0,
showMap: true,
showAddFeature: false,
};
@@ -255,12 +258,13 @@ export default {
...mapGetters(["project", "permissions"]),
...mapState("feature", ["checkedFeatures"]),
...mapState("feature_type", ["feature_types"]),
+ ...mapState("map", ["basemaps"]),
- baseMaps() {
- return this.$store.state.map.basemaps;
+ API_BASE_URL() {
+ return this.$store.state.configuration.VUE_APP_DJANGO_API_BASE;
},
- filteredFeatures() {
+ /* filteredFeatures() {
let results = this.geojsonFeatures;
if (this.form.type.selected) {
results = results.filter(
@@ -283,7 +287,7 @@ export default {
});
}
return results;
- },
+ }, */
statusChoices() {
//* if project is not moderate, remove pending status
@@ -293,13 +297,13 @@ export default {
},
},
- watch: {
+ /* watch: {
filteredFeatures(newValue, oldValue) {
if (newValue && newValue !== oldValue) {
this.onFilterChange();
}
},
- },
+ }, */
methods: {
modalAllDelete() {
@@ -307,15 +311,15 @@ export default {
},
deleteFeature(feature_id) {
- const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}features/${feature_id}/?project__slug=${this.project.slug}`;
+ const url = `${this.API_BASE_URL}features/${feature_id}/?project__slug=${this.project.slug}`;
axios
.delete(url, {})
.then(() => {
if (!this.modalAllDeleteOpen) {
this.$store
- .dispatch("feature/GET_PROJECT_FEATURES", this.project.slug)
+ .dispatch("feature/GET_PROJECT_FEATURES", this.project.slug) // ? Toujours nécessaire de mettre à jour les features classiques ?
.then(() => {
- this.getNloadGeojsonFeatures();
+ this.updateFeatures();
this.checkedFeatures.splice(feature_id);
});
}
@@ -335,8 +339,10 @@ export default {
},
onFilterChange() {
+ // ? Besoin de faire un fetch avec nouveau filtres ici ?
if (this.featureGroup) {
- const features = this.filteredFeatures;
+ //const features = this.filteredFeatures;
+ const features = this.geojsonFeatures;
this.featureGroup.clearLayers();
this.featureGroup = mapUtil.addFeatures(
features,
@@ -381,26 +387,23 @@ export default {
});
// --------- End sidebar events ----------
- this.getNloadGeojsonFeatures();
-
- setTimeout(
- function () {
- let project_id = this.$route.params.slug.split("-")[0];
- const mvtUrl = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}features.mvt/?tile={z}/{x}/{y}&project_id=${project_id}`;
- mapUtil.addVectorTileLayer(
- mvtUrl,
- this.$route.params.slug,
- this.$store.state.feature_type.feature_types,
- this.form
- );
- mapUtil.addGeocoders(this.$store.state.configuration);
- }.bind(this),
- 1000
- );
+ this.updateFeatures();
+
+ setTimeout(() => {
+ let project_id = this.$route.params.slug.split("-")[0];
+ const mvtUrl = `${this.API_BASE_URL}features.mvt/?tile={z}/{x}/{y}&project_id=${project_id}`;
+ mapUtil.addVectorTileLayer(
+ mvtUrl,
+ this.$route.params.slug,
+ this.$store.state.feature_type.feature_types,
+ this.form
+ );
+ mapUtil.addGeocoders(this.$store.state.configuration);
+ }, 1000);
},
- getNloadGeojsonFeatures() {
- const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?output=geojson`;
+ updateFeatures() {
+ const url = `${this.API_BASE_URL}projects/${this.$route.params.slug}/feature-paginated/?output=geojson&limit=${this.limit}&offset=${this.offset}`;
this.$store.commit(
"DISPLAY_LOADER",
"Récupération des signalements en cours..."
@@ -408,8 +411,13 @@ export default {
axios
.get(url)
.then((response) => {
- if (response.status === 200 && response.data.features.length > 0) {
- this.loadFeatures(response.data.features);
+ if (response.status === 200) {
+ this.featuresCount = response.data.count;
+ this.previous = response.data.previous;
+ this.next = response.data.next;
+ if (response.data.results.features.length > 0) {
+ this.loadFeatures(response.data.results.features);
+ }
}
this.$store.commit("DISCARD_LOADER");
})
@@ -455,7 +463,11 @@ export default {
created() {
if (!this.project) {
- this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug, "noFeatures");
+ this.$store.dispatch(
+ "GET_PROJECT_INFO",
+ this.$route.params.slug,
+ "noFeatures"
+ );
}
},
--
GitLab