REDMINE_ISSUE-12652

src/components/feature/FeatureListTable.vue

@@ -10,33 +10,33 @@
             Statut
             <i
               :class="{
-                down: isSortedAsc('statut'),
-                up: isSortedDesc('statut'),
+                down: isSortedAsc('status'),
+                up: isSortedDesc('status'),
               }"
               class="icon sort"
-              @click="changeSort('statut')"
+              @click="changeSort('status')"
             />
           </th>
           <th class="center">
             Type
             <i
               :class="{
-                down: isSortedAsc('type'),
-                up: isSortedDesc('type'),
+                down: isSortedAsc('feature_type'),
+                up: isSortedDesc('feature_type'),
               }"
               class="icon sort"
-              @click="changeSort('type')"
+              @click="changeSort('feature_type')"
             />
           </th>
           <th class="center">
             Nom
             <i
               :class="{
-                down: isSortedAsc('nom'),
-                up: isSortedDesc('nom'),
+                down: isSortedAsc('title'),
+                up: isSortedDesc('title'),
               }"
               class="icon sort"
-              @click="changeSort('nom')"
+              @click="changeSort('title')"
             />
           </th>
           <th class="center">
@@ -75,7 +75,7 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(feature, index) in sortedFeatures" :key="index">
+        <tr v-for="(feature, index) in paginatedFeatures" :key="index">
           <td class="center">
             <div
               class="ui checkbox"
@@ -153,7 +153,6 @@
             >
           </td>
           <td class="center">
-            <!-- |date:'Ymd' -->
             {{ feature.properties.updated_on }}
           </td>
           <td class="center" v-if="user">
@@ -187,7 +186,7 @@
       class="dataTables_paginate paging_simple_numbers"
     >
       <a
-        @click="$emit('update:page', 'previous');"
+        @click="$emit('update:page', 'previous')"
         id="table-features_previous"
         :class="[
           'paginate_button previous',
@@ -199,8 +198,20 @@
         >Précédent</a
       >
       <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 pageNumbers"
+          v-for="pageNumber in displayedPageNumbers"
           :key="'page' + pageNumber"
           @click="$emit('update:page', pageNumber)"
           :class="[
@@ -212,8 +223,19 @@
           tabindex="0"
           >{{ pageNumber }}</a
         >
+        <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"
         :class="[
@@ -223,7 +245,7 @@
         aria-controls="table-features"
         data-dt-idx="7"
         tabindex="0"
-        @click="$emit('update:page', 'next');"
+        @click="$emit('update:page', 'next')"
         >Suivant</a
       >
     </div>
@@ -241,18 +263,9 @@ export default {
     "checkedFeatures",
     "featuresCount",
     "pagination",
-    "pageNumbers",
+    "sort",
   ],
 
-  data() {
-    return {
-      sort: {
-        column: "",
-        ascending: true,
-      },
-    };
-  },
-
   computed: {
     ...mapState(["user"]),
     ...mapGetters(["project", "permissions"]),
@@ -261,50 +274,6 @@ export default {
       return this.permissions.is_project_administrator;
     },
 
-    sortedFeatures() {
-      let sortedFeatures = [...this.paginatedFeatures];
-      // Ajout du tri
-      if (this.sort.column !== "") {
-        sortedFeatures = sortedFeatures.sort((a, b) => {
-          let aProp = this.getFeatureDisplayName(a);
-          let bProp = this.getFeatureDisplayName(b);
-          if (this.sort.column === "statut") {
-            aProp = a.properties.status.value;
-            bProp = b.properties.status.value;
-          } else if (this.sort.column === "type") {
-            aProp = a.properties.feature_type.title;
-            bProp = b.properties.feature_type.title;
-          } else if (this.sort.column === "updated_on") {
-            aProp = a.properties.updated_on;
-            bProp = b.properties.updated_on;
-          } else if (this.sort.column === "display_creator") {
-            aProp = a.properties.display_creator;
-            bProp = b.properties.display_creator;
-          }
-          //ascending
-          if (this.sort.ascending) {
-            if (aProp < bProp) {
-              return -1;
-            }
-            if (aProp > bProp) {
-              return 1;
-            }
-            return 0;
-          } else {
-            //descending
-            if (aProp < bProp) {
-              return 1;
-            }
-            if (aProp > bProp) {
-              return -1;
-            }
-            return 0;
-          }
-        });
-      }
-      return sortedFeatures;
-    },
-
     checked: {
       get() {
         return this.checkedFeatures;
@@ -319,6 +288,36 @@ export default {
         ? this.featuresCount
         : this.pagination.end;
     },
+
+    pageNumbers() {
+      const totalPages = Math.ceil(
+        this.featuresCount / this.pagination.pagesize
+      );
+      return [...Array(totalPages).keys()].map((pageNumb) => {
+        ++pageNumb;
+        return pageNumb;
+      });
+    },
+
+    lastPageNumber() {
+      return this.pageNumbers.slice(-1)[0];
+    },
+
+    displayedPageNumbers() {
+      //* 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: {
@@ -342,10 +341,14 @@ export default {
     changeSort(column) {
       if (this.sort.column === column) {
         //changer order
-        this.sort.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 });
       }
     },
   },
@@ -433,6 +436,10 @@ export default {
   box-shadow: none;
 }
 
+.dataTables_wrapper .dataTables_paginate .ellipsis {
+  padding: 0 1em;
+}
+
 i.icon.sort:not(.down):not(.up) {
   color: rgb(220, 220, 220);
 }