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

WIP: pagination functionnal

parent 72ed8fe6
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/feature/FeatureListTable.vue
+ 36
− 59
View file @ c88f5956
......@@ -75,14 +75,16 @@
</tr>
</thead>
<tbody>
<tr v-for="(feature, index) in paginatedFeatures" :key="index">
<tr v-for="(feature, index) in sortedFeatures" :key="index">
<td class="center">
<div
class="ui checkbox"
:class="
feature.properties.creator.username !== user.username && !user.is_superuser && !isUserProjectAdministrator ?
'disabled' :
''
feature.properties.creator.username !== user.username &&
!user.is_superuser &&
!isUserProjectAdministrator
? 'disabled'
: ''
"
>
<input
......@@ -90,7 +92,11 @@
:id="feature.id"
:value="feature.id"
v-model="checked"
:disabled="feature.properties.creator.username !== user.username && !user.is_superuser && !isUserProjectAdministrator"
:disabled="
feature.properties.creator.username !== user.username &&
!user.is_superuser &&
!isUserProjectAdministrator
"
/>
<label></label>
</div>
......@@ -157,15 +163,15 @@
{{ feature.properties.display_last_editor }}
</td>
</tr>
<tr v-if="filteredFeatures.length === 0" class="odd">
<tr v-if="featuresCount === 0" class="odd">
<td colspan="5" class="dataTables_empty" valign="top">
Aucune donnée disponible
</td>
</tr>
</tbody>
</table>
<div
v-if="nbPages.length > 1"
<!-- v-if="nbPages.length > 1" -->
<!-- <div
id="table-features_info"
class="dataTables_info"
role="status"
......@@ -173,7 +179,7 @@
>
Affichage de l'élément {{ pagination.start + 1 }} à
{{ displayedPageEnd }}
sur {{ filteredFeatures.length }} éléments
sur {{ featuresCount }} éléments
</div>
<div
v-if="nbPages.length > 1"
......@@ -207,7 +213,7 @@
>{{ pageNumber }}</a
>
</span>
<!-- // TODO : <span v-if="nbPages > 4" class="ellipsis">...</span> -->
<a
id="table-features_next"
:class="[
......@@ -220,26 +226,26 @@
@click="toNextPage"
>Suivant</a
>
</div>
</div> -->
</div>
</template>
<script>
import { mapState, mapGetters } from 'vuex';
import { mapState, mapGetters } from "vuex";
export default {
name: "FeatureListTable",
props: ["filteredFeatures", "checkedFeatures"],
props: ["geojsonFeatures", "checkedFeatures", "featuresCount"],
data() {
return {
pagination: {
/* pagination: {
currentPage: 1,
pagesize: 15,
start: 0,
end: 15,
},
}, */
sort: {
column: "",
ascending: true,
......@@ -248,23 +254,18 @@ export default {
},
computed: {
...mapState([
'user',
]),
...mapGetters([
'project',
'permissions'
]),
...mapState(["user"]),
...mapGetters(["project", "permissions"]),
isUserProjectAdministrator() {
return this.permissions.is_project_administrator;
},
paginatedFeatures() {
let filterdFeatures = [...this.filteredFeatures];
sortedFeatures() {
let sortedFeatures = [...this.geojsonFeatures];
// Ajout du tri
if (this.sort.column !== "") {
filterdFeatures = filterdFeatures.sort((a, b) => {
sortedFeatures = sortedFeatures.sort((a, b) => {
let aProp = this.getFeatureDisplayName(a);
let bProp = this.getFeatureDisplayName(b);
if (this.sort.column === "statut") {
......@@ -301,19 +302,17 @@ export default {
}
});
}
return filterdFeatures.slice(this.pagination.start, this.pagination.end);
return sortedFeatures;
},
nbPages() {
let N = Math.ceil(
this.filteredFeatures.length / this.pagination.pagesize
);
/* nbPages() {
let N = Math.ceil(this.featuresCount / this.pagination.pagesize);
const arr = [...Array(N).keys()].map(function (x) {
++x;
return x;
});
return arr;
},
}, */
checked: {
get() {
......@@ -323,12 +322,12 @@ export default {
this.$store.commit("feature/UPDATE_CHECKED_FEATURES", newChecked);
},
},
/*
displayedPageEnd() {
return this.filteredFeatures.length <= this.pagination.end
? this.filteredFeatures.length
return this.featuresCount <= this.pagination.end
? this.featuresCount
: this.pagination.end;
},
}, */
},
methods: {
......@@ -359,36 +358,14 @@ export default {
}
},
toPage(pageNumber) {
const toAddOrRemove =
(pageNumber - this.pagination.currentPage) * this.pagination.pagesize;
this.pagination.start += toAddOrRemove;
this.pagination.end += toAddOrRemove;
this.pagination.currentPage = pageNumber;
},
toPreviousPage() {
if (this.pagination.start > 0) {
this.pagination.start -= this.pagination.pagesize;
this.pagination.end -= this.pagination.pagesize;
this.pagination.currentPage -= 1;
}
},
toNextPage() {
if (this.pagination.end < this.filteredFeatures.length) {
this.pagination.start += this.pagination.pagesize;
this.pagination.end += this.pagination.pagesize;
this.pagination.currentPage += 1;
}
},
},
};
</script>
<style scoped>
/* datatables */
.dataTables_wrapper {
/* .dataTables_wrapper {
position: relative;
clear: both;
}
......@@ -465,7 +442,7 @@ export default {
border: 1px solid transparent;
background: transparent;
box-shadow: none;
}
} */
i.icon.sort:not(.down):not(.up) {
color: rgb(220, 220, 220);
......
src/views/feature/Feature_list.vue
+ 228
− 14
View file @ c88f5956
......@@ -141,12 +141,75 @@
<div id="map" ref="map"></div>
<SidebarLayers v-if="basemaps && map" />
</div>
<!-- v-on:update:page="changePage" -->
<FeatureListTable
v-show="!showMap"
:filteredFeatures="geojsonFeatures"
:geojsonFeatures="geojsonFeatures"
:checkedFeatures.sync="checkedFeatures"
:featuresCount="featuresCount"
/>
<!-- PAGINATION START -->
<div data-tab="list" class="dataTables_wrapper no-footer">
<div
id="table-features_info"
class="dataTables_info"
role="status"
aria-live="polite"
>
Affichage de l'élément {{ pagination.start + 1 }} à
{{ displayedPageEnd }}
sur {{ featuresCount }} éléments
</div>
<div
v-if="nbPages.length > 1"
id="table-features_paginate"
class="dataTables_paginate paging_simple_numbers"
>
<a
@click="toPreviousPage"
id="table-features_previous"
:class="[
'paginate_button previous',
{ disabled: pagination.currentPage === 1 },
]"
aria-controls="table-features"
data-dt-idx="0"
tabindex="0"
>Précédent</a
>
<span>
<a
v-for="pageNumber in nbPages"
:key="'page' + pageNumber"
@click="toPage(pageNumber)"
:class="[
'paginate_button',
{ current: pageNumber === pagination.currentPage },
]"
aria-controls="table-features"
data-dt-idx="1"
tabindex="0"
>{{ pageNumber }}</a
>
</span>
<!-- // TODO : <span v-if="nbPages > 4" class="ellipsis">...</span> -->
<a
id="table-features_next"
:class="[
'paginate_button next',
{ disabled: pagination.currentPage === nbPages.length },
]"
aria-controls="table-features"
data-dt-idx="7"
tabindex="0"
@click="toNextPage"
>Suivant</a
>
</div>
</div>
<!-- PAGINATION END -->
<!-- MODAL ALL DELETE FEATURE TYPE -->
<div
v-if="modalAllDeleteOpen"
......@@ -239,18 +302,24 @@ export default {
},
geojsonFeatures: [],
featuresCount: 0,
previous: null,
next: null,
filterStatus: null,
filterType: null,
baseUrl: this.$store.state.configuration.BASE_URL,
map: null,
zoom: null,
lat: null,
lng: null,
limit: 15,
offset: 0,
//limit: 15,
//offset: 0,
featuresCount: 0,
filterType: null,
filterStatus: null,
pagination: {
currentPage: 1,
pagesize: 15,
start: 0,
end: 15,
},
previous: null,
next: null,
showMap: true,
showAddFeature: false,
};
......@@ -272,6 +341,21 @@ export default {
this.project.moderation ? true : el.value !== "pending"
);
},
nbPages() {
let N = Math.ceil(this.featuresCount / this.pagination.pagesize);
const arr = [...Array(N).keys()].map(function (x) {
++x;
return x;
});
return arr;
},
displayedPageEnd() {
return this.featuresCount <= this.pagination.end
? this.featuresCount
: this.pagination.end;
},
},
methods: {
......@@ -369,6 +453,49 @@ export default {
}, 1000);
},
/* changePage(page) {
if (page === "next") {
this.updateFeatures(this.next);
} else if (page === "previous") {
this.updateFeatures(this.previous);
} else if (typeof page === Number) {
//* update limit and offset
this.updateFeatures();
}
}, */
toPage(pageNumber) {
console.log(pageNumber);
const toAddOrRemove =
(pageNumber - this.pagination.currentPage) * this.pagination.pagesize;
this.pagination.start += toAddOrRemove;
this.pagination.end += toAddOrRemove;
this.pagination.currentPage = pageNumber;
this.updateFeatures();
},
toPreviousPage() {
if (this.pagination.currentPage !== 1) {
if (this.pagination.start > 0) {
this.pagination.start -= this.pagination.pagesize;
this.pagination.end -= this.pagination.pagesize;
this.pagination.currentPage -= 1;
}
this.updateFeatures(this.previous);
}
},
toNextPage() {
if (this.pagination.currentPage !== this.nbPages.length) {
if (this.pagination.end < this.featuresCount) {
this.pagination.start += this.pagination.pagesize;
this.pagination.end += this.pagination.pagesize;
this.pagination.currentPage += 1;
}
this.updateFeatures(this.next);
}
},
getFeatureTypeSlug(title) {
const featureType = this.feature_types.find((el) => el.title === title);
return featureType ? featureType.slug : null;
......@@ -440,12 +567,20 @@ export default {
this.updateFeatures({ filterType: "status", filterValue });
},
updateFeatures(filterParams) {
let url = `${this.API_BASE_URL}projects/${this.$route.params.slug}/feature-paginated/?output=geojson&limit=${this.limit}&offset=${this.offset}`;
if (filterParams) {
const params = this.buildFilterParams(filterParams);
if (params === "abort") return;
url += params;
updateFeatures(params) {
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) {
if (typeof params === "object") {
const filterParams = this.buildFilterParams(params);
if (filterParams === "abort") return;
url += filterParams;
} else {
console.error("ONLY FOR DEV !!!!!!!!!!!!!");
params = params.replace("8000", "8010");
console.log(url);
url = params;
}
}
console.log("url -->", url);
......@@ -598,5 +733,84 @@ export default {
width: 100%;
}
}
.dataTables_wrapper {
position: relative;
clear: both;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
color: #333;
}
.dataTables_wrapper .dataTables_info {
clear: both;
float: left;
padding-top: 0.755em;
}
.dataTables_wrapper .dataTables_paginate {
float: right;
text-align: right;
padding-top: 0.25em;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: #333 !important;
border: 1px solid #979797;
background-color: white;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #fff),
color-stop(100%, #dcdcdc)
);
background: -webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);
background: -moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);
background: -ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);
background: -o-linear-gradient(top, #fff 0%, #dcdcdc 100%);
background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
box-sizing: border-box;
display: inline-block;
min-width: 1.5em;
padding: 0.5em 1em;
margin-left: 2px;
text-align: center;
text-decoration: none !important;
cursor: pointer;
color: #333 !important;
border: 1px solid transparent;
border-radius: 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
color: white !important;
border: 1px solid #111;
background-color: #585858;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #585858),
color-stop(100%, #111)
);
background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
background: -moz-linear-gradient(top, #585858 0%, #111 100%);
background: -ms-linear-gradient(top, #585858 0%, #111 100%);
background: -o-linear-gradient(top, #585858 0%, #111 100%);
background: linear-gradient(to bottom, #585858 0%, #111 100%);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
cursor: default;
color: #666 !important;
border: 1px solid transparent;
background: transparent;
box-shadow: none;
}
</style>
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