feat: backend pagination for albums

1 files changed, 38 insertions, 5 deletions

diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index e716b37..47e7057 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -12,9 +12,23 @@
 				<div class="column">
 					<h2 class="subtitle">Files</h2>
 					<hr>
-					<!-- TODO: Add a list view so the user can see the files that don't have thumbnails, like text documents -->
+
 					<Grid v-if="files.length"
 						:files="files" />
+
+					<b-pagination
+						v-if="count > perPage"
+						:total="count"
+						:per-page="perPage"
+						:current.sync="current"
+						class="pagination"
+						icon-prev="icon-interface-arrow-left"
+						icon-next="icon-interface-arrow-right"
+						icon-pack="icon"
+						aria-next-label="Next page"
+						aria-previous-label="Previous page"
+						aria-page-label="Page"
+						aria-current-label="Current page" />
 				</div>
 			</div>
 		</div>
@@ -34,22 +48,41 @@ export default {
 	data() {
 		return {
 			name: null,
-			files: []
+			files: [],
+			count: 0,
+			current: 1,
+			perPage: 30
 		};
 	},
 	metaInfo() {
 		return { title: 'Album' };
 	},
+	watch: {
+		current: 'getFiles'
+	},
 	async asyncData({ $axios, route }) {
+		const perPage = 30;
+		const current = 1; // current page
+
 		try {
-			const response = await $axios.$get(`album/${route.params.id}/full`);
+			const response = await $axios.$get(`album/${route.params.id}/full`, { params: { page: current, limit: perPage }});
 			return {
-				files: response.files ? response.files : []
+				files: response.files || [],
+				count: response.count || 0,
+				current,
+				perPage
 			};
 		} catch (error) {
 			console.error(error);
 			return { files: [] };
 		}
-	}
+	},
+	methods: {
+		async getFiles() {
+			const response = await this.$axios.$get(`album/${this.$route.params.id}/full`, { params: { page: this.current, limit: this.perPage }});
+			this.files = response.files;
+			this.count = response.count;
+		}
+	},
 };
 </script>