From 3eeb93ba16aa7b807a5e22216ae89e402cc706c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Timoth=C3=A9e=20Poussard?= <tpoussard@neogeo.fr> Date: Fri, 3 Dec 2021 15:52:47 +0100 Subject: [PATCH] remove features fetch --- src/components/feature/FeatureListTable.vue | 4 +- src/services/feature-api.js | 18 +- src/views/feature/Feature_list.vue | 223 ++++---------------- 3 files changed, 63 insertions(+), 182 deletions(-) diff --git a/src/components/feature/FeatureListTable.vue b/src/components/feature/FeatureListTable.vue index 2787cb17..dfba1b87 100644 --- a/src/components/feature/FeatureListTable.vue +++ b/src/components/feature/FeatureListTable.vue @@ -237,7 +237,7 @@ export default { name: "FeatureListTable", props: [ - "geojsonFeatures", + "paginatedFeatures", "checkedFeatures", "featuresCount", "pagination", @@ -262,7 +262,7 @@ export default { }, sortedFeatures() { - let sortedFeatures = [...this.geojsonFeatures]; + let sortedFeatures = [...this.paginatedFeatures]; // Ajout du tri if (this.sort.column !== "") { sortedFeatures = sortedFeatures.sort((a, b) => { diff --git a/src/services/feature-api.js b/src/services/feature-api.js index 27357305..c01a7bce 100644 --- a/src/services/feature-api.js +++ b/src/services/feature-api.js @@ -1,12 +1,12 @@ -import axios from 'axios'; +import axios from "@/axios-client.js"; import store from '../store' const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE; const featureAPI = { - async getFeaturesBbox(project_slug) { + async getFeaturesBbox(project_slug, queryParams) { const response = await axios.get( - `${baseUrl}projects/${project_slug}/feature-bbox/` + `${baseUrl}projects/${project_slug}/feature-bbox/${queryParams ? '?' + queryParams : ""}` ); if ( response.status === 200 && @@ -18,6 +18,18 @@ const featureAPI = { } }, + async getPaginatedFeatures(url) { + const response = await axios.get(url); + if ( + response.status === 200 && + response.data + ) { + return response.data; + } else { + return null; + } + }, + async getFeatureEvents(featureId) { const response = await axios.get( `${baseUrl}features/${featureId}/events/` diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue index 93d33925..23a1d443 100644 --- a/src/views/feature/Feature_list.vue +++ b/src/views/feature/Feature_list.vue @@ -15,7 +15,7 @@ ><i class="map fitted icon"></i ></a> <a - @click="showTable" + @click="showMap = false" :class="['item no-margin', { active: !showMap }]" data-tab="list" data-tooltip="Liste" @@ -23,10 +23,10 @@ ></a> <div class="item"> <h4> - <!-- {{ featuresCount }} signalement{{ featuresCount > 1 ? "s" : "" }} --> - {{ filteredFeatures.length }} signalement{{ + {{ featuresCount }} signalement{{ featuresCount > 1 ? "s" : "" }} + <!-- {{ filteredFeatures.length }} signalement{{ filteredFeatures.length > 1 ? "s" : "" - }} + }} --> </h4> </div> @@ -82,12 +82,12 @@ </div> </div> - <form id="form-filters" class="ui form grid" action="" method="get"> + <section id="form-filters" class="ui form grid"> <div class="field wide four column no-margin-mobile"> <label>Type</label> <Dropdown v-on:update:selection="updateTypeFeatures" - :options="form.type.choices" + :options="featureTypeChoices" :selected="form.type.selected" :selection.sync="form.type.selected" :search="true" @@ -115,12 +115,12 @@ type="text" name="title" v-model="form.title" - @input="fetchPagedFeatures" + v-on:keyup.enter="fetchPagedFeatures" /> <button - type="button" - class="ui teal icon button" + @click="fetchPagedFeatures" id="submit-search" + class="ui teal icon button" > <i class="search icon"></i> </button> @@ -131,7 +131,7 @@ <input type="hidden" name="zoom" v-model="zoom" /> <input type="hidden" name="lat" v-model="lat" /> <input type="hidden" name="lng" v-model="lng" /> - </form> + </section> <div v-show="showMap" class="ui tab active map-container" data-tab="map"> <div id="map" ref="map"></div> @@ -141,7 +141,7 @@ <FeatureListTable v-show="!showMap" v-on:update:page="handlePageChange" - :geojsonFeatures="geojsonFeaturesPaginated" + :paginatedFeatures="paginatedFeatures" :checkedFeatures.sync="checkedFeatures" :featuresCount="featuresCount" :pagination="pagination" @@ -190,12 +190,6 @@ import FeatureListTable from "@/components/feature/FeatureListTable"; import Dropdown from "@/components/Dropdown.vue"; import axios from "@/axios-client.js"; -// 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'); - export default { name: "Feature_list", @@ -239,30 +233,23 @@ export default { }, title: null, }, - - geojsonFeatures: [], - geojsonFeaturesPaginated: [], + paginatedFeatures: [], baseUrl: this.$store.state.configuration.BASE_URL, map: null, zoom: null, lat: null, lng: null, - //limit: 15, - //offset: 0, featuresCount: 0, - filterType: null, - filterStatus: null, + next: null, + previous: null, pagination: { currentPage: 1, pagesize: 15, start: 0, end: 15, }, - previous: null, - next: null, showMap: true, showAddFeature: false, - paginatedFeaturesDone: true, }; }, @@ -283,6 +270,10 @@ export default { ); }, + featureTypeChoices() { + return this.feature_types.map((el) => el.title); + }, + pageNumbers() { const totalPages = Math.ceil( this.featuresCount / this.pagination.pagesize @@ -292,51 +283,9 @@ 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: { - showTable() { - if (this.paginatedFeaturesDone) { - this.fetchPagedFeatures(); - this.paginatedFeaturesDone = false; - } - this.showMap = false; - }, - modalAllDelete() { this.modalAllDeleteOpen = !this.modalAllDeleteOpen; }, @@ -373,29 +322,13 @@ export default { }, onFilterChange() { - /* if (this.featureGroup) { - const features = this.filteredFeatures; - this.featureGroup.clearLayers(); - this.featureGroup = mapUtil.addFeatures( - features, - {}, - true, - this.feature_types - ); */ - mapUtil.getMap().invalidateSize(); - mapUtil.getMap()._onResize(); // force refresh for vector tiles - if (window.layerMVT) { - window.layerMVT.redraw(); + if (mapUtil.getMap()) { + mapUtil.getMap().invalidateSize(); + mapUtil.getMap()._onResize(); // force refresh for vector tiles + if (window.layerMVT) { + window.layerMVT.redraw(); + } } - - /* if (this.featureGroup.getLayers().length > 0) { - mapUtil - .getMap() - .fitBounds(this.featureGroup.getBounds(), { padding: [25, 25] }); - } else { - mapUtil.getMap().zoomOut(1); - } */ - //} }, initMap() { @@ -425,8 +358,6 @@ export default { }); // --------- End sidebar events ---------- - //this.fetchPagedFeatures(); - //this.getNloadGeojsonFeatures(); setTimeout(() => { const project_id = this.$route.params.slug.split("-")[0]; @@ -441,72 +372,20 @@ export default { }, 1000); }, - getBbox2FIt() { - featureAPI.getFeaturesBbox(this.project.slug).then((bbox) => { - console.log(bbox); - if (bbox) { - const bounds = [ - [bbox[2], bbox[3]], - [bbox[0], bbox[1]], - ]; - mapUtil.getMap().fitBounds(bounds, { padding: [25, 25] }); - } - }); - }, - - /* 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) => { - if (response.status === 200 && response.data.features.length > 0) { - this.geojsonFeatures = response.data.features; - this.loadFeatures(); + getBbox2FIt(queryParams) { + featureAPI + .getFeaturesBbox(this.project.slug, queryParams) + .then((bbox) => { + if (bbox) { + const bounds = [ + [bbox[2], bbox[3]], + [bbox[0], bbox[1]], + ]; + mapUtil.getMap().fitBounds(bounds, { padding: [25, 25] }); } - 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); @@ -564,7 +443,7 @@ export default { if (this.form.title) { params += `&title=${this.form.title}`; } - + this.getBbox2FIt(params); return params; }, @@ -579,8 +458,7 @@ export default { }, 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 + this.onFilterChange(); //* temporary, use paginated event to watch change in filters, to modify geojson on map 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) { @@ -599,25 +477,15 @@ export default { "DISPLAY_LOADER", "Récupération des signalements en cours..." ); - axios - .get(url) - .then((response) => { - if (response.status === 200) { - this.featuresCount = response.data.count; - this.previous = response.data.previous; - this.next = response.data.next; - this.geojsonFeaturesPaginated = response.data.results.features; - //if (response.data.results.features.length > 0) { - //this.loadFeatures(); - //this.onFilterChange(); - //} - } - this.$store.commit("DISCARD_LOADER"); - }) - .catch((error) => { - this.$store.commit("DISCARD_LOADER"); - throw error; - }); + featureAPI.getPaginatedFeatures(url).then((data) => { + if (data) { + this.featuresCount = data.count; + this.previous = data.previous; + this.next = data.next; + this.paginatedFeatures = data.results.features; + } + this.$store.commit("DISCARD_LOADER"); + }); }, //* Pagination for table *// @@ -674,6 +542,7 @@ export default { } else { this.initMap(); } + this.fetchPagedFeatures(); }, destroyed() { -- GitLab