diff --git a/src/components/feature/FeatureListTable.vue b/src/components/feature/FeatureListTable.vue
index 2787cb177a7096722f862dfe21b194c5bcf96216..dfba1b87b37cd5777d577bf6c5c9d0bc09068156 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 27357305b6eebfa1a93ca53609b7cfe5bf257ed9..c01a7bce1872e25abb260bfba2bdd5abade5bf2a 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 93d3392555079e7e7dee1ddc9484e4a6007fba3f..23a1d44323e64b539ad2993262b8f6c40784f400 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() {