add pagination

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;

components/btn/Pagination.vue

+<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>

components/certif/List.vue

 <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)

components/member/List.vue

 <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
+				})
 		}
 	}
 }

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