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

format and moved get functions to computed to improve performance and code readability

parent c70adb92
No related branches found
No related tags found
1 merge request!47Evol/redmine ticket 11083 full responsive design
Hide whitespace changes
Inline Side-by-side
src/App.vue
+ 4
− 1
View file @ 86efe436
......@@ -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
......
src/views/feature/Feature_list.vue
+ 130
− 117
View file @ 86efe436
......@@ -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>
......
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