fix: better pagination

src/components/tableaux/TableRenderer.vue

@@ -3,6 +3,7 @@ import { computed, reactive, onMounted } from "vue";
 import PaginatedFilteredTable from "@/utils/tables/PaginatedFilteredTable";
 import type { TableField, TableItem } from "@/utils/tables/types";
 import type { PropType } from "vue";
+import PageList from "./pagination/PageList.vue";
 
 const props = defineProps({
   fields: {
@@ -53,12 +54,8 @@ const getTotalPage = computed(() => {
   return table?.pageNumber;
 });
 
-function canGo(rel: number) {
+function goTo(page: number) {
-  return table?.canGo(rel);
+  table.currentPage = page - 1;
-}
-
-function go(rel: number) {
-  table?.go(rel);
 }
 </script>
 
@@ -94,29 +91,12 @@ function go(rel: number) {
       </tr>
     </tbody>
   </table>
-  <div class="d-flex f-between f-middle nextprevious small-text">
+  <div class="d-flex f-end">
-    <div>
+    <PageList
-      <strong class="btn m-0 pages pl-0">
+      :current-page="currentPage + 1"
-        Page {{ currentPage + 1 }} / {{ getTotalPage + 1 }}
+      :page-nbr="getTotalPage + 1"
-      </strong>
+      @set-page="goTo"
-    </div>
+    ></PageList>
-
-    <div>
-      <button
-        class="btn-grey btn-small m-0 mr-1"
-        :class="{ 'bg-grey': !canGo(-1), 'btn-secondary': canGo(-1) }"
-        @click="go(-1)"
-      >
-        Page précédante
-      </button>
-      <button
-        class="btn-grey btn-small m-0"
-        :class="{ 'bg-grey': !canGo(1), 'btn-secondary': canGo(1) }"
-        @click="go(1)"
-      >
-        Page suivante
-      </button>
-    </div>
   </div>
 </template>
 

src/components/tableaux/pagination/PageButton.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+  page: number;
+  currentPage: number;
+}>();
+
+const isPage = computed(() => {
+  return props.page === props.currentPage;
+});
+</script>
+
+<template>
+  <button
+    class="btn-small"
+    :class="{ 'btn-secondary': !isPage, 'bg-primary': isPage }"
+    :disabled="isPage"
+  >
+    {{ page }}
+  </button>
+</template>

src/components/tableaux/pagination/PageList.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import PageButton from "./PageButton.vue";
+
+const PAGE_NUMBER = 7;
+
+const props = defineProps<{
+  pageNbr: number;
+  currentPage: number;
+}>();
+
+const emit = defineEmits(["setPage"]);
+
+const pageToDraw = computed(() => {
+  return Math.min(props.pageNbr, PAGE_NUMBER);
+});
+
+const isAtStart = computed(() => {
+  return props.currentPage < 4;
+});
+
+const isAtEnd = computed(() => {
+  return props.currentPage > props.pageNbr - 2;
+});
+
+function setPage(page: number) {
+  emit("setPage", page);
+}
+</script>
+
+<template>
+  <div>
+    <button
+      class="btn-small"
+      :disabled="currentPage <= 1"
+      :class="{ 'btn-secondary': currentPage > 1, 'bg-grey': currentPage <= 1 }"
+      @click="setPage(currentPage - 1)"
+    >
+      ←
+    </button>
+    <span v-if="pageNbr <= PAGE_NUMBER">
+      <v-for v-for="index in pageToDraw" :key="index">
+        <PageButton
+          @click="setPage(index)"
+          :current-page="currentPage"
+          :page="index"
+        ></PageButton>
+      </v-for>
+    </span>
+    <span v-else-if="isAtStart">
+      <PageButton
+        :current-page="currentPage"
+        :page="1"
+        @click="setPage(1)"
+      ></PageButton>
+      <PageButton
+        :current-page="currentPage"
+        :page="2"
+        @click="setPage(2)"
+      ></PageButton>
+      <PageButton
+        :current-page="currentPage"
+        :page="3"
+        @click="setPage(3)"
+      ></PageButton>
+      <PageButton
+        :current-page="currentPage"
+        :page="4"
+        @click="setPage(4)"
+      ></PageButton>
+      <PageButton
+        :current-page="currentPage"
+        :page="5"
+        @click="setPage(5)"
+      ></PageButton>
+      <button disabled class="btn-small bg-grey disabled">…</button>
+      <PageButton :current-page="currentPage" :page="pageNbr"></PageButton>
+    </span>
+    <span v-else-if="isAtEnd">
+      <PageButton
+        :current-page="currentPage"
+        :page="1"
+        @click="setPage(1)"
+      ></PageButton>
+      <button disabled class="btn-small bg-grey disabled">…</button>
+      <PageButton
+        :current-page="currentPage"
+        :page="pageNbr - 4"
+        @click="setPage(pageNbr - 4)"
+      ></PageButton>
+      <PageButton
+        :current-page="currentPage"
+        :page="pageNbr - 3"
+        @click="setPage(pageNbr - 3)"
+      ></PageButton>
+      <PageButton
+        :current-page="currentPage"
+        :page="pageNbr - 2"
+        @click="setPage(pageNbr - 2)"
+      ></PageButton>
+      <PageButton
+        :current-page="currentPage"
+        :page="pageNbr - 1"
+        @click="setPage(pageNbr - 1)"
+      ></PageButton>
+      <PageButton
+        :current-page="currentPage"
+        :page="pageNbr"
+        @click="setPage(pageNbr)"
+      ></PageButton>
+    </span>
+    <span v-else>
+      <PageButton
+        :current-page="currentPage"
+        :page="1"
+        @click="setPage(1)"
+      ></PageButton>
+      <button disabled class="btn-small bg-grey disabled">…</button>
+      <PageButton
+        :current-page="currentPage"
+        :page="currentPage - 1"
+        @click="setPage(currentPage - 1)"
+      ></PageButton>
+      <PageButton :current-page="currentPage" :page="currentPage"></PageButton>
+      <PageButton
+        :current-page="currentPage"
+        :page="currentPage + 1"
+        @click="setPage(currentPage + 1)"
+      ></PageButton>
+      <button disabled class="btn-small bg-grey disabled">…</button>
+      <PageButton
+        :current-page="currentPage"
+        :page="pageNbr"
+        @click="setPage(pageNbr)"
+      ></PageButton>
+    </span>
+    <button
+      class="btn-small"
+      :disabled="currentPage >= pageNbr"
+      :class="{
+        'btn-secondary': currentPage < pageNbr,
+        'bg-grey': currentPage >= pageNbr,
+      }"
+      @click="setPage(currentPage + 1)"
+    >
+      →
+    </button>
+  </div>
+</template>

src/styles/mixins/_btns.scss

@@ -19,9 +19,6 @@
 
 @mixin button-hover() {
   transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
-  &:hover, &:active, &:focus {
-      background-color:transparent;
-  }
 
   &:focus {
     outline: none;