From 8dc2cf93bfdaa303bb19202ec79aaaa38bce1721 Mon Sep 17 00:00:00 2001
From: paidge <paidge_cs@hotmail.com>
Date: Thu, 27 Jan 2022 18:30:52 +0100
Subject: [PATCH] add pagination
---
assets/css/style.scss | 4 ++
components/btn/Pagination.vue | 56 ++++++++++++++++++++
components/certif/List.vue | 15 +++++-
components/member/List.vue | 73 +++++++++++++++-----------
components/navigation/menu/Sidebar.vue | 2 +-
5 files changed, 116 insertions(+), 34 deletions(-)
create mode 100644 components/btn/Pagination.vue
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 967a465..b2a4637 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -49,6 +49,10 @@ $info: #0a8299;
@import "font";
@import "bootstrap";
+.btn:disabled {
+ cursor: not-allowed;
+}
+
.table-hover tbody tr,
thead.sortable th {
cursor: pointer;
diff --git a/components/btn/Pagination.vue b/components/btn/Pagination.vue
new file mode 100644
index 0000000..63feac3
--- /dev/null
+++ b/components/btn/Pagination.vue
@@ -0,0 +1,56 @@
+<template>
+ <div class="text-center" v-if="arrayLength > pageSize">
+ <button
+ class="btn"
+ :class="{
+ 'btn-primary': currentPage > 1,
+ 'btn-secondary': currentPage == 1
+ }"
+ @click="prevPage"
+ :disabled="currentPage == 1">
+ ⟨
+ </button>
+ <span class="small px-2"
+ >{{ currentPage }} / {{ Math.ceil(arrayLength / pageSize) }}</span
+ >
+ <button
+ class="btn"
+ :class="{
+ 'btn-primary': currentPage * pageSize < arrayLength,
+ 'btn-secondary': currentPage * pageSize >= arrayLength
+ }"
+ @click="nextPage"
+ :disabled="currentPage * pageSize >= arrayLength">
+ ⟩
+ </button>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ currentPage: {
+ type: Number,
+ required: true
+ },
+ pageSize: {
+ type: Number,
+ required: true
+ },
+ arrayLength: {
+ type: Number,
+ required: true
+ }
+ },
+ methods: {
+ nextPage: function () {
+ if (this.currentPage * this.pageSize < this.arrayLength)
+ this.$emit("update:currentPage", this.currentPage + 1)
+ },
+ prevPage: function () {
+ if (this.currentPage > 1)
+ this.$emit("update:currentPage", this.currentPage - 1)
+ }
+ }
+}
+</script>
diff --git a/components/certif/List.vue b/components/certif/List.vue
index f8b065a..3d29bd8 100644
--- a/components/certif/List.vue
+++ b/components/certif/List.vue
@@ -1,5 +1,5 @@
<template>
- <div class="table-responsive">
+ <div class="table-responsive pb-3">
<table
class="table table-striped table-hover"
v-if="certifsPending.length > 0">
@@ -99,6 +99,10 @@
</tr>
</tbody>
</table>
+ <BtnPagination
+ :currentPage.sync="currentPage"
+ :pageSize="pageSize"
+ :arrayLength="certifs.length - certifsPending.length" />
</div>
</template>
@@ -107,7 +111,9 @@ export default {
data() {
return {
currentSort: "expires_on",
- currentSortDir: "asc"
+ currentSortDir: "asc",
+ currentPage: 1,
+ pageSize: 5
}
},
props: {
@@ -149,6 +155,11 @@ export default {
return 0
})
.filter((el) => el.pending == false)
+ .filter((row, index) => {
+ let start = (this.currentPage - 1) * this.pageSize
+ let end = this.currentPage * this.pageSize
+ if (index >= start && index < end) return true
+ })
.map((certif) => ({
...certif,
...(this.type === "received" ? certif.from : certif.to)
diff --git a/components/member/List.vue b/components/member/List.vue
index 7a8cfe6..b6f6b07 100644
--- a/components/member/List.vue
+++ b/components/member/List.vue
@@ -1,5 +1,5 @@
<template>
- <div class="table-responsive">
+ <div class="table-responsive pb-3">
<table class="table table-striped table-hover">
<thead class="thead-light sortable" v-if="displayHead">
<tr>
@@ -79,6 +79,10 @@
</tr>
</tbody>
</table>
+ <BtnPagination
+ :currentPage.sync="currentPage"
+ :pageSize="pageSize"
+ :arrayLength="members.length" />
</div>
</template>
@@ -87,7 +91,9 @@ export default {
data() {
return {
currentSort: "uid",
- currentSortDir: "asc"
+ currentSortDir: "asc",
+ pageSize: 5,
+ currentPage: 1
}
},
props: {
@@ -115,9 +121,7 @@ export default {
},
methods: {
redirect(hash) {
- this.$router.push(
- this.localePath({ name: "membre", query: { hash } })
- )
+ this.$router.push(this.localePath({ name: "membre", query: { hash } }))
},
sort(s) {
if (s === this.currentSort) {
@@ -132,34 +136,41 @@ export default {
},
computed: {
membersSorted() {
- return this.members.slice().sort((a, b) => {
- let modifier = this.currentSortDir === "desc" ? -1 : 1
+ return this.members
+ .slice()
+ .sort((a, b) => {
+ let modifier = this.currentSortDir === "desc" ? -1 : 1
- if (this.currentSort == "uid") {
- if (a["uid"].toLowerCase() < b["uid"].toLowerCase())
- return -1 * modifier
- if (a["uid"].toLowerCase() > b["uid"].toLowerCase())
- return 1 * modifier
- } else if (this.currentSort == "pubkey") {
- if (a["pubkey"].toLowerCase() < b["pubkey"].toLowerCase())
- return -1 * modifier
- if (a["pubkey"].toLowerCase() > b["pubkey"].toLowerCase())
- return 1 * modifier
- } else if (this.currentSort == "date_sortie") {
- if (
- Math.min(a["limitDate"], a["received_certifications"]["limit"]) <
- Math.min(b["limitDate"], b["received_certifications"]["limit"])
- )
- return -1 * modifier
- if (
- Math.min(a["limitDate"], a["received_certifications"]["limit"]) >
- Math.min(b["limitDate"], b["received_certifications"]["limit"])
- )
- return 1 * modifier
- }
+ if (this.currentSort == "uid") {
+ if (a["uid"].toLowerCase() < b["uid"].toLowerCase())
+ return -1 * modifier
+ if (a["uid"].toLowerCase() > b["uid"].toLowerCase())
+ return 1 * modifier
+ } else if (this.currentSort == "pubkey") {
+ if (a["pubkey"].toLowerCase() < b["pubkey"].toLowerCase())
+ return -1 * modifier
+ if (a["pubkey"].toLowerCase() > b["pubkey"].toLowerCase())
+ return 1 * modifier
+ } else if (this.currentSort == "date_sortie") {
+ if (
+ Math.min(a["limitDate"], a["received_certifications"]["limit"]) <
+ Math.min(b["limitDate"], b["received_certifications"]["limit"])
+ )
+ return -1 * modifier
+ if (
+ Math.min(a["limitDate"], a["received_certifications"]["limit"]) >
+ Math.min(b["limitDate"], b["received_certifications"]["limit"])
+ )
+ return 1 * modifier
+ }
- return 0
- })
+ return 0
+ })
+ .filter((row, index) => {
+ let start = (this.currentPage - 1) * this.pageSize
+ let end = this.currentPage * this.pageSize
+ if (index >= start && index < end) return true
+ })
}
}
}
diff --git a/components/navigation/menu/Sidebar.vue b/components/navigation/menu/Sidebar.vue
index abf3157..4ae86a5 100644
--- a/components/navigation/menu/Sidebar.vue
+++ b/components/navigation/menu/Sidebar.vue
@@ -10,7 +10,7 @@
</nuxt-link>
<div
class="d-flex text-info justify-content-between align-items-baseline mt-3 mx-2">
- <div class="">v0.08</div>
+ <div class="">v0.09</div>
<div class="small" v-if="countMax">
{{ $t("bloc.title") }} n°<span class="font-weight-bold">{{
countMax.number
--
GitLab