diff --git a/src/App.vue b/src/App.vue
index 09986a4e43fa7b65719a5b2e1800a56769fb68a1..d1ce56f2f1e2fe39dbdb6831893e29113ed7c01a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,7 +24,10 @@
</span>
<i class="dropdown icon"></i>
<div
- :class="['menu dropdown-list', { 'visible transition': menuIsOpen }]"
+ :class="[
+ 'menu dropdown-list',
+ { 'visible transition': menuIsOpen },
+ ]"
style="z-index: 401"
>
<router-link
diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index 9ac21c6a36ec9afbf7414df88dd1b6c0146eb617..35c32d83944a780225f238907745937afa0ddb2e 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -8,12 +8,11 @@
"
></script>
<div class="feature-list-container ui grid">
-
<div class="four wide column">
<h1>Signalements</h1>
</div>
<div class="twelve wide column">
- <div class="ui dimmer" :class="[ { active: featureLoading }]">
+ <div class="ui dimmer" :class="[{ active: featureLoading }]">
<div class="ui large text loader">Chargement</div>
</div>
<div class="ui secondary menu">
@@ -33,8 +32,8 @@
></a>
<div class="item">
<h4>
- {{ getFilteredFeatures().length }} signalement{{
- getFilteredFeatures().length > 1 ? "s" : ""
+ {{ filteredFeatures.length }} signalement{{
+ filteredFeatures.length > 1 ? "s" : ""
}}
</h4>
</div>
@@ -88,7 +87,7 @@
data-position="left center"
data-variation="mini"
>
- <i class="grey trash icon" @click="modalAllDelete()"></i>
+ <i class="grey trash icon" @click="modalAllDelete"></i>
</div>
</div>
</div>
@@ -208,7 +207,7 @@
</tr>
</thead>
<tbody>
- <tr v-for="(feature, index) in getPaginatedFeatures()" :key="index">
+ <tr v-for="(feature, index) in paginatedFeatures" :key="index">
<td class="center">
<div class="ui checkbox">
<input
@@ -276,11 +275,11 @@
<!-- |date:'Ymd' -->
{{ feature.properties.updated_on }}
</td>
- <td class="center" v-if="user">
+ <td class="center" v-if="user">
{{ feature.properties.creator.username }}
</td>
</tr>
- <tr v-if="getFilteredFeatures().length === 0" class="odd">
+ <tr v-if="filteredFeatures.length === 0" class="odd">
<td colspan="5" class="dataTables_empty" valign="top">
Aucune donnée disponible
</td>
@@ -294,7 +293,7 @@
aria-live="polite"
>
Affichage de l'élément {{ pagination.start + 1 }} Ã
- {{ pagination.end + 1 }} sur {{ getFilteredFeatures().length }} éléments
+ {{ pagination.end + 1 }} sur {{ filteredFeatures.length }} éléments
</div>
<div
class="dataTables_paginate paging_simple_numbers"
@@ -309,16 +308,21 @@
id="table-features_previous"
>Précédent</a
>
- <span> <a
- v-for="(page, index) in getNbPages"
+ <span>
+ <a
+ v-for="(page, index) in nbPages"
:key="'page' + index"
- :class="['paginate_button', {'current' : page.value === pagination.currentPage }]"
+ :class="[
+ 'paginate_button',
+ { current: page.value === pagination.currentPage },
+ ]"
aria-controls="table-features"
data-dt-idx="1"
tabindex="0"
- >{{page.value}}</a
- > </span>
- <!-- TODO : <span v-if="getNbPages > 4" class="ellipsis">...</span> -->
+ >{{ page.value }}</a
+ >
+ </span>
+ <!-- // TODO : <span v-if="nbPages > 4" class="ellipsis">...</span> -->
<a
class="paginate_button next"
aria-controls="table-features"
@@ -351,7 +355,7 @@
</div>
<div class="actions">
<button
- @click="deleteAllFeatureSelection()"
+ @click="deleteAllFeatureSelection"
type="button"
class="ui red compact fluid button"
>
@@ -414,7 +418,7 @@ export default {
title: null,
},
pagination: {
- currentPage : 1,
+ currentPage: 1,
pagesize: 15,
start: 0,
end: 14,
@@ -423,15 +427,15 @@ export default {
column: "",
ascending: true,
},
- geojsonFeatures:[],
- featureLoading:false,
- filterStatus:null,
- filterType:null,
- baseUrl:this.$store.state.configuration.BASE_URL,
- map:null,
- zoom:null,
- lat:null,
- lng:null,
+ geojsonFeatures: [],
+ featureLoading: false,
+ filterStatus: null,
+ filterType: null,
+ baseUrl: this.$store.state.configuration.BASE_URL,
+ map: null,
+ zoom: null,
+ lat: null,
+ lng: null,
showMap: true,
showAddFeature: false,
};
@@ -446,55 +450,53 @@ export default {
baseMaps() {
return this.$store.state.map.basemaps;
},
- getNbPages() {
+
+ nbPages() {
let N = Math.round(
- this.getFilteredFeatures().length / this.pagination.pagesize
+ this.filteredFeatures.length / this.pagination.pagesize
);
let rest = Math.round(
- this.getFilteredFeatures().length % this.pagination.pagesize
+ this.filteredFeatures.length % this.pagination.pagesize
);
- if (rest > 0)
- N++;
- const arr = [...Array(N).keys()].map((function(x) {
+ if (rest > 0) N++;
+ const arr = [...Array(N).keys()].map(function (x) {
++x;
return {
index: x,
- value: x
- }
- }));
+ value: x,
+ };
+ });
return arr;
},
- },
- methods: {
- modalAllDelete() {
- return (this.modalAllDeleteOpen = !this.modalAllDeleteOpen);
- },
- deleteFeature(feature) {
- const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}features/${feature.feature_id}`;
- axios
- .delete(url, {})
- .then(() => {
- if (!this.modalAllDeleteOpen) {
- this.$router.go();
- }
- })
- .catch(() => {
- return false;
+
+ filteredFeatures() {
+ let results = this.geojsonFeatures;
+ if (this.filterType) {
+ results = results.filter(
+ (el) => el.properties.feature_type.title === this.filterType
+ );
+ }
+ if (this.filterStatus) {
+ console.log("filter by" + this.filterStatus);
+ results = results.filter(
+ (el) => el.properties.status.value === this.filterStatus
+ );
+ }
+ 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;
},
- deleteAllFeatureSelection() {
- let feature = {};
- this.checkedFeatures.forEach((feature_id) => {
- feature = { feature_id: feature_id };
- this.deleteFeature(feature);
- });
- this.modalAllDelete();
- },
- getFeatureDisplayName(feature) {
- return feature.properties.title || feature.id;
- },
- getPaginatedFeatures() {
- let filterdFeatures = [...this.getFilteredFeatures()];
+
+ paginatedFeatures() {
+ let filterdFeatures = [...this.filteredFeatures];
// Ajout du tri
if (this.sort.column != "") {
filterdFeatures = filterdFeatures.sort((a, b) => {
@@ -513,7 +515,6 @@ export default {
aProp = a.properties.display_creator;
bProp = b.properties.display_creator;
}
-
//ascending
if (this.sort.ascending) {
if (aProp < bProp) {
@@ -535,15 +536,49 @@ export default {
}
});
}
-
return filterdFeatures.slice(this.pagination.start, this.pagination.end);
},
+ },
+
+ methods: {
+ modalAllDelete() {
+ this.modalAllDeleteOpen = !this.modalAllDeleteOpen;
+ },
+
+ deleteFeature(feature) {
+ const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}features/${feature.feature_id}`;
+ axios
+ .delete(url, {})
+ .then(() => {
+ if (!this.modalAllDeleteOpen) {
+ this.$router.go();
+ }
+ })
+ .catch(() => {
+ return false;
+ });
+ },
+
+ deleteAllFeatureSelection() {
+ let feature = {};
+ this.checkedFeatures.forEach((feature_id) => {
+ feature = { feature_id: feature_id };
+ this.deleteFeature(feature);
+ });
+ this.modalAllDelete();
+ },
+
+ getFeatureDisplayName(feature) {
+ return feature.properties.title || feature.id;
+ },
+
isSortedAsc(column) {
return this.sort.column == column && this.sort.ascending;
},
isSortedDesc(column) {
return this.sort.column == column && !this.sort.ascending;
},
+
changeSort(column) {
if (this.sort.column == column) {
//changer order
@@ -553,6 +588,7 @@ export default {
this.sort.ascending = true;
}
},
+
onFilterStatusChange(newvalue) {
this.filterStatus = null;
if (newvalue) {
@@ -562,65 +598,41 @@ export default {
this.onFilterChange();
},
+
onFilterTypeChange(newvalue) {
this.filterType = null;
if (newvalue) {
console.log("filter change", newvalue);
this.filterType = newvalue;
}
-
this.onFilterChange();
},
onFilterChange() {
- var features = this.getFilteredFeatures();
+ var features = this.filteredFeatures;
this.featureGroup.clearLayers();
this.featureGroup = mapUtil.addFeatures(features, {});
if (features.length > 0) {
mapUtil.getMap().fitBounds(this.featureGroup.getBounds());
}
},
- getFilteredFeatures() {
- let results = this.geojsonFeatures;
- if (this.filterType) {
- results = results.filter(
- (el) => el.properties.feature_type.title === this.filterType
- );
- }
- if (this.filterStatus) {
- console.log("filter by" + this.filterStatus);
- results = results.filter(
- (el) => el.properties.status.value === this.filterStatus
- );
- }
- 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;
- },
-
+
toPreviousPage() {
if (this.pagination.start > 0) {
this.pagination.start -= this.pagination.pagesize;
this.pagination.end -= this.pagination.pagesize;
- this.pagination.currentPage-=1;
+ this.pagination.currentPage -= 1;
}
-
},
+
toNextPage() {
- if (this.pagination.end < this.getFilteredFeatures().length) {
+ if (this.pagination.end < this.filteredFeatures.length) {
this.pagination.start += this.pagination.pagesize;
this.pagination.end += this.pagination.pagesize;
- this.pagination.currentPage+=1;
+ this.pagination.currentPage += 1;
}
},
+
loadFeatures(features) {
this.geojsonFeatures = features;
const urlParams = new URLSearchParams(window.location.search);
@@ -654,6 +666,7 @@ export default {
this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug);
}
},
+
mounted() {
this.zoom = this.$route.query.zoom || "";
this.lat = this.$route.query.lat || "";
@@ -678,29 +691,29 @@ export default {
});
// --------- End sidebar events ----------
- if(this.$store.state.map.geojsonFeatures){
- this.loadFeatures(this.$store.state.map.geojsonFeatures);
- }
- else{
- const url=`${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?output=geojson`;
- this.featureLoading=true;
- axios.get(url)
- .then((response) => {
- this.loadFeatures(response.data.features);
- this.featureLoading=false;
- })
- .catch((error) => {
- this.featureLoading=false;
- throw error;
-
- });
- }
+ if (this.$store.state.map.geojsonFeatures) {
+ this.loadFeatures(this.$store.state.map.geojsonFeatures);
+ } else {
+ const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?output=geojson`;
+ this.featureLoading = true;
+ axios
+ .get(url)
+ .then((response) => {
+ this.loadFeatures(response.data.features);
+ this.featureLoading = false;
+ })
+ .catch((error) => {
+ this.featureLoading = false;
+ throw error;
+ });
+ }
setTimeout(
function () {
mapUtil.addGeocoders(this.$store.state.configuration);
- }.bind(this), 1000);
-
+ }.bind(this),
+ 1000
+ );
},
};
</script>