diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index 4fa83fadbb2af46c352f1c2b7a6cdae478d30967..ea6fdd003b61b391cf3b4ee2494180ad3d62b4a7 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -22,7 +22,7 @@
><i class="map fitted icon"></i
></a>
<a
- @click="showMap = false"
+ @click="showTable"
:class="['item no-margin', { active: !showMap }]"
data-tab="list"
data-tooltip="Liste"
@@ -30,7 +30,10 @@
></a>
<div class="item">
<h4>
- {{ featuresCount }} signalement{{ featuresCount > 1 ? "s" : "" }}
+ <!-- {{ featuresCount }} signalement{{ featuresCount > 1 ? "s" : "" }} -->
+ {{ geojsonFeatures.length }} signalement{{
+ geojsonFeatures.length > 1 ? "s" : ""
+ }}
</h4>
</div>
@@ -119,7 +122,7 @@
type="text"
name="title"
v-model="form.title"
- @input="updateFeatures"
+ @input="fetchPagedFeatures"
/>
<button
type="button"
@@ -145,7 +148,7 @@
<FeatureListTable
v-show="!showMap"
v-on:update:page="handlePageChange"
- :geojsonFeatures="geojsonFeatures"
+ :geojsonFeatures="geojsonFeaturesPaginated"
:checkedFeatures.sync="checkedFeatures"
:featuresCount="featuresCount"
:pagination="pagination"
@@ -244,6 +247,7 @@ export default {
},
geojsonFeatures: [],
+ geojsonFeaturesPaginated: [],
baseUrl: this.$store.state.configuration.BASE_URL,
map: null,
zoom: null,
@@ -264,6 +268,7 @@ export default {
next: null,
showMap: true,
showAddFeature: false,
+ paginatedFeaturesDone: true,
};
},
@@ -296,6 +301,14 @@ export default {
},
methods: {
+ showTable() {
+ if (this.paginatedFeaturesDone) {
+ this.fetchPagedFeatures();
+ this.paginatedFeaturesDone = false;
+ }
+ this.showMap = false;
+ },
+
modalAllDelete() {
this.modalAllDeleteOpen = !this.modalAllDeleteOpen;
},
@@ -311,7 +324,8 @@ export default {
project_slug: this.project.slug,
})
.then(() => {
- this.updateFeatures();
+ this.fetchPagedFeatures();
+ this.getNloadGeojsonFeatures();
this.checkedFeatures.splice(feature_id);
});
}
@@ -379,7 +393,8 @@ export default {
});
// --------- End sidebar events ----------
- this.updateFeatures();
+ //this.fetchPagedFeatures();
+ this.getNloadGeojsonFeatures();
setTimeout(() => {
const project_id = this.$route.params.slug.split("-")[0];
@@ -394,6 +409,62 @@ export default {
}, 1000);
},
+ getNloadGeojsonFeatures() {
+ console.log("getNloadGeojsonFeatures");
+ const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?output=geojson`;
+ this.$store.commit(
+ "DISPLAY_LOADER",
+ "Récupération des signalements en cours..."
+ );
+ axios
+ .get(url)
+ .then((response) => {
+ console.log(response);
+ if (response.status === 200 && response.data.features.length > 0) {
+ this.geojsonFeatures = response.data.features;
+ this.loadFeatures();
+ }
+ this.$store.commit("DISCARD_LOADER");
+ })
+ .catch((error) => {
+ this.$store.commit("DISCARD_LOADER");
+ throw error;
+ });
+ },
+
+ loadFeatures() {
+ const urlParams = new URLSearchParams(window.location.search);
+ const featureType = urlParams.get("feature_type");
+ const featureStatus = urlParams.get("status");
+ const featureTitle = urlParams.get("title");
+ this.featureGroup = mapUtil.addFeatures(
+ this.geojsonFeatures,
+ {
+ featureType,
+ featureStatus,
+ featureTitle,
+ },
+ true,
+ this.feature_types
+ );
+ // Fit the map to bound only if no initial zoom and center are defined
+ if (
+ (this.lat === "" || this.lng === "" || this.zoom === "") &&
+ this.geojsonFeatures.length > 0
+ ) {
+ mapUtil
+ .getMap()
+ .fitBounds(this.featureGroup.getBounds(), { padding: [25, 25] });
+ }
+ this.form.type.choices = [
+ //* converting Set to an Array with spread "..."
+ ...new Set(
+ this.geojsonFeatures.map((el) => el.properties.feature_type.title)
+ ), //* use Set to eliminate duplicate values
+ ];
+ },
+
+ //* Paginated Features for table *//
getFeatureTypeSlug(title) {
const featureType = this.feature_types.find((el) => el.title === title);
return featureType ? featureType.slug : null;
@@ -458,14 +529,16 @@ export default {
updateTypeFeatures(filterValue) {
//* only update:selection custom event can trigger the filter update,
//* but it happens before the value is updated, thus using selected value from event to update query
- this.updateFeatures({ filterType: "featureType", filterValue });
+ this.fetchPagedFeatures({ filterType: "featureType", filterValue });
},
updateStatusFeatures(filterValue) {
- this.updateFeatures({ filterType: "status", filterValue });
+ this.fetchPagedFeatures({ filterType: "status", filterValue });
},
- updateFeatures(params) {
+ fetchPagedFeatures(params) {
+ this.onFilterChange(); //* temporary, use paginated event to watch change in filters, to modify geojson on map
+ //* replace function calls in watcher and on input
let url = `${this.API_BASE_URL}projects/${this.$route.params.slug}/feature-paginated/?output=geojson&limit=${this.pagination.pagesize}&offset=${this.pagination.start}`;
if (params) {
@@ -492,10 +565,10 @@ export default {
this.featuresCount = response.data.count;
this.previous = response.data.previous;
this.next = response.data.next;
- this.geojsonFeatures = response.data.results.features;
+ this.geojsonFeaturesPaginated = response.data.results.features;
//if (response.data.results.features.length > 0) {
- this.loadFeatures();
- this.onFilterChange();
+ //this.loadFeatures();
+ //this.onFilterChange();
//}
}
this.$store.commit("DISCARD_LOADER");
@@ -506,37 +579,7 @@ export default {
});
},
- loadFeatures() {
- const urlParams = new URLSearchParams(window.location.search);
- const featureType = urlParams.get("feature_type");
- const featureStatus = urlParams.get("status");
- const featureTitle = urlParams.get("title");
- this.featureGroup = mapUtil.addFeatures(
- this.geojsonFeatures,
- {
- featureType,
- featureStatus,
- featureTitle,
- },
- true,
- this.feature_types
- );
- // Fit the map to bound only if no initial zoom and center are defined
- if (
- (this.lat === "" || this.lng === "" || this.zoom === "") &&
- this.geojsonFeatures.length > 0
- ) {
- mapUtil
- .getMap()
- .fitBounds(this.featureGroup.getBounds(), { padding: [25, 25] });
- }
- this.form.type.choices = [
- //* converting Set to an Array with spread "..."
- ...new Set(
- this.geojsonFeatures.map((el) => el.properties.feature_type.title)
- ), //* use Set to eliminate duplicate values
- ];
- },
+ //* Pagination for table *//
handlePageChange(page) {
if (page === "next") {
@@ -555,7 +598,7 @@ export default {
this.pagination.start += toAddOrRemove;
this.pagination.end += toAddOrRemove;
this.pagination.currentPage = pageNumber;
- this.updateFeatures();
+ this.fetchPagedFeatures();
},
toPreviousPage() {
@@ -565,7 +608,7 @@ export default {
this.pagination.end -= this.pagination.pagesize;
this.pagination.currentPage -= 1;
}
- this.updateFeatures(this.previous);
+ this.fetchPagedFeatures(this.previous);
}
},
@@ -576,7 +619,7 @@ export default {
this.pagination.end += this.pagination.pagesize;
this.pagination.currentPage += 1;
}
- this.updateFeatures(this.next);
+ this.fetchPagedFeatures(this.next);
}
},
},