diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index 5b1034e62d325bd0ce0a82424e0366ee010d886e..073cff952d3fe8033d77d69968cc4b7833e785b9 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -266,31 +266,6 @@ export default {
return this.$store.state.configuration.VUE_APP_DJANGO_API_BASE;
},
- /* filteredFeatures() {
- let results = this.geojsonFeatures;
- if (this.form.type.selected) {
- results = results.filter(
- (el) => el.properties.feature_type.title === this.form.type.selected
- );
- }
- if (this.form.status.selected.value) {
- results = results.filter(
- (el) => el.properties.status.value === this.form.status.selected.value
- );
- }
- if (this.form.title) {
- results = results.filter((el) => {
- if (el.properties.title) {
- return el.properties.title
- .toLowerCase()
- .includes(this.form.title.toLowerCase());
- } else
- return el.id.toLowerCase().includes(this.form.title.toLowerCase());
- });
- }
- return results;
- }, */
-
statusChoices() {
//* if project is not moderate, remove pending status
return this.form.status.choices.filter((el) =>
@@ -299,36 +274,7 @@ export default {
},
},
- watch: {
- form: {
- deep: true,
- handler(newValue, oldValue) {
- console.log(newValue, oldValue);
- console.log(newValue.type.selected, oldValue.type.selected);
- console.log(
- newValue.status.selected.value,
- oldValue.status.selected.value
- );
- if (
- newValue.type.selected !== oldValue.type.selected ||
- newValue.status.selected.value !== oldValue.status.selected.value
- ) {
- this.updateFeatures();
- }
- },
- } /*
- filteredFeatures(newValue, oldValue) {
- if (newValue && newValue !== oldValue) {
- this.onFilterChange();
- }
- },
- */,
- },
-
methods: {
- test() {
- console.log("test");
- },
modalAllDelete() {
this.modalAllDeleteOpen = !this.modalAllDeleteOpen;
},
@@ -361,11 +307,8 @@ export default {
this.modalAllDelete();
},
- //onFilterChange() {
updateFeaturesOnMap() {
- // ? Besoin de faire un fetch avec nouveau filtres ici ?
if (this.featureGroup) {
- //const features = this.filteredFeatures;
const features = this.geojsonFeatures;
this.featureGroup.clearLayers();
this.featureGroup = mapUtil.addFeatures(
@@ -414,10 +357,8 @@ export default {
this.updateFeatures();
setTimeout(() => {
- let project_id = this.$route.params.slug.split("-")[0];
+ const project_id = this.$route.params.slug.split("-")[0];
const mvtUrl = `${this.API_BASE_URL}features.mvt/?tile={z}/{x}/{y}&project_id=${project_id}`;
- //const mvtUrl = `${this.API_BASE_URL}features.mvt/?tile={z}/{x}/{y}&project_id=${project_id}&feature_type__slug=88-poopo`;
- //const mvtUrl = `${this.API_BASE_URL}features.mvt/?tile={z}/{x}/{y}&feature_type__slug=88-poopo`;
mapUtil.addVectorTileLayer(
mvtUrl,
this.$route.params.slug,
@@ -428,31 +369,86 @@ export default {
}, 1000);
},
- updateTypeFeatures(selected) {
- console.log(selected)
- if (selected !== undefined && selected !== null) {
- this.updateFeatures(`&feature_type__slug=${selected}`);
- }
+ getFeatureTypeSlug(title) {
+ const featureType = this.feature_types.find((el) => el.title === title);
+ return featureType ? featureType.slug : null;
},
- updateStatusFeatures(selected) {
- if (selected !== undefined && selected !== null) {
- this.updateFeatures(`&status__value=${selected.value}`);
+ buildFilterParams({ filterType, filterValue }) {
+ console.log({ filterType, filterValue });
+ let params = "";
+ let typeFilter, statusFilter;
+ //*** feature type ***//
+ if (filterType === "featureType") {
+ if (filterValue === "" && !this.form.type.selected) {
+ //* s'il y n'avait pas de filtre et qu'il a été supprimé --> ne pas mettre à jour les features
+ return "abort";
+ } else if (filterValue !== undefined && filterValue !== null) {
+ //* s'il y a un nouveau filtre --> ajouter une params
+ typeFilter = this.getFeatureTypeSlug(filterValue);
+ } //* sinon il n'y a pas de param ajouté, ce qui supprime la query
+
+ //*** status ***//
+ } else if (filterType === "status") {
+ if (filterValue === "" && !this.form.status.selected.value) {
+ return "abort";
+ } else if (filterValue !== undefined && filterValue !== null) {
+ statusFilter = filterValue.value;
+ }
}
- },
- updateFeatures(selected) {
- console.log("selected", selected);
- let url = `${this.API_BASE_URL}projects/${this.$route.params.slug}/feature-paginated/?output=geojson&limit=${this.limit}&offset=${this.offset}`;
- console.log(this.form.type.selected, this.form.status.selected.value);
+ //* after possibilities of aborting features fetch, empty geojson to make sure even no result would update
- if (selected) {
- url += selected;
+ if (
+ (filterType === undefined || filterType === "status") &&
+ this.form.type.selected
+ ) {
+ //* s'il y a déjà un filtre sélectionné, maintenir le params
+ typeFilter = this.getFeatureTypeSlug(this.form.type.selected);
+ }
+ if (
+ (filterType === undefined || filterType === "featureType") &&
+ this.form.status.selected.value
+ ) {
+ statusFilter = this.form.status.selected.value;
}
+
+ if (typeFilter) {
+ let typeParams = `&feature_type__slug=${typeFilter}`;
+ params += typeParams;
+ }
+ if (statusFilter) {
+ let statusParams = `&status__value=${statusFilter}`;
+ params += statusParams;
+ }
+
+ //*** title ***//
if (this.form.title) {
- url += `&title=${this.form.title}`;
+ params += `&title=${this.form.title}`;
}
+ return params;
+ },
+
+ 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 });
+ },
+
+ updateStatusFeatures(filterValue) {
+ this.updateFeatures({ filterType: "status", filterValue });
+ },
+
+ updateFeatures(filterParams) {
+ let url = `${this.API_BASE_URL}projects/${this.$route.params.slug}/feature-paginated/?output=geojson&limit=${this.limit}&offset=${this.offset}`;
+ if (filterParams) {
+ const params = this.buildFilterParams(filterParams);
+ if (params === "abort") return;
+ url += params;
+ }
+ console.log("url -->", url);
+
this.$store.commit(
"DISPLAY_LOADER",
"Récupération des signalements en cours..."
@@ -464,10 +460,11 @@ export default {
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.updateFeaturesOnMap();
- }
+ this.geojsonFeatures = response.data.results.features;
+ //if (response.data.results.features.length > 0) {
+ this.loadFeatures();
+ this.updateFeaturesOnMap();
+ //}
}
this.$store.commit("DISCARD_LOADER");
})
@@ -477,17 +474,11 @@ export default {
});
},
- loadFeatures(features) {
- this.geojsonFeatures = features;
+ loadFeatures() {
const urlParams = new URLSearchParams(window.location.search);
const featureType = urlParams.get("feature_type");
const featureStatus = urlParams.get("status");
const featureTitle = urlParams.get("title");
- console.log({
- featureType,
- featureStatus,
- featureTitle,
- });
this.featureGroup = mapUtil.addFeatures(
this.geojsonFeatures,
{
@@ -513,7 +504,6 @@ export default {
this.geojsonFeatures.map((el) => el.properties.feature_type.title)
), //* use Set to eliminate duplicate values
];
- console.log(this.form.type.choices);
},
},