From f83c6be54021f7c04d1905e819a2888a6869b398 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Thu, 23 Jan 2025 12:56:44 +0100
Subject: [PATCH] [WIP] fix(front): make pagination work

---
 front/src/components/audio/track/Table.vue | 26 ++++++++--------------
 front/src/components/library/Albums.vue    |  4 ++--
 front/src/components/library/Artists.vue   |  2 +-
 front/src/views/playlists/List.vue         |  4 ++--
 4 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/front/src/components/audio/track/Table.vue b/front/src/components/audio/track/Table.vue
index c3d46306a..04db1b812 100644
--- a/front/src/components/audio/track/Table.vue
+++ b/front/src/components/audio/track/Table.vue
@@ -247,10 +247,9 @@ const updatePage = (page: number) => {
         />
       </div>
       <Pagination
-        v-if="paginateResults && totalTracks > paginateBy"
-        :paginate-by="paginateBy"
-        :total="totalTracks"
-        :current="tracks !== undefined ? page : currentPage"
+        v-if="paginateResults"
+        :pages="paginateBy"
+        v-model:page="page"
         @update:current="updatePage"
       />
     </div>
@@ -275,19 +274,12 @@ const updatePage = (page: number) => {
         :is-album="isAlbum"
         :is-podcast="isPodcast"
       />
-      <div
-        v-if="tracks && paginateResults && totalTracks > paginateBy"
-        class="ui center aligned basic segment tablet-and-below"
-      >
-        <Pagination
-          v-if="paginateResults && totalTracks > paginateBy"
-          :paginate-by="paginateBy"
-          :total="totalTracks"
-          :current="tracks !== undefined ? page : currentPage"
-          :compact="true"
-          @update:current="updatePage"
-        />
-      </div>
+      <Pagination
+        v-if="paginateResults"
+        :pages="paginateBy"
+        v-model:page="page"
+        @update:current="updatePage"
+      />
     </div>
   </div>
 </template>
diff --git a/front/src/components/library/Albums.vue b/front/src/components/library/Albums.vue
index 1671ec73a..a54c7a639 100644
--- a/front/src/components/library/Albums.vue
+++ b/front/src/components/library/Albums.vue
@@ -226,8 +226,8 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
       <Spacer grow />
         <Pagination
           v-if="result && result.count > paginateBy"
-          :page="page"
-          :pages="Math.ceil((result?.results.length || 0)/paginateBy)"
+          v-model:page="page"
+          :pages="Math.ceil((result.count || 0)/paginateBy)"
         />
     </Layout>
 </template>
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index d39c8eb80..da6ce583e 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -237,7 +237,7 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
       <Pagination
         v-if="result && result.count > paginateBy"
         :page="page"
-        :pages="Math.ceil((result?.results.length || 0)/paginateBy)"
+        :pages="Math.ceil((result.count || 0)/paginateBy)"
       />
   </Layout>
 </template>
diff --git a/front/src/views/playlists/List.vue b/front/src/views/playlists/List.vue
index 432286ac3..b230f260a 100644
--- a/front/src/views/playlists/List.vue
+++ b/front/src/views/playlists/List.vue
@@ -211,8 +211,8 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
     <Spacer grow />
     <Pagination
       v-if="result && result.count > paginateBy"
-      :page="page"
-      :pages="Math.ceil((result?.results.length || 0)/paginateBy)"
+      v-model:page="page"
+      :pages="Math.ceil((result.count || 0)/paginateBy)"
     />
   </Layout>
 </template>