Pagination (#9)

* Unmodified Copy of the Nautilus Librarian Licensing Docs * Scroll to top when moving between pages * Fix page buttons prior to page 5 * Major refactor to pagination logic * Visual fix * Adjust page when adjusting page size
rpdl-net · Jun 3, 2022 · cd73ea8 · cd73ea8
1 parent 0b4c0bc
commit cd73ea8
Show file tree

Hide file tree

Showing 9 changed files with 1,078 additions and 692 deletions.
diff --git a/LICENSE b/LICENSE
diff --git a/frontend/src/components/Pagination.vue b/frontend/src/components/Pagination.vue
@@ -7,7 +7,7 @@
           Showing
           <span class="font-medium">{{ (currentPage * pageSize) - pageSize }}</span>
           to
-          <span class="font-medium">{{ currentPage * pageSize }}</span>
+          <span class="font-medium">{{ Math.min(currentPage * pageSize, totalResults) }}</span>
           of
           <span class="font-medium">{{ totalResults }}</span>
           results
@@ -38,35 +38,57 @@
             </svg>
           </button>
 
-          <template v-if="currentPage > 4">
-            <button
-                @click="goToFirstPage"
-                class="page-button">
-              1
+          <button @click="goToFirstPage"
+              class="page-button"
+              :disabled="currentPage === 1">
+            1
+          </button>
+
+          <template v-if="totalPages < 7">
+            <button v-for="i in totalPages - 2" :key="i"
+                  @click="goToPage(i + 1)"
+                  :disabled="i + 1 === currentPage"
+                  class="page-button">
+                  {{ i + 1 }}
+            </button>
+          </template>
+
+          <template v-else-if="currentPage <= 4">
+            <button v-for="i in 5" :key="i + 1"
+                  @click="goToPage(i + 1)"
+                  :disabled="i + 1 === currentPage"
+                  class="page-button">
+                  {{ i + 1 }}
             </button>
-            <span
+            <span v-if="totalPages > 7"
                 class="page-button">
               ...
             </span>
           </template>
-          <template v-else>
-            <button v-for="i in 5" :key="i"
-                  @click="goToPage(i)"
-                  :disabled="i === currentPage"
+
+          <template v-else-if="currentPage > totalPages - 4">
+            <span v-if="totalPages > 7"
+              class="page-button">
+              ...
+            </span>
+            <button v-for="i in 5" :key="totalPages - 6 + i"
+                  @click="goToPage(totalPages - 6 + i)"
+                  :disabled="totalPages - 6 + i === currentPage"
                   class="page-button">
-                  {{ i }}
+                  {{ totalPages - 6 + i }}
             </button>
           </template>
 
-          <template v-if="currentPage > 4 && currentPage < totalPages-3">
+          <template v-else>
+            <span class="page-button">
+              ...
+            </span>
             <button v-for="i in 2" :key="currentPage - 3 + i"
                     @click="goToPage(currentPage - 3 + i)"
                     class="page-button">
               {{ currentPage - 3 + i }}
             </button>
-            <button
-                :key="currentPage"
-                disabled
+            <button disabled
                 class="page-button">
               {{ currentPage }}
             </button>
@@ -75,28 +97,18 @@
                     class="page-button">
               {{ currentPage + i }}
             </button>
-          </template>
-
-          <template v-if="currentPage < totalPages-3">
-            <span
-                class="page-button">
+            <span class="page-button">
               ...
             </span>
-            <button
-                @click="goToLastPage"
-                class="page-button">
-              {{ totalPages }}
-            </button>
-          </template>
-          <template v-else>
-            <button v-for="i in 5" :key="totalPages-5+i" v-show="totalPages-5+i > 0"
-                    @click="goToPage(totalPages-5+i)"
-                    :disabled="totalPages-5+i === currentPage"
-                    class="page-button">
-              {{ totalPages-5+i }}
-            </button>
           </template>
 
+          <button v-if="totalPages > 1"
+              @click="goToLastPage"
+              :disabled="totalPages === currentPage"
+              class="page-button">
+            {{ totalPages }}
+          </button>
+
           <button
               @click="goToNextPage()"
               class="page-button">

diff --git a/frontend/src/views/Torrents.vue b/frontend/src/views/Torrents.vue
@@ -8,7 +8,8 @@
       <FilterCategory />
       <ChangePageSize :update-page-size="updatePageSize" />
     </div>
-    <TorrentList id="tList" class="mt-4" v-if="torrents.results.length > 0" :torrents="torrents.results" :sorting="sorting" :update-sorting="updateSorting"/>
+
+    <TorrentList id="TorrentList" class="mt-4" v-if="torrents.results.length > 0" :torrents="torrents.results" :sorting="sorting" :update-sorting="updateSorting"/>
     <Pagination v-if="torrents.results.length > 0" :current-page.sync="currentPage" :total-pages="totalPages" :total-results="torrents.total" :page-size="pageSize" />
     <div v-else class="py-6 text-slate-400">This category has no results.</div>
   </div>
@@ -68,6 +69,7 @@ export default {
       this.$router.replace({ query: {...this.$route.query, search: ''}})
     },
     updateSorting(sorting) {
+      this.currentPage = Math.floor((this.currentPage - 1) * this.pageSize / pageSize) + 1;
       this.sorting = sorting;
       this.loadTorrents(this.currentPage);
     },
@@ -97,7 +99,7 @@ export default {
     },
     currentPage(newPage) {
       this.loadTorrents(newPage, this.sorting);
-      document.getElementById("tList").scrollIntoView({behavior: "smooth"});
+      document.getElementById("TorrentList").scrollIntoView({behavior: "smooth"});
     },
     categoryFilters() {
       this.loadTorrents(this.currentPage, this.sorting);