Skip to content
Snippets Groups Projects
Commit 72ed8fe6 authored by Timothee P's avatar Timothee P :sunflower:
Browse files

get filters functionnal

parent e40ca204
No related branches found
No related tags found
1 merge request!162REDMINE_ISSUE-11784
Hide whitespace changes
Inline Side-by-side
src/views/feature/Feature_list.vue
+ 78
− 88
View file @ 72ed8fe6
......@@ -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);
},
},
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment