display ellipsis and first-last page

src/components/feature/FeatureListTable.vue

@@ -198,7 +198,18 @@
         >Précédent</a
       >
       <span>
-        <span v-if="displayedPagesNumber[0] > 1" class="ellipsis">…</span>
+        <span v-if="pagination.currentPage >= 5">
+          <a
+            key="page1"
+            @click="$emit('update:page', 1)"
+            class="paginate_button"
+            aria-controls="table-features"
+            data-dt-idx="1"
+            tabindex="0"
+            >{{ 1 }}</a
+          >
+          <span class="ellipsis">…</span>
+        </span>
         <a
           v-for="pageNumber in displayedPagesNumber"
           :key="'page' + pageNumber"
@@ -212,7 +223,18 @@
           tabindex="0"
           >{{ pageNumber }}</a
         >
-        <span v-if="displayedPagesNumber.slice(-1)[0] < pageNumbers.slice(-1)[0]" class="ellipsis">…</span>
+        <span v-if="(lastPageNumber - pagination.currentPage) >= 4">
+          <span class="ellipsis">…</span>
+          <a
+            :key="'page' + lastPageNumber"
+            @click="$emit('update:page', lastPageNumber)"
+            class="paginate_button"
+            aria-controls="table-features"
+            data-dt-idx="1"
+            tabindex="0"
+            >{{ lastPageNumber }}</a
+          >
+        </span>
       </span>
       <a
         id="table-features_next"
@@ -244,12 +266,6 @@ export default {
     "sort",
   ],
 
-  data() {
-    return {
-      displayedPageStart: 0
-    }
-  },
-
   computed: {
     ...mapState(["user"]),
     ...mapGetters(["project", "permissions"]),
@@ -267,6 +283,12 @@ export default {
       },
     },
 
+    displayedPageEnd() {
+      return this.featuresCount <= this.pagination.end
+        ? this.featuresCount
+        : this.pagination.end;
+    },
+
     pageNumbers() {
       const totalPages = Math.ceil(
         this.featuresCount / this.pagination.pagesize
@@ -277,15 +299,25 @@ export default {
       });
     },
 
-    displayedPageEnd() {
-      return this.featuresCount <= this.pagination.end
-        ? this.featuresCount
-        : this.pagination.end;
+    lastPageNumber() {
+      return this.pageNumbers.slice(-1)[0];
     },
 
     displayedPagesNumber() {
-      return [...this.pageNumbers].splice(this.displayedPageStart, 5);
-    }
+      //* si la page courante est inférieur à 5, la liste commence à l'index 0 et on retourne 5 pages
+      let firstPageInList = 0;
+      let pagesQuantity = 5;
+        //* à partir de la 5ième page et jusqu'à la 4ième page avant la fin : n'afficher que 3 page entre les ellipses et la page courante doit être au milieu
+      if (this.pagination.currentPage >= 5 && !(this.lastPageNumber - this.pagination.currentPage < 4)) {
+        firstPageInList = this.pagination.currentPage - 2;
+        pagesQuantity = 3
+      }
+      //* a partir de 4 résultat avant la fin afficher seulement les 5 derniers résultats
+      if (this.lastPageNumber - this.pagination.currentPage < 4) {
+        firstPageInList = this.lastPageNumber - 5;
+      }
+      return this.pageNumbers.slice(firstPageInList, firstPageInList + pagesQuantity);
+    },
   },
 
   methods: {
@@ -309,17 +341,14 @@ export default {
     changeSort(column) {
       if (this.sort.column === column) {
         //changer order
-        this.$emit(
-          "update:sort",
-          { column: this.sort.column, ascending: !this.sort.ascending }
-        );
+        this.$emit("update:sort", {
+          column: this.sort.column,
+          ascending: !this.sort.ascending,
+        });
       } else {
         this.sort.column = column;
         this.sort.ascending = true;
-        this.$emit(
-          "update:sort",
-          { column, ascending: true }
-        );
+        this.$emit("update:sort", { column, ascending: true });
       }
     },
   },