From b452c84543a33ec8d6efdf9c2a28be5451e8fe7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Poussard?= <tpoussard@neogeo.fr>
Date: Tue, 30 Nov 2021 11:24:59 +0100
Subject: [PATCH] remove pagination from map
---
src/components/feature/FeatureListTable.vue | 71 +++++++++----
src/views/feature/Feature_list.vue | 105 +++++---------------
2 files changed, 80 insertions(+), 96 deletions(-)
diff --git a/src/components/feature/FeatureListTable.vue b/src/components/feature/FeatureListTable.vue
index 570423d0..7846bbc7 100644
--- a/src/components/feature/FeatureListTable.vue
+++ b/src/components/feature/FeatureListTable.vue
@@ -170,8 +170,8 @@
</tr>
</tbody>
</table>
- <!-- v-if="nbPages.length > 1" -->
-<!-- <div
+ <!-- v-if="pageNumbers.length > 1" -->
+ <div
id="table-features_info"
class="dataTables_info"
role="status"
@@ -182,7 +182,7 @@
sur {{ featuresCount }} éléments
</div>
<div
- v-if="nbPages.length > 1"
+ v-if="pageNumbers.length > 1"
id="table-features_paginate"
class="dataTables_paginate paging_simple_numbers"
>
@@ -200,7 +200,7 @@
>
<span>
<a
- v-for="pageNumber in nbPages"
+ v-for="pageNumber in pageNumbers"
:key="'page' + pageNumber"
@click="toPage(pageNumber)"
:class="[
@@ -218,7 +218,7 @@
id="table-features_next"
:class="[
'paginate_button next',
- { disabled: pagination.currentPage === nbPages.length },
+ { disabled: pagination.currentPage === pageNumbers.length },
]"
aria-controls="table-features"
data-dt-idx="7"
@@ -226,7 +226,7 @@
@click="toNextPage"
>Suivant</a
>
- </div> -->
+ </div>
</div>
</template>
@@ -236,11 +236,11 @@ import { mapState, mapGetters } from "vuex";
export default {
name: "FeatureListTable",
- props: ["geojsonFeatures", "checkedFeatures", "featuresCount"],
+ props: ["geojsonFeatures", "checkedFeatures", "featuresCount", "pagination", "pageNumbers"],
data() {
return {
-/* pagination: {
+ /* pagination: {
currentPage: 1,
pagesize: 15,
start: 0,
@@ -305,13 +305,14 @@ export default {
return sortedFeatures;
},
-/* nbPages() {
- let N = Math.ceil(this.featuresCount / this.pagination.pagesize);
- const arr = [...Array(N).keys()].map(function (x) {
- ++x;
- return x;
+/* pageNumbers() {
+ const totalPages = Math.ceil(
+ this.featuresCount / this.pagination.pagesize
+ );
+ return [...Array(totalPages).keys()].map((pageNumb) => {
+ ++pageNumb;
+ return pageNumb;
});
- return arr;
}, */
checked: {
@@ -322,12 +323,12 @@ export default {
this.$store.commit("feature/UPDATE_CHECKED_FEATURES", newChecked);
},
},
-/*
+
displayedPageEnd() {
return this.featuresCount <= this.pagination.end
? this.featuresCount
: this.pagination.end;
- }, */
+ },
},
methods: {
@@ -358,14 +359,48 @@ export default {
}
},
+ toPage(pageNumber) {
+ console.log(pageNumber);
+ this.$emit("update:page", 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() {
+ this.$emit("update:page", "previous");
+ /* 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() {
+ this.$emit("update:page", "next");
+ /* if (this.pagination.currentPage !== this.pageNumbers.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);
+ } */
+ },
},
};
</script>
<style scoped>
/* datatables */
-/* .dataTables_wrapper {
+.dataTables_wrapper {
position: relative;
clear: both;
}
@@ -442,7 +477,7 @@ export default {
border: 1px solid transparent;
background: transparent;
box-shadow: none;
-} */
+}
i.icon.sort:not(.down):not(.up) {
color: rgb(220, 220, 220);
diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index 07d41bbd..51435ead 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -141,75 +141,17 @@
<div id="map" ref="map"></div>
<SidebarLayers v-if="basemaps && map" />
</div>
- <!-- v-on:update:page="changePage" -->
+ <!-- | -->
<FeatureListTable
v-show="!showMap"
+ v-on:update:page="handlePageChange"
:geojsonFeatures="geojsonFeatures"
:checkedFeatures.sync="checkedFeatures"
:featuresCount="featuresCount"
+ :pagination="pagination"
+ :pageNumbers="pageNumbers"
/>
- <!-- 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"
@@ -342,20 +284,26 @@ export default {
);
},
- nbPages() {
- let N = Math.ceil(this.featuresCount / this.pagination.pagesize);
- const arr = [...Array(N).keys()].map(function (x) {
- ++x;
- return x;
+ pageNumbers() {
+ const totalPages = Math.ceil(
+ this.featuresCount / this.pagination.pagesize
+ );
+ return [...Array(totalPages).keys()].map((pageNumb) => {
+ ++pageNumb;
+ return pageNumb;
});
- return arr;
},
- displayedPageEnd() {
+ /* displayedPageNumbers() {
+ return this.pageNumbers;
+ //return [...this.pageNumbers].splice(0, 4);
+ }, */
+
+ /* displayedPageEnd() {
return this.featuresCount <= this.pagination.end
? this.featuresCount
: this.pagination.end;
- },
+ }, */
},
methods: {
@@ -453,19 +401,20 @@ export default {
}, 1000);
},
-/* changePage(page) {
+ handlePageChange(page) {
+ console.log("handlePageChange", page, typeof page)
if (page === "next") {
- this.updateFeatures(this.next);
+ this.toNextPage();
} else if (page === "previous") {
- this.updateFeatures(this.previous);
- } else if (typeof page === Number) {
+ this.toPreviousPage();
+ } else if (typeof page === "number") {
//* update limit and offset
- this.updateFeatures();
+ this.toPage(page);
}
- }, */
+ },
toPage(pageNumber) {
- console.log(pageNumber);
+ console.log("toPage", pageNumber);
const toAddOrRemove =
(pageNumber - this.pagination.currentPage) * this.pagination.pagesize;
this.pagination.start += toAddOrRemove;
@@ -486,7 +435,7 @@ export default {
},
toNextPage() {
- if (this.pagination.currentPage !== this.nbPages.length) {
+ if (this.pagination.currentPage !== this.pageNumbers.length) {
if (this.pagination.end < this.featuresCount) {
this.pagination.start += this.pagination.pagesize;
this.pagination.end += this.pagination.pagesize;
--
GitLab