diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue index ea6fdd003b61b391cf3b4ee2494180ad3d62b4a7..7d6ecaed2fdd020b35d5f4cd9dfe3864dd50f2c3 100644 --- a/src/views/feature/Feature_list.vue +++ b/src/views/feature/Feature_list.vue @@ -31,8 +31,8 @@ <div class="item"> <h4> <!-- {{ featuresCount }} signalement{{ featuresCount > 1 ? "s" : "" }} --> - {{ geojsonFeatures.length }} signalement{{ - geojsonFeatures.length > 1 ? "s" : "" + {{ filteredFeatures.length }} signalement{{ + filteredFeatures.length > 1 ? "s" : "" }} </h4> </div> @@ -298,6 +298,40 @@ export default { return pageNumb; }); }, + + 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) { + console.log("filter by" + 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; + }, + }, + + watch: { + filteredFeatures(newValue, oldValue) { + if (newValue && newValue !== oldValue) { + this.onFilterChange(); + } + }, }, methods: { @@ -345,9 +379,8 @@ export default { }, onFilterChange() { - console.log("onFilterChange", this.featureGroup); if (this.featureGroup) { - const features = this.geojsonFeatures; + const features = this.filteredFeatures; this.featureGroup.clearLayers(); this.featureGroup = mapUtil.addFeatures( features, @@ -410,7 +443,6 @@ export default { }, 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", @@ -419,7 +451,6 @@ export default { axios .get(url) .then((response) => { - console.log(response); if (response.status === 200 && response.data.features.length > 0) { this.geojsonFeatures = response.data.features; this.loadFeatures(); @@ -471,7 +502,6 @@ export default { }, buildFilterParams({ filterType, filterValue }) { - console.log({ filterType, filterValue }); let params = ""; let typeFilter, statusFilter; //*** feature type ***//